Vue项目导入导出csv文件

Z时代
2024-01-10
分类：综合

vue

Vue项目导入导出csv文件

什么是csv文件

逗号分隔值（Comma-Separated Values，CSV，有时也称为字符分隔值，因为分隔字符也可以不是逗号），其文件以纯文本形式存储表格数据（数字和文本）。纯文本意味着该文件是一个字符序列，不含必须像二进制数字那样被解读的数据。CSV文件由任意数目的记录组成，记录间以某种换行符分隔；每条记录由字段组成，字段间的分隔符是其它字符或字符串，最常见的是逗号或制表符。通常，所有记录都有完全相同的字段序列。通常都是纯文本文件。

导出

安装vue插件papaparse

npm install papaparse

如果安装慢的话，可以使用淘宝镜像试一下。如果安装时出问题导致整个项目都崩盘直接跑不起来的话也没关系，删掉所有依赖重新装一遍就行了！ “npm install”

插件使用

首先，导出的数据一定得是一个列表，一个对象列表，例如：

itemList: [
        {
          name: "红木",
          type: "P000001",
          price: "￥88888"
        },
        {
          name: "水杉",
          type: "P000002",
          price: "￥2000"
        }
      ]

写一个按钮，点击按钮的时候把数据导出csv文件：

<a-button type="primary"   @click="exportCsv()">导出指令</a-button>

点击按钮调用 exportCsv 方法，首先在script里面引用一下库

  import Papa from \'papaparse\'

接下来是 exportCsv 方法的实现：

	  /**
        * by wjw
        * 导出指令csv文件
        */
      exportCsv(){
        var csv = Papa.unparse(this.itemList); 
        //定义文件内容，类型必须为Blob 否则createObjectURL会报错
        let content = new Blob([csv]);
        //生成url对象
        let urlObject = window.URL || window.webkitURL || window;
        let url = urlObject.createObjectURL(content);
        //生成<a></a>DOM元素
        let el = document.createElement("a");
        //链接赋值
        el.href = url;
        el.download = "文件导出.cvs";
        //必须点击否则不会下载
        el.click();
        //移除链接释放资源
        urlObject.revokeObjectURL(url);
      },

可以了。这样的话点击按钮之后就可以将数据转成csv文件导出到本地。但是记住哈，数据一定要符合格式，每条数据都是一样的。

可以参考一下这篇博客：https://blog.csdn.net/mmorss/article/details/82586743

导入

首先一样，写一个上传文件的按钮，点击打开文件上传对话框，选择csv文件那种。

<input  type="file" id="files" ref="refFile" v-on:change="importCsv">

当上传了文件调用 importCsv 方法，这个方法是上传csv文件之后的处理方法，逻辑根据需要自己写。

	/**
	  * by 王佳伟
	  * 2020年6月17日08:42:11
	  */
	 importCsv(){
        let selectedFile = null
        selectedFile = this.$refs.refFile.files[0];
        if (selectedFile === undefined){
          return
        }
        var reader = new FileReader();
        reader.readAsDataURL(selectedFile);
        reader.onload = evt => {
          // 检查编码
          // let encoding = this.checkEncoding(evt.target.result);
          // 将csv转换成二维数组
          Papa.parse(selectedFile, {
            encoding:"ANSI",
            complete: res => {
              // UTF8 \r\n与\n混用时有可能会出问题
              let data = res.data;
              if (data[data.length - 1] == "") {
                //去除最后的空行
                data.pop();
              }
              console.log(data);  // data就是文件里面的数据
            }
          });
        };
      }