前端实现导出excel文件功能

在后台系统开发中，经常会遇到excel文件导出功能的开发，至此总结一下改功能的一些实现方式。

一、后端提供地址访问导出（不推荐）

二、后端通过接口把blob文件流的数据返回给前端

• 通过模拟点击事件下载excel文件

exportFile(params).then(res => {
        // 直接返回来就是blob数据
        if (res) {
          const xlsx = 'application/vnd.ms-excel'
          const blob = new Blob([res], { type: xlsx })
          const a = document.createElement('a') // 转换完成，创建一个a标签用于下载
          a.download = 'fileName.xls'
          a.href = window.URL.createObjectURL(blob)
          a.click()
          a.remove()
        } else {
          this.$message.error('导出失败')
}

三、基于vue-json-excel纯前端导出（不支持修改样式）

• npm i vue-json-excel
• npm官网明确指出
  重要的！ Microsoft Excel 中的额外提示
  此组件中实现的方法使用 HTML 表格来绘制 .xls 文件，Microsoft Excel 不再将 HTML 识别为本机内容，因此在打开文件之前会显示警告消息。 内容将完美呈现，但消息无法避免。
• vue组件代码

<template>
  <div class="elcel">
    <h2>vue-json-excel前端导出excel</h2>
    <download-excel
      class="btn btn-default"
      :data="json_data"
      :fields="json_fields"
      worksheet="sheet"
      name="24352345"
      type="xlsx"
    >
      Download Excel (you can customize this with html code!)
    </download-excel>
  </div>
</template>

<script>
export default {
  data() {
    return {
      json_fields: {
        名字: "name",
        城市: "city",
        电话: "country",
      },
      json_data: [
        {
          name: "诈身份",
          city: "直达佛个地方",
          country: "111.0000",
        },
        {
          name: "Thessaloniki",
          city: "Athens",
          country: "222.2222",
        },
      ],
    };
  },
  methods: {},
};
</script>

四、基于xlsx纯前端导出（支持修改样式）

• npm install --save xlsx(修改样式需要下载npm install --save xlsx-style)
• npm install -S file-saver
• npm install -D script-loader
  如果需求仅仅是导出普通excel，则安装xlsx 即可，仅可以对列宽等进行简单控制。
  如果需要控制excel的样式（颜色、字体、边框、居中等），则还需要安装xlsx-style和file-saver。
  npm install --save xlsx-style有坑：报错Can‘t resolve ‘./cptable‘ in ‘xxx\node_modules_xlsx

// import XLSX from "xlsx";  //用这个导出会报错
const XLSX = require("xlsx");
import XLSXS from "xlsx-style";
import FileSaver from "file-saver";

export function exportExcel() {
  // 需要导出的数据
  let excelData = [
    ["幼儿园课表", null, null, null], // 标题
    ["序号", "课程名称", "教师名称", "上课地点"], // 表头
    ["11.1234", "11,211.1234", "11.1234", "操场"],
    ["11.1234", "11,211.1234", "11.1234", "操场"],
    ["11.1234", "11,211.1234", "11.1234", "操场"],
    ["11.1234", "11,211.1234", "11.1234", "操场"],
    ["11.1234", "11,211.1234", "11.1234", "操场"],
  ];

  // 导出的excel文件名
  const filename = "幼儿园课程表.xlsx";

  // Excel第一个sheet的名称
  const ws_name = "Sheet1";
  const wb = XLSX.utils.book_new();
  const ws = XLSX.utils.aoa_to_sheet(excelData);
  XLSX.utils.book_append_sheet(wb, ws, ws_name); // 将数据添加到工作薄

  // 设置标题行单元格合并
  // s即start, e即end, r即row, c即column
  // 合并从--0行0列开始,到0行3列
  ws["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 3 } }];

  // 设置单元格宽度
  ws["!cols"] = [
    {
      wpx: 40,
    },
    {
      wpx: 100,
    },
    {
      wpx: 100,
    },
    {
      wpx: 100,
    },
  ];

  /*
    设置单元格其他样式
    这里列举一部分,其他样式大同小异,自行网上搜索
   */

  // 可以遍历全部单元格,进行样式设置
  for (let i in ws) {
    if (i === "B1") {
      ws[i].s = {
        // 字体
        font: {
          name: "仿宋",
          sz: 14,
          bold: true,
        },
      };
    } else if (i === "B2") {
      ws[i].s = {
        // 居中
        alignment: {
          horizontal: "center",
          vertical: "center",
          wrapText: true,
        },
      };
    } else if (i === "B3") {
      ws[i].s = {
        // 单元格边框
        border: {
          top: {
            style: "thin",
          },
          bottom: {
            style: "thin",
          },
          left: {
            style: "thin",
          },
          right: {
            style: "thin",
          },
        },
      };
    }
  }

  // 导出Excel, 注意这里用到的是XLSXS对象
  let wbout = XLSXS.write(wb, {
    bookType: "xlsx",
    bookSST: false,
    type: "binary",
  });
  FileSaver.saveAs(
    new Blob([s2ab(wbout)], {
      type: "application/octet-stream",
    }),
    filename
  );
}

/**
 * 工具方法
 */
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;
}