如何用JavaScript將網頁表格數據轉換為CSV

如何用JavaScript將網頁表格數據轉換為CSV文件

網頁開發中，我們經常需要將表格中的數據導出為CSV文件，以便進行數據分析或共享。今天，我們就來分享一下如何通過JavaScript實現這個功能。具體實現步驟包括：提取表格數據、構建CSV字符串、創建下載鏈接以及觸發下載操作。希望這個教程能幫你輕松實現表格數據導出功能！

完整代碼片段

首先，我們來看一下完整的代碼片段，然后再進行分段介紹。

function extractTableData(tableId) {
  const table=document.getElementById(tableId);
  const data=[];

  for (const row of table.rows) {
    const rowData=[];
    for (const cell of row.cells) {
      rowData.push(cell.innerText.trim());
    }
    data.push(rowData);
  }

  return data;
}

function buildCsvString(data) {
  return data.map(row=> row.join(',')).join('\n');
}

function createDownloadLink(csvContent) {
  const blob=new Blob([csvContent], { type: 'text/csv;charset=utf-8' });
  return URL.createObjectURL(blob);
}

function triggerDownload(url, filename) {
  const link=document.createElement('a');
  link.href=url;
  link.download=filename;
  link.click();
  URL.revokeObjectURL(url);
}

function exportTableToCsv(tableId, filename) {
  const tableData=extractTableData(tableId);
  const csvContent=buildCsvString(tableData);
  const downloadUrl=createDownloadLink(csvContent);
  triggerDownload(downloadUrl, filename);
}

// 調用示例
exportTableToCsv('myTableId', 'exported_data.csv');

提取表格數據

首先，我們需要通過 document.getElementById 選擇目標表格。然后，我們使用 for...of 循環遍歷每一行 (<tr>) 和每一個單元格 (<td>)，提取其中的文本內容并去除多余的空格。

function extractTableData(tableId) {
  const table=document.getElementById(tableId);
  const data=[];

  for (const row of table.rows) {
    const rowData=[];
    for (const cell of row.cells) {
      rowData.push(cell.innerText.trim());
    }
    data.push(rowData);
  }

  return data;
}

在這個函數中，我們首先通過ID獲取目標表格，然后遍歷每一行和每一個單元格，將單元格的文本內容去除多余空格后存入一個數組，最后將這個數組推入 data 數組中。

構建CSV字符串

接下來，我們創建一個函數 buildCsvString，將提取的表格數據構建成CSV字符串。我們使用逗號（,）連接每行的數據，并用換行符（\n）連接每行。

function buildCsvString(data) {
  return data.map(row=> row.join(',')).join('\n');
}

在這個函數中，我們使用 map 方法遍歷每一行的數據，將每行數據用逗號連接成字符串，然后再用換行符將所有行連接成一個完整的CSV字符串。

創建下載鏈接

使用 Blob 對象創建一個表示CSV數據的blob，并將其類型設置為 text/csv。然后，使用 URL.createObjectURL 創建一個臨時的URL來指向這個blob。

function createDownloadLink(csvContent) {
  const blob=new Blob([csvContent], { type: 'text/csv;charset=utf-8' });
  return URL.createObjectURL(blob);
}

在這個函數中，我們首先創建一個 Blob 對象，并將CSV內容傳入。然后，使用 URL.createObjectURL 方法創建一個指向這個 Blob 對象的臨時URL。

觸發下載

最后，我們創建一個新的錨點 (<a>) 元素，并將其 href 屬性設置為臨時URL，download 屬性設置為我們想要的文件名（例如，"exported_data.csv"）。然后，模擬點擊事件以啟動下載。

function triggerDownload(url, filename) {
  const link=document.createElement('a');
  link.href=url;
  link.download=filename;
  link.click();
  URL.revokeObjectURL(url);
}

在這個步驟中，我們創建一個新的 <a> 元素，并設置其 href 和 download 屬性。然后，通過調用 click 方法模擬一次點擊事件，觸發文件下載。最后，使用 URL.revokeObjectURL 方法釋放這個臨時URL。

整合函數

最后，我們將上述步驟整合到一個函數中，便于調用。

function exportTableToCsv(tableId, filename) {
  const tableData=extractTableData(tableId);
  const csvContent=buildCsvString(tableData);
  const downloadUrl=createDownloadLink(csvContent);
  triggerDownload(downloadUrl, filename);
}

// 調用示例
exportTableToCsv('myTableId', 'exported_data.csv');

通過以上步驟，你就可以輕松實現將表格數據導出為CSV文件的功能了。希望這篇教程對你有所幫助！如果有任何問題或建議，歡迎在評論區留言互動。

結語

導出表格數據為CSV文件是一個非常實用的功能，不僅可以幫助我們方便地保存和分享數據，還可以用于數據分析和處理。希望通過這篇文章，你能夠掌握這一技巧，并在實際項目中應用。如果你覺得這篇文章對你有幫助，記得點贊、收藏并分享給更多的小伙伴！如果你有任何問題或需要進一步的幫助，歡迎在評論區留言，我會及時回復你。謝謝閱讀！

某網站讀取表格里面的內容，簡單處理后寫入CSV文件。需要留意：查找某些字符是否存在，查找其位置，按照位置讀取字符串內容，Python真的蠻靈活的。后續還會做兩個文件的比較，以及文件內容的刪除。讓已實現的功能具有普適性，抽取函數供不同場景使用，這才有軟件工程的思想。

實踐Python

fileName="SplitNo";

nowTime=datetime.datetime.now().strftime('%Y-%m-%d-%H-%M-%S')

filePath=fileName + nowTime + ".csv";

csvFile=open(filePath, 'w', newline='', encoding='utf-8')

writer=csv.writer(csvFile,dialect='excel')

head=["頁數","序號","編號", "產品名稱", "原始文本"]

writer.writerow(head)

startPage=1;

totalPage=1260;

wait.until(EC.presence_of_element_located((By.ID, "content")))

browser.find_element_by_id("page").clear()

browser.find_element_by_id("page").send_keys(str(startPage));

browser.find_elements_by_xpath('//input[@src="images/dataanniu_11.gif"]')[0].click();

time.sleep(3)

n=startPage;

while n < totalPage:

wait.until(EC.presence_of_element_located((By.ID, "content")))

content=browser.find_element_by_id("content");

oneThanOneLine=False;

for attr in content.find_elements_by_tag_name("a"):

text=str(attr.get_attribute('innerHTML'))

text=text.replace('\r', '').replace('\n', '').replace('\t', '')

print(str(text) + "查詢位置：" + (str)(text.find(".")))

if text.find(".") !=-1:

csvRow=[]

csvRow.append(str(n))

pos=findPos(text)

if pos !=-1:

name=text[0:pos-1]

notext=text[pos:-1]

csvRow.append(name.split(".")[0])

csvRow.append(notext.split(" ")[0])

if name.__len__() > 1:

csvRow.append(name.split(".")[1])

csvRow.append(text)

writer.writerow(csvRow)

preText=text

oneThanOneLine=False

else:

preText=preText + text;

#p=re.compile(r'[<](.*?)[>]', re.S)

# matches=re.findall(cleanr, preText)\

#for match in matches:

# print(match)

cleanr=re.compile('<.*?>')

preText=re.sub(cleanr, '', preText)

print(preText)

oneThanOneLine=True

n=n + 1

wait.until(EC.presence_of_element_located((By.ID, "page")))

browser.find_element_by_id("page").clear()

browser.find_element_by_id("page").send_keys(str(n))

browser.find_elements_by_xpath('//input[@src="images/xxxx.gif"]')[0].click()

print("已經切換到新一頁：" + str(n))

csvFile.close()

browser.close()

碰到的問題：

1、TypeError: expected string or bytes-like object

使用場景：content=browser.find_element_by_id("content");

tdList=re.findall(r'<td[^>]*>(.*?)</td>', str(content.get_attribute('innerHTML')), re.I | re.M)

if tdList:

for item in tdList:

print(item)

使用函數：re.findall(pattern，string，flag)

pattern匹配的是字符串，需要把第二個參數轉化為string類型就可以。

2、對循環列表的最后一個元素進行特別處理

使用場景：aTag=attr.find_elements_by_tag_name("a")

if aTag.__len__()>1:

for aText in aTag:

if aTag.__len__() - 1==aTag.index(aText):

print(aText )

3、超時跳轉使用wait元素比較靠譜些

wait.until(EC.presence_of_element_located((By.ID, "content")))

print(str(n) + "img[@src='images/dataanniu_07.gif'])")

content=browser.find_element_by_id("content");

content.find_elements_by_xpath('//img[@src="images/dataanniu_07.gif"]')[0].click();'''

4、查詢某字符串里面的HTML字符

p=re.compile(r'[<](.*?)[>]', re.S)

matches=re.findall(p, preText)

for match in matches:

print(match)

5、清除某字符串里面的HTML字符

cleanr=re.compile('<.*?>')

preText=re.sub(cleanr, '', preText)

6、記錄程序執行時間

import datetime

startTime=datetime.datetime.now()

endTime=datetime.datetime.now()

print(endTime - startTime).seconds

7、等待元素的方法

隱式等待：（WebDriver類下的）implicitly_wait(X)，在X時間內，頁面加載完成，進行下一步操作。首先Implicit Waits默認是等待時間是0，同時隱性等待是對driver起作用，所以只要設置一次即可，比強制等待更智能

缺點：非要加載到整個頁面才能執行代碼，這樣影響代碼的執行效率。一般情況下，我們想要的結果是只需加載到了我要定位的元素就執行代碼，不需要等待整個頁面的完全加載出來再執行代碼。

Sleep顯式等待：最簡單的一種辦法就是強制等待sleep(X)，強制讓瀏覽器等待X秒，不管當前操作是否完成，是否可以進行下一步操作，都必須等X秒的時間。

缺點是不能準確把握需要等待的時間；優點是使用簡單，可以在調試時使用。

WebDriverWait顯示等待：無需等待整個頁面加載完成，只需加載到你要定位的元素就可以執行代碼。

優點：代碼執行效率快。是最智能的設置元素等待的方式。

缺點：需要導入webdriver下的expected_conditions、WebDriverWait、By三個包；寫等待時間的代碼稍顯復雜。

蟲是一件很有趣的事情，就像黑客一樣，和服務器對抗，服務器維護代碼防止爬蟲，我們通過各種bug解決爬蟲困難，真實有趣！今天給大家帶來一串代碼，針對網頁中的表格爬取，表格頁碼變化，而鏈接url不變的情況1

首先給出爬取的原文鏈接：https://d.qianzhan.com/yuanqu/

接下來一步一步解釋一下代碼：

#導入所需庫文件
import requests
import pandas as pd
import csv

代碼核心

上面三個庫文件是本次爬蟲所需的主要庫，requests庫向網站發送請求，請求成功則返回響應狀態碼為200，否則為400或者404，pandas庫可以用來直接抓取表格數據，csv庫用來將文件保存在本地csv文件內。

#這里爬取的表格為廣東省的數據表格
areas=['廣東省']
#寫入鏈接url
urls=['https://d.qianzhan.com/yuanqu/?p={}'.format(str)for str in areas]
x=0
for url in urls:
 #打開csv文件，在第一行寫入標題
 with open('前瞻.csv', 'a', newline='', encoding='utf-8-sig') as csvfile:
 w=csv.writer(csvfile)
 # 寫入標題或稱之為變量
 w.writerow(['序號', '園區名稱', '省份', '城市', '占地面積', '企業數', '詳情'])
 # 對表格的全部頁數進行抓取
 for i in range(1, 33): # 跳頁
 # 在網頁源代碼找到頁碼的屬性，這里頁碼在屬性page上
 data={
 'page': i
 }
 # 對網站發送請求，獲得響應
 s=requests.session()
 d=s.get(url, params=data)
 # 抓取html表格
 tb=pd.read_html(d.text)[1] 
 # 將抓取來的表格填入csv文件內
 tb.to_csv(r'前瞻.csv', mode='a', encoding='utf_8_sig', header=0, index=0)
 # 每抓取玩一個省份，打印出抓取結果，給用戶更好體驗
 print(areas[x], "已經抓取完成！請到本地文檔中查看抓取結果！")
 x=x+1
# 全部抓取完成，則打印'全部抓取完畢!'

print('全部抓取完畢!')