前端实现html页面导出为word文档
程序员文章站
2022-06-23 11:32:58
需求：将页面或者页面上所需要的部分导出为word文档准备工作：jqueryFileSaver.jsjquery.wordexport.jsjs文件地址：https://github.com/eligrey/FileSaver.js/https://github.com/markswindoll/jQuery-Word-Export实现过程引入jquery 以及......
需求：将页面或者页面上所需要的部分导出为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文档的总结。
本文地址：https://blog.csdn.net/qq_41615323/article/details/109235888