fastadmin 数据导出,设置excel行高和限制图片大小(修改fasadmin框架默认的导出)

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

THE END