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日

悬赏问题

  • ¥30 STM32 INMP441无法读取数据
  • ¥100 求汇川机器人IRCB300控制器和示教器同版本升级固件文件升级包
  • ¥15 用visualstudio2022创建vue项目后无法启动
  • ¥15 x趋于0时tanx-sinx极限可以拆开算吗
  • ¥500 把面具戴到人脸上，请大家贡献智慧
  • ¥15 任意一个散点图自己下载其js脚本文件并做成独立的案例页面，不要作在线的，要离线状态。
  • ¥15 各位 帮我看看如何写代码，打出来的图形要和如下图呈现的一样，急
  • ¥30 c#打开word开启修订并实时显示批注
  • ¥15 如何解决ldsc的这条报错/index error
  • ¥15 VS2022+WDK驱动开发环境