vue导出数据为Excel文件

vue导出数据为Excel文件

首先下载依赖

npm install xlsx file-saver --save

然后在src文件夹里面创建一个utils文件夹

在utils文件夹内创建Excel.js文件

把以下代码直接帖进去

import FileSaver from "file-saver";
import * as XLSX from "xlsx/xlsx.mjs";
export default {
  // 导出Excel表格
  exportExcel(name, tableName) {
    //name表示生成excel的文件名     tableName表示表格的id
    var sel = XLSX.utils.table_to_book(document.querySelector(tableName));
    var selIn = XLSX.write(sel, {
      bookType: "xlsx",
      bookSST: true,
      type: "array",
    });
    try {
      FileSaver.saveAs(
        new Blob([selIn], { type: "application/octet-stream" }),
        name
      );
    } catch (e) {
      if (typeof console !== "undefined") console.log(e, selIn);
    }
    return selIn;
  },
};

在main.js中进行全局引入

//全局导出excel
import htmlToExcel from “./utils/Excel”; //刚刚写好的那个js文件的路径
Vue.prototype.Excels = htmlToExcel;

最后就是运用到页面中

 methods: {
    exportExcel() {
    
      this.Excels.exportExcel("本月数据报表.xlsx", "#excel");  //此括号里面（第一个是导出文件的名称，第二个是需要导出的标签的id）
    },
  },

以下为例