vue实现导出csv

导出CSV的基本实现方法

在Vue中实现CSV导出功能，可以通过原生JavaScript的Blob对象和URL.createObjectURL方法完成。以下是一个基础实现示例：

export default {
  methods: {
    exportToCSV() {
      const csvContent = "data:text/csv;charset=utf-8,姓名,年龄,城市\n张三,28,北京\n李四,32,上海";
      const encodedUri = encodeURI(csvContent);
      const link = document.createElement("a");
      link.setAttribute("href", encodedUri);
      link.setAttribute("download", "data.csv");
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    }
  }
}

处理复杂数据结构的导出

当需要导出数组或对象数据时，可以先将其转换为CSV格式字符串：

methods: {
  convertToCSV(data) {
    const header = Object.keys(data[0]).join(",");
    const rows = data.map(obj => 
      Object.values(obj).map(value => 
        `"${String(value).replace(/"/g, '""')}"`
      ).join(",")
    );
    return [header, ...rows].join("\n");
  },

  downloadCSV() {
    const sampleData = [
      { name: "张三", age: 28, city: "北京" },
      { name: "李四", age: 32, city: "上海" }
    ];

    const csv = this.convertToCSV(sampleData);
    const blob = new Blob([csv], { type: "text/csv;charset=utf-8;" });
    const url = URL.createObjectURL(blob);

    const link = document.createElement("a");
    link.href = url;
    link.setAttribute("download", "export.csv");
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }
}

使用第三方库简化操作

对于更复杂的需求，可以考虑使用专门的CSV处理库如vue-json-csv或papaparse：

安装papaparse：

npm install papaparse

使用示例：

import Papa from 'papaparse';

methods: {
  exportWithPapa() {
    const data = [
      { id: 1, name: "产品A", price: 99 },
      { id: 2, name: "产品B", price: 149 }
    ];

    const csv = Papa.unparse(data);
    const blob = new Blob([csv], { type: "text/csv" });
    const url = URL.createObjectURL(blob);

    const a = document.createElement("a");
    a.href = url;
    a.download = "products.csv";
    a.click();
    URL.revokeObjectURL(url);
  }
}

处理中文字符编码问题

确保CSV文件在Excel中正确显示中文，需要添加BOM头：

methods: {
  exportWithBOM() {
    const content = "姓名,年龄\n张三,28\n李四,32";
    const BOM = "\uFEFF";
    const blob = new Blob([BOM + content], { type: "text/csv;charset=utf-8;" });
    // 剩余下载逻辑同上
  }
}

封装可复用的CSV导出组件

可以创建一个可复用的导出组件：

// CSVExporter.vue
<template>
  <button @click="exportData">导出CSV</button>
</template>

<script>
export default {
  props: {
    data: Array,
    filename: {
      type: String,
      default: "export.csv"
    }
  },
  methods: {
    exportData() {
      const csv = this.data.map(row => 
        Object.values(row).join(",")
      ).join("\n");

      const blob = new Blob(["\uFEFF" + csv], { type: "text/csv;charset=utf-8;" });
      const url = URL.createObjectURL(blob);

      const link = document.createElement("a");
      link.href = url;
      link.download = this.filename;
      link.click();
      URL.revokeObjectURL(url);
    }
  }
}
</script>

使用组件：

<CSVExporter 
  :data="userList" 
  filename="用户数据.csv"
/>

以上方法覆盖了从基础到进阶的Vue中CSV导出实现，可根据实际需求选择适合的方案。