网页开发中，我们经常需要将表格中的数据导出为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真的蛮灵活的。后续还会做两个文件的比较，以及文件内容的删除。让已实现的功能具有普适性，抽取函数供不同场景使用，这才有软件工程的思想。

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三个包；写等待时间的代码稍显复杂。

#导入所需库文件
import requests
import pandas as pd
import 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('全部抓取完毕!')