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：

<style scoped lang=\"scss\">
.download{
    position: absolute;
    right: 260px;
    top: 25px;
}
</style>

code：

  methods: {
    //   转义br和>
    transferred(data) {
      return data.replace(/<br>/g, \"\\r\\n\").replace(/&gt;/g, \">\");
    },
    downloadTable() {
      let fileName = Date.now() + \".csv\";//使用当前时间戳作为文件名
      var columnDelimiter = \",\"; //列分割符
      var lineDelimiter = \"\\r\\n\"; //行分割符
      var table__header = document.getElementsByClassName(
        \"el-table__header\"
      )[0];//获取表头
      var table__body = document.getElementsByClassName(\"el-table__body\")[0];//获取tbody
      var head = table__header.tHead;
      let result = \"\";// 最终结果的字符串
      var ths = head.getElementsByTagName(\"span\");
      for (let i = 0, l = ths.length; i < l; i++) {
        result +=
          this.transferred(\'\"\' + ths[i].innerHTML + \'\"\') + columnDelimiter;//每一列用逗号分隔
      }
      result += lineDelimiter;// 每一行使用\"\\r\\n\"分隔
      var trs = table__body.getElementsByTagName(\"tr\");
      for (let i = 0, l = trs.length; i < l; i++) {
        let spandata = trs[i].getElementsByTagName(\"span\");
        for (let i = 0, l = spandata.length; i < l; i++) {
          result +=
            this.transferred(\'\"\' + spandata[i].innerHTML + \'\"\') +
            columnDelimiter;
        }
        result += lineDelimiter;
      }
      var blob = new Blob([\"\\uFEFF\" + result], { type: \"text/csv;\" });//记得将编码格式设置一下，避免最终下载的文件出现乱码
      var download  = document.createElement(\"a\");
      if (\"download\" in download ) {
        var url = URL.create URL(blob);
        download .href = url;
        download .download = fileName;
        download .hidden = true;
        document.body.appendChild(download );
        download .click();
        document.body.removeChild(download );
      } else {
        if (navigator.msSaveBlob) {
          //IE10+
          navigator.msSaveBlob(blob, fileName);
        }
      }
    }
  },
  mounted() {}
};
</ >

大功告成！