前端导出HTML（含图片）到word文档中实践总结

最新推荐文章于 2024-03-01 11:58:02 发布

书剑零落

最新推荐文章于 2024-03-01 11:58:02 发布

阅读量2.9k

点赞数 2

分类专栏： JQuery 文章标签： jquery

本文链接：https://blog.csdn.net/shunhua19881987/article/details/108381012

版权

JQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、业务需求：

需要将查看页面中的HTML内容及对应的鱼骨图（sbg）导出到word文档中；

二、解决方案：

1、需要svg通过后端请求转成png，重新写入到div中，供导出使用；

2、使用jQuery-Word-Export插件，将重构后的div内容导出到word中。

三、前端实现代码：

1、HTML页面中引入jquery.min.js、FileSaver.js、jquery.wordexport.js三个文件；

2、页面添加导出div，将导出内容写入（含转换后的png）；

3、添加导出按钮，导出按钮添加click事件：

$("#download").wordExport("分析与评价");

四、遇到的问题：

1、svg转png：前端插件很多不兼容IE浏览器，改成后端实现（Svg.dll【从官网上拉的源码修改后编译再引入项目中使用】）；

2、图片导出到word，很多后端插件不兼容office word 2003，改用前端实现；

3、jquery.wordexport.js的导出方法wordExport（）中var img = markup.find('img');不支持谷歌浏览器，需改成var img = new Image();改后，导出的图片在WPS中不显示。

再次修改插件源码（生成canvas部分代码）如下：

if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") {
    (function ($) {
        $.fn.wordExport = function (fileName) {
            fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export";
            var static = {
                mhtml: {
                    top: "Mime-Version: 1.0\nContent-Base: " + location.href + "\nContent-Type: Multipart/related; boundary=\"NEXT.ITEM-BOUNDARY\";type=\"text/html\"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset=\"utf-8\"\nContent-Location: " + location.href + "\n\n<!DOCTYPE html>\n<html>\n_html_</html>",
                    head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>\n_styles_\n</style>\n</head>\n",
                    body: "<body>_body_</body>"
                }
            };
            var options = {
                maxWidth: 624,//最大宽度
                defaultLength: 300 //默认高度
            };
            // Clone selected element before manipulating it
            var markup = $(this).clone();

            // Remove hidden elements from the output
            markup.each(function () {
                var self = $(this);
                if (self.is(':hidden'))
                    self.remove();
            });

            // Embed all images using Data URLs
            var images = Array();
            var img = markup.find('img');
            var mhtmlBottom = "\n";
            //var img = new Image();
            for (var i = 0; i < img.length; i++) {
                // Calculate dimensions of output image
                var w = Math.min(img[i].width == 0 ? options.maxWidth : img[i].width, options.maxWidth);
                var h = (img[i].height == 0 ? options.defaultLength : img[i].height) * (w / (img[i].width == 0 ? options.maxWidth : img[i].width));

                // Create canvas for converting image to data URL
                var canvas = document.createElement("CANVAS");
                canvas.width = w;
                canvas.height = h;
                // Draw image to canvas
                var context = canvas.getContext('2d');
                context.drawImage(img[i], 0, 0, w, h);
                // Get data URL encoding of image
                var uri = canvas.toDataURL("image/png");
                console.log(i+":"+uri);
                $(img[i]).attr("src", img[i].src);
                img[i].width = w;
                img[i].height = h;

                mhtmlBottom += "--NEXT.ITEM-BOUNDARY\n";
                mhtmlBottom += "Content-Location: " + uri + "\n";
                mhtmlBottom += "Content-Type: " + uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")) + "\n";
                mhtmlBottom += "Content-Transfer-Encoding: " + uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")) + "\n\n";
                mhtmlBottom += uri.substring(uri.indexOf(",") + 1) + "\n\n";
            }

            mhtmlBottom += "--NEXT.ITEM-BOUNDARY--";

            //TODO: load css from included stylesheet
            var styles = "";

            // Aggregate parts of the file together
            var fileContent = static.mhtml.top.replace("_html_", static.mhtml.head.replace("_styles_", styles) + static.mhtml.body.replace("_body_", markup.html())) + mhtmlBottom;

            // Create a Blob with the file contents
            var blob = new Blob([fileContent], {
                type: "application/msword;charset=utf-8"
            });
            saveAs(blob, fileName + ".doc");
            
        };
    })(jQuery);
} else {
    if (typeof jQuery === "undefined") {
        console.error("jQuery Word Export: missing dependency (jQuery)");
    }
    if (typeof saveAs === "undefined") {
        console.error("jQuery Word Export: missing dependency (FileSaver.js)");
    }
}

五、参照网址：

http://hoohtml.com/jQuery/Tools/2016090927.html

https://www.cnblogs.com/liudaihuablogs/p/9726700.html

https://blog.csdn.net/weixin_33743880/article/details/92385994

https://www.llxrandom.com/test/jqueryword

书剑零落

关注

2
点赞
踩
7

收藏

觉得还不错? 一键收藏
5
评论
前端导出HTML（含图片）到word文档中实践总结

一、业务需求：需要将查看页面中的HTML内容及对应的鱼骨图（sbg）导出到word文档中；二、解决方案：1、需要svg通过后端请求转成png，重新写入到div中，供导出使用；2、使用jQuery-Word-Export插件，将重构后的div内容导出到word中。三、前端实现代码：1、HTML页面中引入jquery.min.js、FileSaver.js、jquery.wordexport.js三个文件；2、页面添加导出div，将导出内容写入（含转换后的png）；3、添加导出按
复制链接

扫一扫