Vue项目导入导出csv文件

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:encoding,
            complete: res => {
              // UTF8 \r\n与\n混用时有可能会出问题
              let data = res.data;
              if (data[data.length - 1] == "") {
                //去除最后的空行
                data.pop();
              }
              console.log(data);  // data就是文件里面的数据
            }
          });
        };
      }

格式校验,需要安装个插件

npm install --save jschardet

下面是方法

    checkEncoding(base64Str) {
        // 这种方式得到的是一种二进制串
        var str = atob(base64Str.split(';base64,')[1])
        // console.log(str);
        // 要用二进制格式
        const jschardet = require("jschardet");
        var encoding = jschardet.detect(str)
        encoding = encoding.encoding
        // console.log( encoding );
        if (encoding === 'windows-1252') {	// 有时会识别错误(如UTF8的中文二字)
          encoding = 'ANSI'
        }
        return encoding
      },

具体可参考:https://www.jianshu.com/p/a4cc716e246d

posted @ 2020-06-17 08:46  我是ed  阅读(6550)  评论(0编辑  收藏  举报