需要的引入的 SDN 资源

<script src="https://cdn.jsdelivr.net/npm/xlsx-style@0.8.13/dist/jszip.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx-style@0.8.13/dist/cpexcel.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx-style@0.8.13/dist/ods.js"></script>
<script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.js"></script>
<script src="https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.js"></script>
<!--引入的本地资源-->
<script src="./xlsx.js"></script>

xlsx.js 代码 [ 将下载的 txt 改成 js 扩展名 ]

vue中使用

<template>
  <div class="home">
    <button @click="exportExcel">导出execl</button>
    <div class="tableContainer">
      <table id="tableContainer">
          ... 表格的内容
      </table>
    </div>
  </div>
</template>
<script>
const XLSX = window.XLSX;
const XLSXX = window.XLSXX;
export default {
  name: "HomeView",
  data() {
    return {};
  },
  components: {},
  methods: {
    exportExcel() {
      this.sheetJSExportTable(document.getElementById("tableContainer"));
    },
​
    sheetJSExportTable(table) {
      var elt = table;
      var wb = XLSX.utils.table_to_book(elt, { sheet: "Sheet JS", raw: true });
      let range = XLSX.utils.decode_range(wb.Sheets["Sheet JS"]["!ref"]);
      console.log(wb);
      console.log(range);
      let borderStyle = {
        top: {
          style: "thin",
          color: { rgb: "000000" },
        },
        bottom: {
          style: "thin",
          color: { rgb: "000000" },
        },
        left: {
          style: "thin",
          color: { rgb: "000000" },
        },
        right: {
          style: "thin",
          color: { rgb: "000000" },
        },
      };
      wb.Sheets["Sheet JS"]["!merges"].forEach((item) => {
        if (item.e.r == item.s.r && item.e.c != item.s.c) {
          // 列合并
          let R = item.s.r;
          // let countLength = item.e.c - item.s.c;
          for (let i = item.s.c; i <= item.e.c; i++) {
            let cell = { c: i, r: R };
            let cell_ref = XLSX.utils.encode_cell(cell);
            if (!wb.Sheets["Sheet JS"][cell_ref]) {
              wb.Sheets["Sheet JS"][cell_ref] = { t: "s", v: "" };
            }
          }
        } else if (item.e.c == item.s.c && item.e.r != item.s.r) {
          // 行合并
          let C = item.s.c;
          // let countLength = item.e.r - item.s.r;
          for (let i = item.s.r; i <= item.e.r; i++) {
            let cell = { c: C, r: i };
            let cell_ref = XLSX.utils.encode_cell(cell);
            if (!wb.Sheets["Sheet JS"][cell_ref]) {
              wb.Sheets["Sheet JS"][cell_ref] = { t: "s", v: "" };
            }
          }
        }
      });
      console.log(wb);
      console.log(range);
      for (let C = range.s.c; C <= range.e.c; ++C) {
        for (let R = range.s.r; R <= range.e.r; ++R) {
          let cell = { c: C, r: R };
          let cell_ref = XLSX.utils.encode_cell(cell);
          if (R == 1) {
            wb.Sheets["Sheet JS"][cell_ref].s = {
              alignment: {
                horizontal: "center",
                vertical: "center",
              },
              font: {
                name: "黑体",
                // sz: "15",
                bold: true,
              },
              border: borderStyle,
            };
          } else {
            if (wb.Sheets["Sheet JS"][cell_ref]) {
              wb.Sheets["Sheet JS"][cell_ref].s = {
                font: {
                  name: "黑体",
                  // sz: "12",
                },
                border: borderStyle,
              };
            }
          }
        }
      }
      var wopts = { bookType: "xlsx", bookSST: false, type: "binary" };
      var wbout = XLSXX.write(wb, wopts); // 使用xlsx-style 写入
      // eslint-disable-next-line
      saveAs(new Blob([this.s2ab(wbout)], { type: "" }), "aa.xlsx");
    },
​
    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;
    },
  },
};
</script>