在 Vue 项目中使用 `xlsx-style` 库导出 Excel 表格时，可以自定义内容、表头、颜色、宽高以及插入图片。

在 Vue 项目中使用 `xlsx-style` 库导出 Excel 表格时，可以自定义内容、表头、颜色、宽高以及插入图片。下面是一个简化的步骤指南，帮助你实现这些功能。

安装依赖

首先，你需要安装 `xlsx` 和 `xlsx-style` 库。如果你还没有安装它们，可以通过以下命令来安装：

bash
npm install xlsx xlsx-style

示例代码

以下是一个示例代码，演示如何使用 `xlsx-style` 库来导出自定义的 Excel 文件，包括自定义内容、表头、颜色、宽高和图片。

import * as XLSX from 'xlsx';
import * as XLSXStyle from 'xlsx-style';

// 自定义内容
const ws_data = [
  ["序号", "姓名", "年龄", "性别"],
  [1, "张三", 28, "男"],
  [2, "李四", 22, "女"]
];

// 创建工作簿
const wb = XLSX.utils.book_new();

// 创建工作表
const ws = XLSX.utils.aoa_to_sheet(ws_data);

// 自定义样式
ws['A1'].s = {
  fill: { fgColor: { rgb: "FFFF00" } }, // 表头背景色
  font: { sz: 14, bold: true, color: { rgb: "FF0000" } }, // 表头字体样式
  alignment: { horizontal: "center" },
};

ws['B1'].s = ws['A1'].s;
ws['C1'].s = ws['A1'].s;
ws['D1'].s = ws['A1'].s;

ws['!cols'] = [
  { wpx: 100 }, // 列宽
  { wpx: 200 },
  { wpx: 80 },
  { wpx: 60 }
];

// 将工作表添加到工作簿
XLSX.utils.book_append_sheet(wb, ws, "Sheet1");

// 写入文件
const wbout = XLSXStyle.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;
}

const filename = 'custom_excel.xlsx';
const blob = new Blob([s2ab(wbout)], { type: 'application/octet-stream' });
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = filename;
link.click();

插入图片

`xlsx-style` 暂时不支持直接插入图片。你可以使用 `xlsx` 的 `xlsx-populate` 或 `exceljs` 等库，它们对图片的支持更好，但需要额外的设置。以下是使用 `exceljs` 插入图片的简单示例：

npm install exceljs

然后在 Vue 组件中：

import ExcelJS from 'exceljs';

async function exportExcelWithImage() {
  const workbook = new ExcelJS.Workbook();
  const worksheet = workbook.addWorksheet('Sheet1');

  // 添加数据
  worksheet.addRow(['序号', '姓名', '年龄', '性别']);
  worksheet.addRow([1, '张三', 28, '男']);
  worksheet.addRow([2, '李四', 22, '女']);

  // 自定义样式
  worksheet.getCell('A1').fill = {
    type: 'pattern',
    pattern:'solid',
    fgColor:{argb:'FFFF00'}
  };
  worksheet.getCell('A1').font = { bold: true, color: { argb: 'FF0000' } };
  worksheet.getCell('A1').alignment = { horizontal: 'center' };

  // 设置列宽
  worksheet.getColumn(1).width = 20;
  worksheet.getColumn(2).width = 30;
  worksheet.getColumn(3).width = 10;
  worksheet.getColumn(4).width = 10;

  // 添加图片
  const imageId = workbook.addImage({
    base64: 'data:image/png;base64,...', // Base64 图片数据
    extension: 'png',
  });

  worksheet.addImage(imageId, 'E5:H20');

  // 导出文件
  const buffer = await workbook.xlsx.writeBuffer();
  const blob = new Blob([buffer], { type: 'application/octet-stream' });
  const link = document.createElement('a');
  link.href = URL.createObjectURL(blob);
  link.download = 'excel_with_image.xlsx';
  link.click();
}

总结

- 使用 `xlsx-style` 可以自定义表格的样式，但插入图片的功能有限。
- 对于需要插入图片的场景，可以使用 `exceljs` 等更强大的库。
- 根据需求选择合适的库和方法来导出自定义的 Excel 文件。