前端实现HTML导出为word文档

最新推荐文章于 2024-03-08 15:10:17 发布

茶梨吐司

最新推荐文章于 2024-03-08 15:10:17 发布

阅读量8.3k

点赞数 10

本文链接：https://blog.csdn.net/qq_41615323/article/details/109235888

版权

需求：将页面或者页面上所需要的部分导出为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文档的总结。

茶梨吐司

关注

10
点赞
踩
35

收藏

觉得还不错? 一键收藏
5
评论
前端实现HTML导出为word文档

需求：将页面或者页面上所需要的部分导出为word文档准备工作：jqueryFileSaver.jsjquery.wordexport.jsjs文件地址：https://github.com/eligrey/FileSaver.js/https://github.com/markswindoll/jQuery-Word-Export实现过程引入jquery 以及...
复制链接

扫一扫