qq_39201064 2023-04-14 18:07 采纳率: 25%
浏览 17
已结题

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)
            },
  • 写回答

1条回答 默认 最新

  • CSDN-Ada助手 CSDN-AI 官方账号 2023-04-16 03:30
    关注
    不知道你这个问题是否已经解决, 如果还没有解决的话:
    • 你可以看下这个问题的回答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

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

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 4月24日
  • 创建了问题 4月14日

悬赏问题

  • ¥15 用hfss做微带贴片阵列天线的时候分析设置有问题
  • ¥50 我撰写的python爬虫爬不了 要爬的网址有反爬机制
  • ¥15 Centos / PETSc / PETGEM
  • ¥15 centos7.9 IPv6端口telnet和端口监控问题
  • ¥120 计算机网络的新校区组网设计
  • ¥20 完全没有学习过GAN，看了CSDN的一篇文章，里面有代码但是完全不知道如何操作
  • ¥15 使用ue5插件narrative时如何切换关卡也保存叙事任务记录
  • ¥20 海浪数据 南海地区海况数据，波浪数据
  • ¥20 软件测试决策法疑问求解答
  • ¥15 win11 23H2删除推荐的项目，支持注册表等