安装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}}
效果如下:
如有问题请联系^ ^