前端实现HTML导出为word文档

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

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

准备工作：

jquery
FileSaver.js
jquery.wordexport.js

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

一、基本打印

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

<script src="https://cdn.bootcss.com/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="https://cdn.bootcss.com/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=\"http://schemas.microsoft.com/office/2004/12/omml\" xmlns=\"http://www.w3.org/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<!--[if gte mso 9]><xml><w:WordDocument><w:View>Print</w:View><w:TrackMoves>false</w:TrackMoves><w:TrackFormatting/><w:ValidateAgainstSchemas/><w:SaveIfXMLInvalid>false</w:SaveIfXMLInvalid><w:IgnoreMixedContent>false</w:IgnoreMixedContent><w:AlwaysShowPlaceholderText>false</w:AlwaysShowPlaceholderText><w:DoNotPromoteQF/><w:LidThemeOther>EN-US</w:LidThemeOther><w:LidThemeAsian>ZH-CN</w:LidThemeAsian><w:LidThemeComplexScript>X-NONE</w:LidThemeComplexScript><w:Compatibility><w:BreakWrappedTables/><w:SnapToGridInCell/><w:WrapTextWithPunct/><w:UseAsianBreakRules/><w:DontGrowAutofit/><w:SplitPgBreakAndParaMark/><w:DontVertAlignCellWithSp/><w:DontBreakConstrainedForcedTables/><w:DontVertAlignInTxbx/><w:Word11KerningPairs/><w:CachedColBalance/><w:UseFELayout/></w:Compatibility><w:BrowserLevel>MicrosoftInternetExplorer4</w:BrowserLevel><m:mathPr><m:mathFont m:val=\"Cambria Math\"/><m:brkBin m:val=\"before\"/><m:brkBinSub m:val=\"--\"/><m:smallFrac m:val=\"off\"/><m:dispDef/><m:lMargin m:val=\"0\"/> <m:rMargin m:val=\"0\"/><m:defJc m:val=\"centerGroup\"/><m:wrapIndent m:val=\"1440\"/><m:intLim m:val=\"subSup\"/><m:naryLim m:val=\"undOvr\"/></m:mathPr></w:WordDocument></xml><![endif]--></head>\n",body: "<body>_body_</body>"}

修改成功后

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

前端实现HTML导出为word文档相关推荐

前端报表导出成word文档（含echarts图表）
前端报表导出成word文档(含echarts图表) 一.问题背景: 前端vue做的各种维度的报表,原来是通过前端整体截屏导出成PDF,但部分报表在遇到跨页时会被截断,客户体验极差.然后又考虑客户可能需 ...
HTML导出生成Word文档
前言在某某夜黑风高的一天即将下班的时候,老板召集公司大神们,进行了一个紧急会议,此会议主要目的是老板的客户提出了一些小需求, 有一个前端小需求,需要将前端HTML导出为Word文档,因为没有做过此 ...
将HTML导出生成word文档
前言: 项目开发中遇到了需要将HTML页面的内容导出为一个word文档,所以有了这边随笔. 当然,项目开发又时间有点紧迫,第一时间想到的是用插件,所以百度了下.下面就介绍两个导出word文档的方法. ...
导出备忘录Word文档
这里写自定义目录标题 /*** 导出备忘录Word文档** @param id* @return*/@Overridepublic String exportWordMemo(Long id) thr ...
js将html转为word文档,js将html导出到word文档（含echarts图表）
需求在开发项目途中遇到了一个需求,就是将一个整个HTML界面导出到word文档,其中包含了echarts图表,经过一番折腾,终于完成了~~~(鸡肋),过程中用到了几个插件,总结了一下几个步骤,希望可 ...
js将HTML导出生成word文档
在项目开发中中,遇到将HTML导出生成word文档,刚开始在网上找了很多资料,基本都是jQuery中的插件jquery.wordexport.js,刚开始是不想用这个的,这个要引用另一个插件FileS ...
用js将HTML文本导出生成word文档
在项目开发中中,遇到将HTML导出生成word文档,刚开始在网上找了很多资料,基本都是jQuery中的插件jquery.wordexport.js,刚开始是不想用这个的,这个要引用另一个插件FileS ...
Java项目中利用Freemarker模板引擎导出--生成Word文档
应邀写的一篇文章:Java项目中利用Freemarker模板引擎导出--生成Word文档资源下载:https://download.csdn.net/download/weixin_41367523 ...
Java使用POI生成柱状图导出到word文档（柱状图）
本篇文章主要介绍,如何使用Apache POI组件生成柱状图导出到word文档中,具体步骤看下文. 一.实现效果 Java使用POI技术生成柱状图导出到word文档中,最终生成的柱状图如下所示: 二. ...

前端实现HTML导出为word文档

前端实现HTML导出为word文档相关推荐

最新文章

热门文章