前端vue导出excel(标题加粗+表头自定义样式+表格边框+单元格自定义样式)

在Vue中导出带有自定义样式的Excel，可以使用xlsx库和file-saver库。以下是一个简单的例子：

1. 安装所需依赖：

npm install xlsx file-saver

2. Vue组件中导出Excel的方法：

<template>
  <button @click="exportExcel">导出Excel</button>
</template>
 
<script>
import XLSX from 'xlsx';
import { saveAs } from 'file-saver';
 
export default {
  methods: {
    exportExcel() {
      // 表格标题
      const ws_name = "SheetJS";
      // 表格头部数据
      const header = ["姓名", "年龄", "职业"];
      // 表格数据
      const data = [
        ["John", 30, "Developer"],
        ["Jane", 25, "Designer"]
      ];
 
      // 将数据写入工作表
      const ws = XLSX.utils.aoa_to_sheet(data);
 
      // 设置标题加粗和自定义样式
      const titleStyle = { font: { bold: true }, fill: { fgColor: { rgb: "FFFFAA00" } } };
      // 设置表头样式
      header.forEach((item, index) => {
        const cellRef = XLSX.utils.encode_cell({ c: index, r: 0 });
        ws[cellRef].s = titleStyle;
      });
 
      // 设置边框
      const border = { top: { style: "thin" }, left: { style: "thin" }, bottom: { style: "thin" }, right: { style: "thin" } };
      const range = { s: { c: 0, r: 0 }, e: { c: header.length - 1, r: data.length - 1 } };
      for (let i = range.s.c; i <= range.e.c; i++) {
        for (let j = range.s.r; j <= range.e.r; j++) {
          const cellRef = XLSX.utils.encode_cell({ c: i, r: j });
          if (!ws[cellRef]) continue;
          ws[cellRef].s = ws[cellRef].s || {};
          ws[cellRef].s.border = border;
        }
      }
 
      // 创建工作簿并添加工作表
      const wb = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(wb, ws, ws_name);
 
      // 生成Excel文件并导出
      const wbout = XLSX.write(wb, { bookType: "xlsx", type: "binary" });
      function 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;
      }
      saveAs(new Blob([s2ab(wbout)], { type: "application/octet-stream" }), "customStyles.xlsx");
    }
  }
};
</script>

这段代码中，我们首先定义了表格的标题、表头和数据。然后，我们使用aoa_to_sheet函数将数据转换为工作表。接着，我们设置了标题的加粗和自定义样式，并对表头的单元格应用了这个样式。之后，我们设置了边框，并对工作表中的每个单元格应用了边框样式。最后，我们创建了工作簿并添加了工作表，然后使用write方法生成了Excel文件，并使用saveAs方法来导出文件。