vue下载csv格式的文件

最新推荐文章于 2024-06-28 17:54:24 发布

原创最新推荐文章于 2024-06-28 17:54:24 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

这篇博客介绍了如何利用json2csv库在JavaScript中将JSON数据转换为CSV格式并进行下载。首先，导入json2csv库并创建一个解析器，然后定义字段，最后通过创建一个链接元素触发CSV文件的下载。在实际应用中，可以传入数据数组、字段配置和自定义文件名来调用这个方法。

1:下载json2csv插件
2:写一个方法默认导出

import { Parser } from 'json2csv'
export const exportCSV = async (data = {}, fields = [], fileName) => {
  try {
    const parser = new Parser({ fields })
    const result = parser.parse(data)
    let uri = 'data:text/csv;charset=utf-8,\ufeff' + result

    let link = document.createElement('a')
    link.href = encodeURI(uri)

    link.download = `${fileName}.csv`
    document.body.appendChild(link)
    link.click()
    document.body.removeChild(link)
  } catch (err) {
    alert(err)
  }
}

2:在组件中使用

import { exportCSV } from '@/文件地址'
 let fields = [
      {
        label: title1,
        value: key名1
      },
      {
        label:title2,
        value: key名2
      }
    ]
    let fileName = 'list_' + Date.now()
    exportCSV(数据的数组, fields, fileName)