vue 实现导出csv文件到本地功能

最新推荐文章于 2024-05-16 12:02:39 发布

qq_37141058

最新推荐文章于 2024-05-16 12:02:39 发布

阅读量298

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_37141058/article/details/137269935

版权

案例一：

如果导出表头比较简单、推荐使用

安装引入

npm install --save csv-export

import CsvExportor from "csv-exportor";

配置导出表格的Header

let tableData = listData;
let header = ["坐标lng", "坐标lat", "地址

CsvExportor.downloadCsv(tableData, { header }, "test.csv");

//参数1: cvs的内容数据
//参数2: cvs的导出表头
//参数3：导出的文件名字，可以自定义"];

案例2：

function download1 () {

  let tableData = forecasterSpecialList.value;
  let columns = [
    { title: "姓名", key: "name" },
    { title: "首席岗", key: "1246c66dbf6644fc8dc3d8d4add525d3" },
    { title: "预警岗", key: "9945f3679f314010acf537848472054f" },
    { title: "预报岗", key: "80b17a6ccba84d38ba6d95909775a54d" },
    { title: "夜班预报岗", key: "041241e8edc44661a4844837d8229d46" },
    { title: "班量总计", key: "z999" }
  ];
  downloadCsv(columns, tableData, "节假日班量信息.csv");
}

// 导出csv
function downloadCsv (columns, dataList, fileName) {

  let title = columns.map(item => item.title);
  let keyArray = columns.map(item => item.key);
  let str = [];
  str.push(title.join(",") + "\n");
  for (let i = 0; i < dataList.length; i++) {
    const temp = [];
    for (let j = 0; j < keyArray.length; j++) {
      temp.push(dataList[i][keyArray[j]]);
    }
    str.push(temp.join(",") + "\n");
  }
  let uri = "data:text/csv;charset=utf-8,\ufeff" + encodeURIComponent(str.join(""));
  let downloadLink = document.createElement("a");
  downloadLink.href = uri;
  downloadLink.download = fileName;
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
}