前端导出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、添加导出按钮，导出按钮添加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 itvar markup = $(this).clone();// Remove hidden elements from the outputmarkup.each(function () {var self = $(this);if (self.is(':hidden'))self.remove();});// Embed all images using Data URLsvar 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 imagevar 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 URLvar canvas = document.createElement("CANVAS");canvas.width = w;canvas.height = h;// Draw image to canvasvar context = canvas.getContext('2d');context.drawImage(img[i], 0, 0, w, h);// Get data URL encoding of imagevar 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 stylesheetvar styles = "";// Aggregate parts of the file togethervar 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 contentsvar 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

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

office服务器草稿位置,精确定位图片在Word文档中的位置的操作方法
除了嵌入型图片外,图片在Word文档中的位置可以通过鼠标拖动来调整.如果需要对图片位置进行精确定位,可以使用相关的命令来进行操作,下面介绍精确定位图片在Word文档中的位置的具体操作方法. 1.在文档 ...
计算机word工具栏图片,在word文档中画出逼真的电脑显示器
9.用PS制作一张英文字母图片,字母设置为白色,作为电脑显示器的LOGO,把LOGO图片保存为PNG格式. 回到word文档这里,在文档上方的菜单栏中顺序点:插入--图片--来自文件: 把刚才PS弄好 ...
如何给WPS里全是图片的word文档中利用题注自动编号
打开需要编号的word文档. 操作如下(可按图片中的数字序号顺序操作): 第一步,利用JS宏代码自动换行插入回车符这里的代码需要复制dujianxiong大神的代码, https://blog.cs ...
在Word文档中插入矢量图片
在Word文档中插入矢量图片在 Word 文档中插入矢量图片,可以按照以下步骤进行: 打开 Word 文档,点击插入选项卡,选择"图片"命令. 在弹出的"插入图片&qu ...
C# 替换Word文档中的图片
C# 替换Word文档中的图片图片是Word文档中非常常见的一种元素,我们在处理Word文档时经常会对图片进行如添加,提取,替换和删除等操作.之前我已经介绍过如何提取Word文档中的图片,这篇文章将 ...
【Python】批量导出word文档中的图片、嵌入式文件
Python 批量导出word文档中的图片.嵌入式文件需求学生试卷中的题目有要提交截图的,也有要提交文件的,为了方便学生考试,允许单独交或者嵌入Word中提交,那么事后如何整理学生的答案?单独提交 ...
java freemarker 图片_java通过freemarker导出包含富文本图片的word文档
废话不多说,进入正题! 本文重点在于:对富文本图片的导出(基础的freemarker+word模板导出这里不做详细解说哈) (ps:大神的东西太深奥~~懵逼了一周才搞定,为了方便后来在更加简单,清晰 ...
将word文档中的图片批量导出到文件夹中的办法
有两个办法. 第一个办法: 1.打开需要导出图片的Word文档,打开后,选择菜单栏的[文件]选项-[另存为]: 2.将文件选择路径之后另存为,在下方文件类型下拉菜单中选择[(*.htm; *.html ...
【Python】导出docx格式Word文档中的文本、图片和附件等
[Python]导出docx格式Word文档中的文本.图片和附件等零.需求为批量批改学生在机房提交的实验报告,我需要对所有的实验文档内容进行处理.需要批量提取Word文档中的图片和附件以便进一步检 ...
python批量提取word文档中的图片（含图片格式转换和GUI）
作者:小小明文章目录 doc格式批量转为docx 批量提取docx文档的图片批量图片格式转换完整代码 GUI图形化工具开发打包exe 给GUI加入进度条日常工作中,领导要求你将一份 Word ...

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

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

最新文章

热门文章