安装js-table2excel插件：
npm install js-table2excel改写js-table2excel插件代码片段：
找到node_models下的js-table2excel文件夹下的index.js替换以下函数
// function getTextHtml(val) {// return `<td style="text-align: center;vnd.ms-excel.numberformat:@;">${val}</td>`// }// 处理返回值为null，显示为空function getTextHtml(val) {return `<td style="text-align: center;vnd.ms-excel.numberformat:@;">${val ? val : ''}</td>`}// function getImageHtml(val, options) {// options = Object.assign({width: 40, height: 60}, options)// return `<td style="width: ${options.width}px; height: ${options.height}px; text-align: center; vertical-align: middle"><img src="${val}" width=${options.width} height=${options.height}></td>`// }function getImageHtml(val, options) {options = Object.assign({width: 60, height: 60}, options)const valList = val ? JSON.parse(val) : []let tdStr = ''for (let i = 0; i < valList.length; i++) {tdStr += `<td style="width: ${options.width}px; height: ${options.height}px; text-align: center; vertical-align: middle"><img src="${valList[i].url}" width=${options.width} height=${options.height}></td>`}return tdStr}
使用：
import table2excel from 'js-table2excel'、、、// 数据结构参考：/hxj9102/table2exceltable2excel(column, data, excelName)
3.实现效果：
有参考博客地址（感谢）：/qq_36958916/article/details/126508093#comments_25471159
后续优化思路：
图片这栏表头合并，图片最大张数（比如5张）等于合并单元格数，内容中的图片如果不满5张，遍历时合并图片列的空白列，如果后面有其他列，也不会对其他列有影响，看起来更舒服。
有参考思路合并标题博客地址（感谢）：/weixin_43144209/article/details/120986689
升级版
加了一个maxCount 参数，图片最大张数，代码如下：
// 导出函数const table2excel = (column, data, excelName, maxCount = 5) => {const typeMap = {image: getImageHtml,text: getTextHtml}let thead = column.reduce((result, item) => {if (item.key=== 'image') {result += `<th colspan="${maxCount}">${item.title}</th>`return result} else {result += `<th>${item.title}</th>`return result}}, '')/* ----- 省略中间部分 ----- */// 导出表格exportToExcel(table, excelName)function getTextHtml(val) {return `<td style="text-align: center;vnd.ms-excel.numberformat:@;">${val ? val : ''}</td>`}// function getImageHtml(val, options) {// options = Object.assign({width: 40, height: 60}, options)// return `<td style="width: ${options.width}px; height: ${options.height}px; text-align: center; vertical-align: middle"><img src="${val}" width=${options.width} height=${options.height}></td>`// }function getImageHtml(val, options) {options = Object.assign({width: 60, height: 60}, options)const valList = val ? JSON.parse(val) : []let tdStr = ''for (let i = 0; i < maxCount; i++) {if (i < valList.length) {tdStr += `<td style="width: ${options.width}px; height: ${options.height}px; text-align: center; vertical-align: middle"><img src="${valList[i].url}" width=${options.width} height=${options.height}></td>`} else {tdStr += `<td colspan="${maxCount - valList.length}" style="width: ${options.width}px; height: ${options.height}px; text-align: center; vertical-align: middle"></td>`break}}return tdStr}}
效果如下：
如有问题请联系^ ^
