背景
实际开发过程中需要将前端以表格形式展示的数据保存为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: