Exceljs 实现html table转Excel

在 Vue 3 项目中将包含图片的 HTML 表格转换为 Excel 文件，你可以使用 exceljs 库，并结合前端技术来处理图片和表格数据。下面是一个在 Vue 3 项目中实现的示例：

安装依赖

首先，确保你已经安装了 exceljs 库。你可以通过 npm 安装它：

npm install exceljs

示例代码

以下示例展示了如何在 Vue 3 项目中将包含图片的 HTML 表格导出为 Excel 文件：

1. 创建 Vue 组件

   在你的 Vue 3 项目中，创建一个组件（如 ExportExcel.vue），其中包含导出功能：

   <template>
     <div>
       <button @click="exportTableToExcel">导出 Excel</button>
       <table ref="table">
         <thead>
           <tr>
             <th>Header 1</th>
             <th>Header 2</th>
             <th>Header 3</th>
           </tr>
         </thead>
         <tbody>
           <tr>
             <td>Data 1</td>
             <td><img src="data:image/png;base64,...your_base64_image_data..." alt="Image" style="width:50px;height:50px;"></td>
             <td>Data 3</td>
           </tr>
         </tbody>
       </table>
     </div>
   </template>
   
   <script>
   import * as ExcelJS from 'exceljs';
   
   export default {
     methods: {
       async exportTableToExcel() {
         const table = this.$refs.table;
         const workbook = new ExcelJS.Workbook();
         const worksheet = workbook.addWorksheet('Sheet1');
   
         // 从 HTML 表格中提取数据
         const rows = Array.from(table.querySelectorAll('tr'));
         rows.forEach((row, rowIndex) => {
           const cells = Array.from(row.querySelectorAll('td, th'));
           const rowData = cells.map(cell => {
             const img = cell.querySelector('img');
             if (img) {
               const base64 = img.src.split(',')[1];
               const imageId = workbook.addImage({
                 base64,
                 extension: 'png',
               });
               worksheet.addImage(imageId, {
                 tl: { col: cells.indexOf(cell), row: rowIndex },
                 ext: { width: 100, height: 100 }
               });
               return ''; // 返回空字符串，因为我们已经插入了图片
             }
             return cell.textContent.trim();
           });
           worksheet.addRow(rowData);
         });
   
         // 导出到 Excel 文件
         workbook.xlsx.writeBuffer().then(buffer => {
           const blob = new Blob([buffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
           const url = window.URL.createObjectURL(blob);
           const a = document.createElement('a');
           a.href = url;
           a.download = 'table.xlsx';
           document.body.appendChild(a);
           a.click();
           document.body.removeChild(a);
           window.URL.revokeObjectURL(url);
         });
       }
     }
   }
   </script>
   

解释

1. HTML 表格：

   • 使用 ref 获取表格引用，并在 exportTableToExcel 方法中操作。

2. 处理图片：

   • 使用 ExcelJS 将 Base64 编码的图片插入到 Excel 文件中。解析表格中的每个 img 标签，并将其 Base64 数据添加到工作簿中。

3. 导出 Excel 文件：

   • 使用 writeBuffer 方法将工作簿保存为 Blob 对象，并创建一个下载链接供用户下载。

注意事项

• 图片大小：确保根据实际需求调整图片的宽度和高度。
• 性能考虑：处理大量图片时，可能需要优化性能，例如分批加载图片

设置单元格样式

在 exceljs 中，你可以设置单元格的各种样式，包括边框、宽度、高度等。以下是一些示例，展示了如何在 exceljs 中设置单元格的样式。

安装 exceljs

确保你已经安装了 exceljs：

npm install exceljs

示例代码

以下示例展示了如何创建一个工作簿并设置单元格的边框、宽度和高度：

const ExcelJS = require('exceljs');

// 创建一个新的工作簿
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Sheet1');

// 添加数据到工作表
worksheet.addRow(['Header 1', 'Header 2', 'Header 3']);
worksheet.addRow(['Data 1', 'Data 2', 'Data 3']);

// 设置单元格样式
const headerRow = worksheet.getRow(1);
headerRow.height = 30; // 设置行高

headerRow.eachCell((cell, colNumber) => {
    cell.font = { name: 'Arial', size: 12, bold: true }; // 设置字体
    cell.alignment = { vertical: 'middle', horizontal: 'center' }; // 设置对齐方式
    cell.border = { // 设置边框
        top: { style: 'thin' },
        left: { style: 'thin' },
        bottom: { style: 'thin' },
        right: { style: 'thin' }
    };
    cell.fill = { // 设置背景色
        type: 'pattern',
        pattern: 'solid',
        fgColor: { argb: 'FFFF00' }
    };
});

// 设置列宽
worksheet.columns = [
    { width: 20 }, // 第一列宽度
    { width: 30 }, // 第二列宽度
    { width: 40 }  // 第三列宽度
];

// 设置单元格宽度（覆盖列宽）
worksheet.getColumn(2).width = 15;

// 保存工作簿到文件
workbook.xlsx.writeFile('styled_excel.xlsx')
    .then(() => {
        console.log('File saved.');
    })
    .catch((error) => {
        console.error('Error saving file:', error);
    });

解释

1. 创建工作簿和工作表：

   • 创建一个新的工作簿并添加一个工作表。

2. 添加数据：

   • 向工作表添加数据行。

3. 设置单元格样式：

   • 字体：设置字体名称、大小和是否加粗。
   • 对齐方式：设置垂直和水平对齐方式。
   • 边框：设置单元格的上、下、左、右边框样式。
   • 背景色：设置单元格的背景填充颜色。
   • 行高：设置行的高度。
   • 列宽：设置列的宽度，可以为特定列单独设置宽度。

注意事项

• 样式属性：确保样式属性的名称和值正确。
• 单位：行高和列宽没有特定单位，但你可以根据需要调整数值。