
起因是一个项目的图片导出到excel之后太大了,需要调整一下大小,这个fastadmin自带的前端导出就可以实现,但是也是比较复杂的,需要搞清楚图片的代码
在require-table.js这个文件里面找到exportOptions,在exportOptions配置里面添加一下代码
示例如下
exportOptions: {
fileName: 'export_' + Moment().format("YYYY-MM-DD"),
preventInjection: false,
mso: {
onMsoNumberFormat: function (cell, row, col) {
return !isNaN($(cell).text()) ? '\\@' : '';
},
},
ignoreColumn: [0, 'operate'], //默认不导出第一列(checkbox)与操作(operate)列
//xm新增导出图片相关---这部分就是新增加的代码
htmlContent: true,
// 处理导出图片
onCellHtmlData: function ($cell, row, col, htmlData) {
var html = $.parseHTML(htmlData);
var inputidx = 0;
var selectidx = 0;
var result = '';
$.each(html, function () {
if ($(this).is("input")) {
result += $cell.find('input').eq(inputidx++).val();
}else if ($(this).is("select")) {
result += $cell.find('select option:selected').eq(selectidx++).text();
}else if ($(this).is("a")) {
// 这里就是设置图片大小的代码
if($(this).context.childNodes[0].tagName=='IMG'){
let str = $(this).context.childNodes[0]
str.width = "60";
str.height = "60";
}
result += $(this).html();
} else {
if (typeof $(this).html() === 'undefined') {
result += $(this).text();
}else if (jQuery().bootstrapTable === undefined || ($(this).hasClass('filterControl') !== true && $cell.parents('.detail-view').length === 0)) {
result += $(this).html();
}
}
});
return result;
}
//xm新增导出图片相关--end
},
小技巧,此时虽然可以正常导出图片,但是excel默认的行高比较低,图片观看效果不好,此时只需要手动修改下excel的行高既可正常显示了。完美!