vue 导出csv文件

npm install papaparse

 data: function() {
    return {
      isShowLast: false,
      tableData: [],
      itemList: [
        {
          name: "红木",
          type: "P000001",
          price: "¥88888"
        },
        {
          name: "水杉",
          type: "P000002",
          price: "¥2000"
        }
      ]
    };
  },
  methods: {
    download() {
      console.log("downLoad");
      var csv = Papa.unparse(this.itemList);
      console.log("downLoad", csv);
      //定义文件内容,类型必须为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 = "todo文件导出.cvs";
      //必须点击否则不会下载
      el.click();
      //移除链接释放资源
      urlObject.revokeObjectURL(url);
    }
}

 

  • 2
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
Vue是目前一种流行且广泛应用于前端开发的JavaScript框架。在Vue中,常常需要实现下载并导出CSV格式的文件并自定义表头的功能。该过程一般涉及到一些列的技术与操作,下面我们来一一探讨。 1. 安装“papaparse”模块 “papaparse”是一种用于解析csv的JavaScript模块,可以很方便的安装和使用。使用npm安装即可: ```bash npm install papaparse --save ``` 2. 编写自定义表头 在使用“papaparse”模块进行CSV文件处理前,需要先定义表头。下面是一个简单的例子: ```javascript const headers = [ {label: '列名1', key: 'columnName1'}, {label: '列名2', key: 'columnName2'}, {label: '列名3', key: 'columnName3'}, ]; ``` 其中,label属性表示表头中展示的文本内容,key属性唯一标识了该列在数据中的字段名称。 3. 编写CSV文件并下载 当自定义表头准备好后,可以开始编写CSV文件。在Vue中,我们可以通过使用template标签来隐藏该部分内容: ```html <template id="csv-template"> 字段1,字段2,字段3\n 数据1,数据2,数据3\n </template> ``` 然后,可以编写一个方法来代表点击按钮后下载该文件。在该方法中,我们使用“papaparse”模块内置的“unparse”方法将数据转换为CSV格式: ```javascript import Papa from 'papaparse'; downloadCSV() { const csv = Papa.unparse({ data: '数据1,数据2,数据3\n', header: true, }); const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' }); const url = URL.createObjectURL(blob); const link = document.createElement('a'); link.setAttribute('href', url); link.setAttribute('download', 'filename.csv'); link.style.visibility = 'hidden'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } ``` 其中,data属性表示CSV文件的数据内容,设置header属性为true,可以省略了编写表头的步骤。另外,我们还需要将blob对象转化为URL并添加至一个隐藏的链接中完成下载动作。 以上即是导出CSV并自定义表头的方法,可以根据实际开发需求进行更进一步的定制。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值