如何在Vue.js中正确使用csv-writer插件创建并导出CSV文件

你的代码有两个核心问题，对应修复方式如下：

• ES模块导入语法错误
  原来的CommonJS语法const createCsvWriter = require('csv-writer').createObjectCsvWriter;对应的ES模块正确写法不是导入整个包的默认导出，需要取包暴露的createObjectCsvWriter方法，正确导入写法：

// 推荐写法：直接命名导入
import { createObjectCsvWriter as createCsvWriter } from 'csv-writer';

• 运行环境不兼容（核心问题）
  你之前在纯.js文件跑通代码是在Node.js服务端环境，csv-writer默认的Node版本依赖Node.js的fs文件系统能力写入本地文件，前端浏览器环境下的Vue没有直接操作用户本地磁盘路径的权限，配置path参数的写法无法在浏览器端生效。

浏览器端Vue适配方案（点击按钮导出下载CSV） #

如果是普通前端Vue项目，引入csv-writer的浏览器端版本，生成CSV字符串后通过浏览器Blob能力触发下载即可，不需要配置path参数，完整可运行代码如下：

<template>
    <div>
      <v-btn text @click.prevent="exportData">
            Export CSV
        </v-btn>
   </div>
</template>

<script>
// 引入浏览器版本的csv-writer
import { createObjectCsvWriter } from 'csv-writer/browser';

export default {
  data() {
    return {
      records: [
        {name: 'Bob',  lang: 'French, English'},
        {name: 'Mary', lang: 'English'}
      ]
    }
  },
  methods: {
    async exportData() {
      // 初始化writer，仅需配置表头，不需要path
      const csvWriter = createObjectCsvWriter({
        header: [
          {id: 'name', title: 'NAME'},
          {id: 'lang', title: 'LANGUAGE'}
        ]
      });
      // 等待CSV字符串生成完成
      const csvString = await csvWriter.writeRecordsToString(this.records);
      // 触发浏览器下载
      const blob = new Blob([csvString], { type: 'text/csv;charset=utf-8;' });
      const tempLink = document.createElement('a');
      const downloadUrl = URL.createObjectURL(blob);
      tempLink.href = downloadUrl;
      tempLink.download = 'file.csv';
      document.body.appendChild(tempLink);
      tempLink.click();
      document.body.removeChild(tempLink);
      URL.revokeObjectURL(downloadUrl);
      console.log('...Done');
    }
  }
}
</script>

注意：不要把csvWriter实例放到data中，data中的响应式序列化会破坏实例的原生方法，在点击事件触发时按需初始化即可。

服务端场景适配说明 #

如果是Nuxt等带服务端能力的Vue框架，需要将CSV写入逻辑放到服务端代码块中执行，不要把Node端生成的csvWriter实例传到前端上下文，导入时使用Node版本的csv-writer，传入path参数即可正常写入服务端本地文件。

内容的提问来源于stack exchange，提问作者Barre Mathis