Vue组件-爬取页面表格中的数据并保存为csv文件

背景

实际开发过程中需要将前端以表格形式展示的数据保存为csv格式的文件，由于数据涉及到的种类比较多，格式化都是放在前端进行的，所以后端以接口下载的形式返回csv文件会比较麻烦，于是想着直接写个组件爬取页面中表格内的数据。

开发框架：Vue+Webpack+Element-UI

实现

分析

首先分析一下涉及到的知识点，其实涉及到的知识点也比较简单：

获取页面节点信息
获取页面数据
了解csv文件的格式要求
保存为csv文件并下载

• 获取页面节点信息

首先是获取页面的节点规律，这点很简单，直接找到需要爬取的页面，打开开发者工具，使用element页面查看即可。获取节点规律即简单又重要，只有清晰的了解页面的结构才能更加直接快捷的获取数据。

• 获取页面数据

了解了页面的HTML结构之后我们就可以针对性的书写循环获取页面中的数据了。

• 了解csv文件的格式要求

这里是要保存为csv格式的文件，所以需要先搞清楚csv文件的格式要求，csv文件是使用逗号区分列，使用‘\r\n’区分行。

• 保存为csv文件并下载

了解了csv文件的格式要求之后之后我们就可以直接保存了，这里下载的话可以将数据先拼接成字符串，然后再使用Blob，最后动态生成a标签的方式进行。不了解Blob？猛戳这里。

注意事项：

• 本次实现的都是在很特定的页面爬取数据的方式，需要用在其他不同页面还需要更改扩展代码使其更加通用
• 注意使用双引号将每一个拼接的数据包起来，避免转义

HTML

了解原理之后就直接开始撸，新建downloadToCsv.vue文件

code：

<template>
    <el-button
      class="download"
      @click="downloadTable"
      v-show="toTopShow"
       type="primary"
       plain
       icon="el-icon-download"
       size="mini"
    >
    保存数据为csv文件
    </el-button>
</template>

CSS

code：