BootstrapTable通过TableExport.js 导出成excel,但是表格中有图片,如何导出?

试过table2Excel导出,图片是可以导出,但是只要表格有合并的单元格会导致列错位
以下代码是将图片转为base64,导出的excel文件中的图片也是base64的

            exportExcel:function(options = {}){
                var defaults = {
                    id:"bootstrap-table",
                    type: 'excel',
                    fileName: 'excel数据',
                    mso: {
                        worksheetName: options.fileName || 'excel数据',
                        styles:[
                            'background-color',
                            'font-size',
                            'width',
                            'height',
                            'border',
                            'text-align',
                            'vertical-align',
                            'border-bottom',
                            'border-top',
                            'border-left',
                            'border-right'
                        ]
                    },
                }
                var options = $.extend(defaults, options);
                options.onCellData = function (cell, row, col, data) {
                    // check if the cell contains an image
                    let image = $(cell).find('img');
                    if (image.length > 0) {
                        var img = new Image();
                        img.src = image[0].currentSrc;
                        img.setAttribute("crossOrigin",'Anonymous')
                        // // return the image source as the cell data
                        var canvas = document.createElement('canvas');
                        var ctx = canvas.getContext('2d');
                        ctx.drawImage(img, 0, 0);
                        var dataURL = canvas.toDataURL('image/jpeg', 0.95);
                        return dataURL;
                    } else {
                        // return the default cell data
                        return data;
                    }
                };
                $('#'+options.id).tableExport(options)
            },

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 你可以看下这个问题的回答https://ask.csdn.net/questions/7488723
  • 除此之外, 这篇博客: 前端开发问题集,以及一些踩过的坑,希望对你有帮助中的 基于TableExport.js将Table导出为Excel等文件 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Ignore (rows, cols, cells)</title>
        <link href="./tableexport.min.css" rel="stylesheet">
        <link href="./examples.css" rel="stylesheet">
    </head>
    <body>
    <main>
    
        <table id="ignore-cols-table">
            <thead>
            <tr>
                <th>Name</th>
                <th class="target">Position</th>
                <th>Age</th>
                <th>Salary</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>Thor Walton</td>
                <td class="target">Regional Director</td>
                <td>45</td>
                <td>$98,540</td>
            </tr>
            <tr>
                <td>Travis Clarke</td>
                <td class="target">Software Engineer</td>
                <td>30</td>
                <td>$275,000</td>
            </tr>
            <tr>
                <td>Suki Burks</td>
                <td class="target">Office Manager</td>
                <td>22</td>
                <td>$67,670</td>
            </tr>
            </tbody>
            <tfoot>
            <tr>
                <td class="disabled"></td>
                <td class="target"></td>
                <td class="disabled"></td>
                <th>$441,210</th>
            </tr>
            </tfoot>
        </table>
    </main>
    
    
    <script type="text/javascript" src="./jquery.min.js"></script>
    <script type="text/javascript" src="./xlsx.core.min.js"></script>
    <script type="text/javascript" src="./Blob.min.js"></script>
    <script type="text/javascript" src="./FileSaver.min.js"></script>
    <script type="text/javascript" src="./tableexport.min.js"></script>
    <script>
        var IgnoreCols = document.getElementById('ignore-cols-table');
        new TableExport(IgnoreCols, {
            filename: new Date(),//导出名称
            formats: ["xlsx","xls"], //导出格式
            position: "top",//按钮位置
            ignoreCols: 3, //忽略列序号,不忽略则为null
            ignoreRows: null, //忽略行序号,不忽略则为null
        });
    
    </script>
    </body>
    </html>
    
    

    上述代码中使用到的引用文件可以从链接2、3、4中找到。

    • 参考:
    1. https://tableexport.v3.travismclarke.com/
    2. https://tableexport.v5.travismclarke.com/#tableexport
    3. https://tableexport.v3.travismclarke.com/examples/ignore-row-cols-cells.html
    4. https://tableexport.v5.travismclarke.com/#examples

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^