前端实现HTML导出为word⽂档需求：将页⾯或者页⾯上所需要的部分导出为word⽂档
基本导出
修改样式
修改图⽚⼤⼩
修改导出⽂档名称
修改导出默认⽅式
准备⼯作：
jquery
FileSaver.js
jquery.wordexport.js
⼀、基本打印
1. 引⼊jquery 以及上⾯的两个js⽂件，要注意引⼊的顺序，不能随意修改。
jquery在线图片<script src="cdn.bootcss/jquery/3.4.1/jquery.js"></script>
<script src="js/FileSaver.js"></script>
<script src="js/jquery.wordexport.js"></script>
2. html代码
<div id="page">
导出的内容
</div>
<a class="page-btn"href="javascript:void(0)">导出</a>
3. js代码
jQuery(document).ready(function($){
$("a.page-btn").click(function(event){
$("#page").wordExport();//打印id为page的div中的所有内容
});
});
4. 导出效果
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="cdn.bootcss/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" >修改基本的导出样式</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:o ffice:word\" xmlns:m=\"schemas.microsoft/office/2004/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<!--[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-N ONE</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:m athPr><m:mathFont m:val=\"Cambria Math\"/><m:brkBin m:val=\"before\"/><m:brkBinSub m:val=\"--\"/><m:smallFrac m:val=\"off\"/><m:dispDef/><m:lMargi n 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⽂档的总结。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。