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 对象，并创建一个下载链接供用户下载。

注意事项

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

如果你有其他问题或需要进一步的帮助，请告诉我！