• 懒鸟飞:帝国cms模板专业分享平台,新域名:lanniaofei.com

html网页导出到word支持分页-Jquery插件

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

 
QQ在线咨询
QQ客服
淘宝官网