vue js-table2excel 导出excel 带多张图片，js-table2excel插件改写

1. 安装js-table2excel插件：
   npm install js-table2excel
2. 改写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'
、、、
// 数据结构参考：https://github.com/hxj9102/table2excel
table2excel(column, data, excelName)

3.实现效果：

有参考博客地址（感谢）：https://blog.csdn.net/qq_36958916/article/details/126508093#comments_25471159
后续优化思路：
       图片这栏表头合并，图片最大张数（比如5张）等于合并单元格数，内容中的图片如果不满5张，遍历时合并图片列的空白列，如果后面有其他列，也不会对其他列有影响，看起来更舒服。
有参考思路合并标题博客地址（感谢）：https://blog.csdn.net/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
    }
}

效果如下：

如有问题请联系^ ^