前端实现HTML导出为word文档

您所在的位置：网站首页 › 前端下载word文档 › 前端实现HTML导出为word文档

前端实现HTML导出为word文档

#前端实现HTML导出为word文档| 来源: 网络整理| 查看: 265

需求：将页面或者页面上所需要的部分导出为word文档

基本导出修改样式修改图片大小修改导出文档名称修改导出默认方式

准备工作：

jqueryFileSaver.jsjquery.wordexport.js

js文件地址： https://github.com/eligrey/FileSaver.js/ https://github.com/markswindoll/jQuery-Word-Export

一、基本打印

引入jquery 以及上面的两个js文件，要注意引入的顺序，不能随意修改。 html代码导出的内容导出 js代码 jQuery(document).ready(function($) { $("a.page-btn").click(function(event) { $("#page").wordExport(); //打印id为page的div中的所有内容 }); }); 导出效果

在这里插入图片描述 6. 完整代码

打印demo 导出的内容导出 jQuery(document).ready(function($) { $("a.page-btn").click(function(event) { $("#page").wordExport(); }); });

以上便实现了基本的页面导出word文档，接下来将插入一张图片并对其它要点做演示。

二、修改样式

对样式进行修改，页面中的样式生效，但导出的word文档中的样式并未与页面中一致。

在这里插入图片描述解决方案：

方法一：使用内联样式进行样式的修改修改基本的导出样式方法二：在jquery.wordexport.js文件中找到styles进行样式的修改

在这里插入图片描述

var styles = ".title{color:red;font-size: 18px;}";

修改成功后

在这里插入图片描述

三、修改图片大小

在样式中修改图片大小，但导出成word文档时图片大小还是没有修改，原因是导出成文档时，jquery.wordexport.js是使用canvas对img进行处理，若想修改图片在文档中的大小，需在jquery.wordexport.js中进行修改。

解决方案在jquery.wordexport.js中对高度和宽度进行修改，修改后word文档中的图片大小即随之更改。

在这里插入图片描述

四、修改导出文档名称

点击导出为word文档时，文档名称为默认，可自定义修改文档名称。在这里插入图片描述

解决方案 jQuery(document).ready(function($) { $("a.page-btn").click(function(event) { $("#page").wordExport("修改后的文档名称"); //在引号中添加自定义的文档名称 }); });

在这里插入图片描述五、修改导出默认方式

文档导出成功后，打开方式默认为web视图，需修改为默认打开方式。

在这里插入图片描述

解决方案

将jquery.wordexport.js中的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\n" + "\n_html_", head: "\n\n\n_styles_\n\n\n", body: "_body_" }

修改成功后

在这里插入图片描述

以上便是通过jq插件实现页面导出为word文档的总结。

【本文地址】

前端实现HTML导出为word文档

前端实现HTML导出为word文档

今日新闻

推荐新闻