美文网首页
Vue项目导入导出csv文件

Vue项目导入导出csv文件

作者: Mracale | 来源:发表于2021-05-19 14:56 被阅读0次

Vue项目导入导出csv文件

什么是csv文件

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

image

导出

安装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 方法的实现:

      /**
        * 导出指令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 = "文件导出.csv";
        //必须点击否则不会下载
        el.click();
        //移除链接释放资源
        urlObject.revokeObjectURL(url);
      },

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

导入

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

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

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

      /**
        * 导入csv文件
        */
     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就是文件里面的数据
            }
          });
        };
      }

相关文章

  • Vue项目导入导出csv文件

    Vue项目导入导出csv文件 什么是csv文件 逗号分隔值(Comma-Separated Values,CSV,...

  • 数据导入、导出

    导入csv文件 导入文本文件 导入Excel文件(xls,xlsx) 中文路径问题 数据导出

  • DataGrip 导入 Excel 数据

    目前DataGrip不支持导入Excel,可以将Excel导出为csv文件进行导入:文件=>导出=》更改文件类型=...

  • vue 导出csv文件

    安装依赖 npm install json2csv -S vue文件示例代码 搬运于 vue 导出csv文件[ht...

  • 使用SAP Analytics Cloud统计SAP C4C系统

    从SAP Cloud for Customer系统导出的csv文件: 将该csv文件导入到SAP Analytic...

  • Hive导数

    hive导数有多种方式 hdfs 导入 本地导入这里主要讲本地导入 1.导出表 导出到csv 文件中再传输文件到指...

  • csv文件的生成

    列表导出为csv文件 字典导出为csv文件 json导出为csv文件

  • hive服务器传输文件步骤

    1.先利用mysql导入给定的.csv文件生成对应表 2.再从mysql中导出生成的新表,导出为.csv文件(注意...

  • Cassandra导出导入CSV

    进入cqlsh命令行模式,可导出、导入数据表。 导出 可以指定导出某几列: 导入 如果csv文件的表头与table...

  • mongoldb数据导入导出

    mongoldb数据导入 导入json格式: 导入csv格式: mongoldb数据导出 导出json格式: 导出...

网友评论

      本文标题:Vue项目导入导出csv文件

      本文链接:https://www.haomeiwen.com/subject/qmypjltx.html