码迷,mamicode.com
首页 > 其他好文 > 详细

前端 导出为Excel 数据源为table表格 并且table中含有图片

时间:2020-03-24 10:31:01      阅读:106      评论:0      收藏:0      [点我收藏+]

标签:nes   new   方案   base64   支持   应该   last   odata   ons   

图片导出到Excel,图片的路径得调整一下,

<img src="1.jpg" id="img1" />

改为:

<img src="http://localhost:2079/%E6%B5%8B%E8%AF%951/1.jpg" />

这样Excel导出的时候就能包含图片了,但不是完美的解决方案。

导出注意事项:

  • 图片并不是实实在在存入Excel中的,应该仅仅只是存的图片路径
  • 图片的src地址必须是完整的,需要包含http这些,路径是全的
  • wps打开Excel应该有缓存这些图片,所以即使把服务器关闭了,不能访问图片了,wps依然能展示图片

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>




    <table id="targetTable">
        <thead>
            <tr>
                <td>序号</td>
                <td>图片</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>1</td>
                <td>
                    <img src="1.jpg" id="img1" />
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>
                    <img src="http://localhost:2079/%E6%B5%8B%E8%AF%951/1.jpg" />
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>
                    <img src="http://localhost:2079/%E6%B5%8B%E8%AF%951/3.jpg" style="width: 200px;" />
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>
                    <img src="http://183.66.231.18:8084/Content/img/log.png" style="width: 100px;" />
                </td>
            </tr>
        </tbody>
    </table>






    <a id="exportExcel" href="javascript:;">导出Excel</a>
    <input type="button" id="btn1" value="btn1" />

    <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script>
    <script>

        //https://github.com/smileyby/js-table-excel

        /**
        * 将html的table转成Excel的data协议类型数据,不支持ie
        *   table 是HTML DOM Document 对象
        × name 是sheet的名称
        */
        var tableToExcel = (function () {
            var uri = ‘data:application/vnd.ms-excel;base64,‘,
                template = ‘<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40">‘
                    + ‘<head><meta http-equiv="Content-type" content="text/html;charset=UTF-8" /><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/>‘
                    + ‘</x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>‘,
                base64 = function (s) {
                    return window.btoa(unescape(encodeURIComponent(s)))
                },
                format = function (s, c) {
                    return s.replace(/{(\w+)}/g, function (m, p) {
                        return c[p];
                    })
                };

            return function (table, name) {
                var ctx = {
                    worksheet: name || ‘Worksheet‘,
                    table: table.innerHTML
                }
                return uri + base64(format(template, ctx));
            }
        })();



        $(function () {
            $(‘#exportExcel‘).on(‘click‘, function () {
                var $this = $(this);
                //设定下载的文件名及后缀
                $this.attr(‘download‘, ‘excelName.xls‘);
                //设定下载内容
                $this.attr(‘href‘, tableToExcel($(‘#targetTable‘)[0], ‘excelName‘));
            });




            function getBase64Image(img) {
                var canvas = document.createElement("canvas");
                canvas.width = img.width;
                canvas.height = img.height;
                var ctx = canvas.getContext("2d");
                ctx.drawImage(img, 0, 0, img.width, img.height);
                var ext = img.src.substring(img.src.lastIndexOf(".") + 1).toLowerCase();
                var dataURL = canvas.toDataURL("image/" + ext);
                return dataURL;
            }


            $("#btn1").click(function () {

                var src = "1.jpg";
                var image = new Image();
                image.src = src;
                image.onload = function () {
                    var base64 = getBase64Image(image);
                    console.log(base64);
                    $("#img1").attr("src", base64);
                }
            });
        });
    </script>



</body>
</html>

前端 导出为Excel 数据源为table表格 并且table中含有图片

标签:nes   new   方案   base64   支持   应该   last   odata   ons   

原文地址:https://www.cnblogs.com/guxingy/p/12557204.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!