vue导出表格

安装插件

npm install json2csv --save

封装方法

import json2csv from "json2csv";

  // 判断是否IE浏览器
  export function MyBrowserIsIE() {
    let isIE = false;
    if (
      navigator.userAgent.indexOf("compatible") > -1 &&
      navigator.userAgent.indexOf("MSIE") > -1
    ) {
      // ie浏览器
      isIE = true;
    }
    if (navigator.userAgent.indexOf("Trident") > -1) {
      // edge 浏览器
      isIE = true;
    }
    return isIE;
  }
  //创建a标签下载
  export function createDownLoadClick(content, fileName){
    const link = document.createElement("a");
    link.href = encodeURI(content);
    link.download = fileName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }

  export function exporeCSV(rows) {
    console.log(rows);
    try {
      const result = json2csv.parse(rows, {
        // fields: fields,
        excelStrings: true
      });
      if (MyBrowserIsIE()) {
        // IE10以及Edge浏览器
        var BOM = "\uFEFF";
        // 文件转Blob格式
        var csvData = new Blob([BOM + result], { type: "text/csv" });
        navigator.msSaveBlob(csvData, `123.csv`);
      } else {
        let csvContent = "data:text/csv;charset=utf-8,\uFEFF" + result;
        // 非ie 浏览器
        createDownLoadClick(csvContent, `123.csv`);
      }
    } catch (err) {
      alert(err);
    }
  }
  

使用
import {exporeCSV} from "../utils/outCsv";
直接调用方法就行了