vue前端导出Excel 并设置标题栏样式与导出样式

在Vue项目中，可以使用第三方库xlsx来处理Excel的导入导出，以及file-saver来处理文件的保存。以下是一个简单的例子，展示如何在Vue中导出一个带有样式的Excel文件。

首先，安装所需依赖：

npm install xlsx file-saver

然后，在Vue组件中使用这些库来导出Excel：

<template>
  <button @click="exportExcel">导出Excel</button>
</template>
 
<script>
import * as XLSX from 'xlsx';
import { saveAs } from 'file-saver';
 
export default {
  methods: {
    exportExcel() {
      // 创建工作簿
      const wb = XLSX.utils.book_new();
 
      // 创建工作表数据
      const ws_data = [
        ['标题1', '标题2', '标题3'],
        ['数据1', '数据2', '数据3'],
        // ...更多数据
      ];
 
      // 用工作表数据创建工作表
      const ws = XLSX.utils.aoa_to_sheet(ws_data);
 
      // 设置标题栏样式
      const titleRow = ws['A1'];
      titleRow.s = {
        fill: {
          fgColor: { rgb: "FFFFAA00" }
        },
        font: {
          bold: true
        }
      };
 
      // 设置导出样式
      const cellRef = XLSX.utils.encode_cell({c: 0, r: 0});
      ws[cellRef].v = "新标题";
 
      // 将工作表添加到工作簿
      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
 
      // 生成Excel的配置项
      const wbout = XLSX.write(wb, { bookType: 'xlsx', type: 'binary' });
 
      // 创建二进制对象并创建url
      const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
      const url = URL.createObjectURL(blob);
 
      // 使用a标签下载文件
      const a = document.createElement('a');
      a.href = url;
      a.download = 'export.xlsx';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
 
      // 清除对象URL
      setTimeout(() => URL.revokeObjectURL(url), 0);
    }
  }
};
 
// 将字符串转换为ArrayBuffer
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;
}
</script>

在这个例子中，我们创建了一个工作簿，并添加了一个工作表。然后，我们设置了第一行（标题栏）的样式，并修改了第一个单元格的值。最后，我们通过创建一个Blob对象和Object URL来下载这个Excel文件。这个过程模拟了实际的需求，即导出带有特定样式的Excel文件。