html网页内容通过js导出word文档,支持设置分页-Jquery插件jquery.wordexport.js
html网页内容通过js导出word文档,Jquery插件jquery.wordexport.js使用方法。
首先要引入jquery库和FileSaver.js,使用案例:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>html网页导出到word-Jquery插件</title>
<style>
.word_icon{
position:fixed;
top:0;
right:0;
font-size: 24px;
font-weight: bold;
background-color: #0054a6;
color: white;
padding: 2px 5px;
border:none;
}
</style>
</head>
<body>
<div><button class="word_icon">下载Word文档</button></div>
<div class="doc_box">
<style>
.slogan{color:#EB6F5A;}
.title2{color:#22c3bd;}
a{color:#EB6F5A;}
</style>
<!--第一页-->
<h3>越加网</h3>
<p class="slogan">越加网 - 分享编程~</p>
<p class="slogan">热爱生活,热爱编程。~</p>
<p class="title2">关于本站:</p>
<p>本站为个人博客网站,不定期更新分享专业知识,内容包含:</p>
<p>1、创意设计:UI设计、平面设计、广告设计、画册设计、名片设计、展架易拉宝设计等线上线下产品的设计经验分享。</p>
<p>2、软件开发:互联网电脑端、移动端网站等其他管理系统及软件发开的踩坑经验,同时免费提供源码插件及教程等。</p>
<p>3、软件下载:推荐比较好用的应用软件,分享下载连接,部分分享源码。</p>
<p class="title2">关于博主:</p>
<p>Email:yuejiaweb@163.com</p>
<p>Email:yuejiaweb@foxmail.com<p>
<p class="title2">版权说明:</p>
<p>本站内容属于原创,如有雷同纯属巧合。</p>
<p>部分文章属于转载,转载附有来源,如有侵权请及时联系!</p>
<p>转载本站内容请注明来源,请尊重作者原创,谢谢!</p>
<p>本站可以交换连接,点击<a href="http://www.yj521.com/links.html" target="_blank">友情链接</a>提交申请</p>
<!--分页符-->
<br clear=all style="page-break-before:always" mce_style="page-break-before:always">
<!--第二页-->
<h4>申请说明</h4>
<p>本站名称:越加网</p>
<p>网站描述:分享编程~</p>
<p>本站连接:https://www.yj521.com/</p>
<p>1、在您申请本站友情链接之前请先做好本站链接,谢谢!</p>
<p>2、违法中华人民共和国相关法律的网站暂不交换。</p>
<p>3、申请成功后请勿随意撤下链接,否则本站也会删除对应链接。</p>
<p>4、对于长时间打不开的站点,会暂时撤下,正常后恢复。</p>
<p>注:申请成功后我们会通过邮件通知您。</p>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="FileSaver.js"></script>
<script type="text/javascript" src="jquery.wordexport.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".word_icon").click(function(event) {
$(".doc_box").wordExport('越加网-关于博主');
});
});
</script>
</body>
</html>
在使用过程中需要设置样式请写在导出内容容器内,容器外的样式是继承不了的,同样在页面上想隐藏的一部分内容,而导出要全部内容,可以把控制样式写到导出内容容器外即可。
指定内容区域开始分页代码(相当于word文档里边的分页符):
<br clear=all style="page-break-before:always" mce_style="page-break-before:always">
完整demo点击以下链接下载:word_export_jquery