vue导出xlsx表格功能

1、下载依赖包 

npm i --save file-saver@2.0.5  xlsx@0.16.9  script-loader@0.7.2

2、封装在mixin

src/mixins/Export2Excel.js

await import("script-loader");
await import("file-saver");
import XLSX from "xlsx";

function datenum(v, date1904) {
  if (date1904) v += 1462;
  var epoch = Date.parse(v);
  return (epoch - new Date(Date.UTC(1899, 11, 30))) / (24 * 60 * 60 * 1000);
}

function sheet_from_array_of_arrays(data, opts) {
  var ws = {};
  var range = {
    s: {
      c: 10000000,
      r: 10000000,
    },
    e: {
      c: 0,
      r: 0,
    },
  };
  for (var R = 0; R != data.length; ++R) {
    for (var C = 0; C != data[R].length; ++C) {
      if (range.s.r > R) range.s.r = R;
      if (range.s.c > C) range.s.c = C;
      if (range.e.r < R) range.e.r = R;
      if (range.e.c < C) range.e.c = C;
      var cell = {
        v: data[R][C],
      };
      if (cell.v == null) continue;
      var cell_ref = XLSX.utils.encode_cell({
        c: C,
        r: R,
      });

      if (typeof cell.v === "number") cell.t = "n";
      else if (typeof cell.v === "boolean") cell.t = "b";
      else if (cell.v instanceof Date) {
        cell.t = "n";
        cell.z = XLSX.SSF._table[14];
        cell.v = datenum(cell.v);
      } else cell.t = "s";

      ws[cell_ref] = cell;
    }
  }
  if (range.s.c < 10000000) ws["!ref"] = XLSX.utils.encode_range(range);
  return ws;
}

function Workbook() {
  if (!(this instanceof Workbook)) return new Workbook();
  this.SheetNames = [];
  this.Sheets = {};
}

function s2ab(s) {
  var buf = new ArrayBuffer(s.length);
  var view = new Uint8Array(buf);
  for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff;
  return buf;
}

export function export_json_to_excel({
  multiHeader = [],
  header,
  data,
  filename,
  merges = [],
  autoWidth = true,
  bookType = "xlsx",
} = {}) {
  /* original data */
  filename = filename || "excel-list";
  data = [...data];
  data.unshift(header);

  for (let i = multiHeader.length - 1; i > -1; i--) {
    data.unshift(multiHeader[i]);
  }

  var ws_name = "SheetJS";
  var wb = new Workbook(),
    ws = sheet_from_array_of_arrays(data);

  if (merges.length > 0) {
    if (!ws["!merges"]) ws["!merges"] = [];
    merges.forEach((item) => {
      ws["!merges"].push(XLSX.utils.decode_range(item));
    });
  }

  if (autoWidth) {
    /*设置worksheet每列的最大宽度*/
    const colWidth = data.map((row) =>
      row.map((val) => {
        /*先判断是否为null/undefined*/
        if (val == null) {
          return {
            wch: 10,
          };
        } else if (val.toString().charCodeAt(0) > 255) {
          /*再判断是否为中文*/
          return {
            wch: val.toString().length * 2,
          };
        } else {
          return {
            wch: val.toString().length,
          };
        }
      })
    );
    /*以第一行为初始值*/
    let result = colWidth[0];
    for (let i = 1; i < colWidth.length; i++) {
      for (let j = 0; j < colWidth[i].length; j++) {
        if (result[j]["wch"] < colWidth[i][j]["wch"]) {
          result[j]["wch"] = colWidth[i][j]["wch"];
        }
      }
    }
    ws["!cols"] = result;
  }

  /* add worksheet to workbook */
  wb.SheetNames.push(ws_name);
  wb.Sheets[ws_name] = ws;

  var wbout = XLSX.write(wb, {
    bookType: bookType,
    bookSST: false,
    type: "binary",
  });
  saveAs(
    new Blob([s2ab(wbout)], {
      type: "application/octet-stream",
    }),
    `${filename}.${bookType}`
  );
}

src/mixins/utils.js

const baseMixin = {
  methods: {
    /*
     * 导出Excel功能
     * 直接调用方法this.handleDownload();标签的label用‘导出Excel’才有loading的样式
     * 需要先安装npm i --save file-saver xlsx ;  npm i --save-dev script-loader
     * 同级文件里的Export2Excel.js;引用于花裤衩的ue-element-admin
     * 使用的时候需要在页面注入formatJson方法,下面有一个模板
     * formatterExcel方法也可以根据需求做稍微调整
     *
     */
    handleDownload() {
      if (this.exportData == undefined || this.exportData.length == 0) {
        return this.$message.error("请先生成数据再导出Excel");
      }
      import("/@/mixins/Export2Excel").then((excel) => {
        const tHeader = this.formatterExcel(
          { tHeader: this.exportTable },
          "label"
        );
        const filterVal = this.formatterExcel(
          { filterVal: this.exportTable },
          "prop"
        );
        const list = this.exportData;
        const data = this.formatJson(filterVal, list);
        excel.export_json_to_excel({
          header: tHeader, // 表格头
          data: data, //表格内容
          filename: this.$route.meta.title, // 文件名
          autoWidth: true,
          bookType: "xlsx",
        });
      });
    },
    formatterExcel({ tHeader = "", filterVal = "" } = {}, type) {
      if (type == "prop") {
        let arr = [];
        for (var i = 0; i < filterVal.length; i++) {
          if (!filterVal[i].prop || filterVal[i].prop === "qrcode") {
            continue;
          }
          arr.push(filterVal[i].prop);
        }
        return arr;
      } else if (type == "label") {
        let arr = [];
        for (var i = 0; i < tHeader.length; i++) {
          if (
            tHeader[i].label === "操作" ||
            tHeader[i].label === "设备二维码"
          ) {
            continue;
          }
          arr.push(tHeader[i].label);
        }
        return arr;
      }
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          return v[j];
        })
      );
    },
  },
};

export default baseMixin;

3、在msin.ts引入

import mixins from "/@/mixins/utils.js";
app.mixin(mixins);

4、在页面引用

exportData：存放你api接口的数据

exportTable：label是表格头，prop是表格内容，prop要和exportData数据的字段相对应，则拿到对应字段的值

import { getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance() as any;

const data = reactive({
	// 导出表格数据
	exportData: [
		{
			aa:"内容1",
			bb:"内容2",
			cc:"内容3",
		},
		{
			aa:"内容1",
			bb:"内容2",
			cc:"内容3",
		},
	], 
	exportTable: [
		{
			label: "标题1",
			prop: 'aa',
		},
		{
			label: "标题2",
			prop: 'bb',
		},
		{
			label: "标题3",
			prop: 'cc',
		}
	],
});


const handleExportTable = async () => {
	proxy.handleDownload();
}

5、调试

效果图