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
    }
}

效果如下:
在这里插入图片描述

如有问题请联系^ ^

Logo

前往低代码交流专区

更多推荐