前端导出Excel自定义列宽高

import FileSaver from "file-saver";
import * as XLSX from "xlsx/xlsx.mjs";
// import XLSXS from "xlsx-style-medalsoft";
import XLSX2 from "xlsx-style-hzx";
import * as fs from "fs";
XLSX.set_fs(fs);
/**
 * 表格导出为Excel文件
 * @param {String} tableID 表格
 * @param {String} fileName 文件名称
 * @param {String} widthList Excel各列宽度
 * @param {boolean} isAddRangeBorder 是否执行addRangeBorder(简单表格为false)
 */
export const downTable = function (
  tableID,
  fileName,
  widthList,
  isAddRangeBorder = true
) {
  let xlsxParam = { raw: true };
  // tableID为el-table的id名称
  let wb = XLSX.utils.table_to_book(
    document.querySelector("#" + tableID),
    xlsxParam
  );
  console.log(wb);
  // widthList为表格宽度数组，单位wpx，可以不传，数组格式如[{wpx:140},{wpx:150},...]
  let arr = [];
  if (widthList && Array.isArray(widthList)) {
    arr = widthList;
  }
  wb["Sheets"]["Sheet1"]["!cols"] = arr;
  let wbs = wb["Sheets"]["Sheet1"];
  // 每个单元格设置居中
  for (const key in wbs) {
    if (key.indexOf("!") !== 0) {
      wbs[key].s = {
        alignment: {
          horizontal: "center",
          vertical: "center",
          wrapText: true,
        },
        border: {
          top: { style: "thin" },
          bottom: { style: "thin" },
          left: { style: "thin" },
          right: { style: "thin" },
        }, //边框
      };
    }
  }
  if (isAddRangeBorder) {
    addRangeBorder(wb["Sheets"]["Sheet1"]["!merges"], wb["Sheets"]["Sheet1"]);
  }
  let wbout = XLSX2.write(wb, {
    bookType: "xlsx",
    bookSST: false,
    type: "buffer",
    compression: true,
  });
  // 下载
  try {
    FileSaver.saveAs(
      new Blob([wbout], { type: "application/octet-stream" }),
      // 设置导出文件名称
      fileName + ".xlsx"
    );
  } catch (e) {
    if (typeof console !== "undefined") console.log(e.wbout);
  }
  return wbout;
};

function addRangeBorder(range, ws) {
  let cols = [
    "A",
    "B",
    "C",
    "D",
    "E",
    "F",
    "G",
    "H",
    "I",
    "J",
    "K",
    "L",
    "M",
    "N",
    "O",
    "P",
    "Q",
    "R",
    "S",
    "T",
    "U",
    "V",
    "W",
    "X",
    "Y",
    "Z",
    "AA",
    "AB",
    "AC",
    "AD",
    "AE",
    "AF",
    "AG",
    "AH",
  ];
  range.forEach((item) => {
    let style = {
      s: {
        border: {
          top: { style: "thin" },
          left: { style: "thin" },
          bottom: { style: "thin" },
          right: { style: "thin" },
        },
      },
    };
    // 处理合并行
    for (let i = item.s.c; i <= item.e.c; i++) {
      ws[`${cols[i]}${Number(item.e.r) + 1}`] =
        ws[`${cols[i]}${Number(item.e.r) + 1}`] || style;
      // 处理合并列
      for (let k = item.s.r + 2; k <= item.e.r + 1; k++) {
        ws[cols[i] + k] = ws[cols[k] + item.e.r] || style;
      }
    }
  });
  //删除undefined
  for (let key in ws) {
    if (key.indexOf("undefined") != -1) {
      delete ws[key];
    }
  }
  //将表结构数据修改完整
  //取到原名称第二位的y轴坐标数字
  let refLast = ws["!ref"].split(":")[1].replace(/[^\d]/g, "");
  ws["!ref"] = `A1:AH${refLast}`;
  return ws;
}

使用：

设置表格：

    <!-- 导出处理内容 -->
    <div id="collaborativeTaskSubmissions" v-show="false">
      <table
        style="
          text-align: center;
          width: 666px;
          table-layout: fixed;
          margin-bottom: 10px;
        "
        border="1"
        cellspacing="0"
      >
        <tr>
          <td>提交人</td>
          <td>提交时间</td>
          <td>处理内容</td>
        </tr>
        <tr v-for="(item, index) in tableData" :key="index">
          <td>{{ item.createBy }}</td>
          <td>{{ item.createTime }}</td>
          <td>{{ item.taskContent }}</td>
        </tr>
      </table>
    </div>

 //导出
    btn_dc_nr() {
      downTable(
        "collaborativeTaskSubmissions",
        `${this.ruleForm.taskTitle}任务内容附件`,
        [{ wpx: 200 }, { wpx: 200 }, { wpx: 200 }],
        false
      );
    },