(相关资料图)

自入行以来我就一直疑惑一个问题，导出excel为什么总是搞的很复杂，包括网上的教程，屎里淘金，非常耗费精力。今天刚好业务需要，整理一个简单明了的由vue前端导出的版本出来。

开始：

#1.添加xlsx、xlsx-style、file-saver三个包

npm install xlsx xlsx-style file-saver

如果项目里已经有了这三个包，那就不用再执行了，请自行查看项目的package.json文件

#2.在使用的页面中引入

import XLSX from "xlsx";import XLSX_STYLE from "xlsx-style";import { saveAs } from "file-saver";

#3.添加如下方法

如下，添加如下方法，vue项目方法写在哪里我就不赘述了。showData为Array对象，用map自行组装数据，然后定义表头样式，内容样式，可自行修改，最后一键导出，十分简洁明了，非常省事，需要操心的仅仅是准备数据集

exportExcel() {      const data = this.showData.map(item => {        return {          "类型": item.type,          "订单日期": item.createdTime,          "订单号": item.logistNo,          "备注": item.note,        }      });      // 定义表头样式      const headerStyle = {        fill: {          fgColor: { rgb: "0070C0" },        },        font: {          color: { rgb: "FFFFFF" },          name: "Calibri",          sz: 11,        },        border: {          top: { style: "thin", color: { rgb: "000000" } },          bottom: { style: "thin", color: { rgb: "000000" } },          left: { style: "thin", color: { rgb: "000000" } },          right: { style: "thin", color: { rgb: "000000" } },        },      };      const contentStyle = {        font: {          name: "Calibri",          sz: 11,        },        border: {          top: { style: "thin", color: { rgb: "000000" } },          bottom: { style: "thin", color: { rgb: "000000" } },          left: { style: "thin", color: { rgb: "000000" } },          right: { style: "thin", color: { rgb: "000000" } },        },      };      const worksheet = XLSX.utils.json_to_sheet(data);      // 将表头样式应用到 worksheet 对象中的表头单元格      const headerRange = XLSX.utils.decode_range(worksheet["!ref"]);      for (let col = headerRange.s.c; col <= headerRange.e.c; col++) {        const headerCell = XLSX.utils.encode_cell({ r: headerRange.s.r, c: col });        worksheet[headerCell].s = headerStyle;      }      // 将内容样式应用到 worksheet 对象中的所有单元格      const contentRange = XLSX.utils.decode_range(worksheet["!ref"]);      for (let row = contentRange.s.r + 1; row <= contentRange.e.r; row++) {        for (let col = contentRange.s.c; col <= contentRange.e.c; col++) {          const contentCell = XLSX.utils.encode_cell({ r: row, c: col });          worksheet[contentCell].s = contentStyle;        }      }      const workbook = XLSX.utils.book_new();      XLSX.utils.book_append_sheet(workbook, worksheet, "Sheet1");      // 将 workbook 对象转换为二进制数据流并下载      const wbout = XLSX_STYLE.write(workbook, { bookType: "xlsx", type: "binary" });      const blob = new Blob([this.s2ab(wbout)], { type: "application/octet-stream" });      saveAs(blob, "table.xlsx");    },    s2ab(s) {      const buf = new ArrayBuffer(s.length);      const view = new Uint8Array(buf);      for (let i = 0; i < s.length; i++) {        view[i] = s.charCodeAt(i) & 0xFF;      }      return buf;    }

#4.Excel样式展示

结束

标签：