700字范文 > 前端实现HTML导出为word文档

前端实现HTML导出为word文档

时间：2023-02-01 14:23:03

相关推荐

前端实现HTML导出为word文档

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

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

准备工作：

jqueryFileSaver.jsjquery.wordexport.js

js文件地址：
/eligrey/FileSaver.js/
/markswindoll/jQuery-Word-Export

一、基本打印

引入jquery 以及上面的两个js文件，要注意引入的顺序，不能随意修改。

<script src="/jquery/3.4.1/jquery.js"></script><script src="js/FileSaver.js"></script><script src="js/jquery.wordexport.js"></script>

html代码

<div id="page">导出的内容</div><a class="page-btn" href="javascript:void(0)"> 导出 </a>

js代码

jQuery(document).ready(function($) {$("a.page-btn").click(function(event) {$("#page").wordExport(); //打印id为page的div中的所有内容});});

导出效果

6. 完整代码

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>打印demo</title></head><body><div id="page">导出的内容</div><a class="page-btn" href="javascript:void(0)"> 导出 </a></body></html><script src="/jquery/3.4.1/jquery.js"></script><script src="js/FileSaver.js"></script><script src="js/jquery.wordexport.js"></script><script type="text/javascript">jQuery(document).ready(function($) {$("a.page-btn").click(function(event) {$("#page").wordExport();});});</script>

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

二、修改样式

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

解决方案：

方法一：使用内联样式进行样式的修改

<p class="title" style="color: red;font-size: 18px;">修改基本的导出样式</p>

方法二：在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<!DOCTYPE html>\n" +"<html xmlns:v=\"urn:schemas-microsoft-com:vml\" xmlns:o=\"urn:schemas-microsoft-com:office:office\" xmlns:w=\"urn:schemas-microsoft-com:office:word\" xmlns:m=\"/office//12/omml\" xmlns=\"/TR/REC-html40\">\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>"}

修改成功后

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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。