起因是一个项目的图片导出到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的行高既可正常显示了。完美!