vue js-table2excel 导出excel 带多张图片,js-table2excel插件改写
vue导出excel 多张图片
·
- 安装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'
、、、
// 数据结构参考: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
}
}
效果如下:
如有问题请联系^ ^
更多推荐
已为社区贡献3条内容
所有评论(0)