jQuery网页文字导出word格式插件js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery网页文字导出word格式插件js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>可将网页内容导出到Word文档的jQuery插件</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/demo.css">
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-md-9" id="pagecontent">
			<h3>秋天的韵味</h3>			
			<p>夏天的燥热还没有完全褪去，秋天便伴着几场秋雨悄悄来了。于是，秋天的韵味便展现在我们的身边。</p>
			<p>秋的韵味体现在每天的早晚两头，空气不再闷热，给人以清凉爽快的感觉，推开窗户，便有清风吹进。中午时刻，有时阳光还是那么热烈，但站在树下的阴凉处，便觉秋风习习，凉快了许多。</p>
			<p>秋的韵味裹挟在阵阵秋风里。秋天的风，凉而不寒，多情而不疯狂。秋风轻抚你的肌肤，撩拨你的发丝，一下子安抚了你躁动的心，似乎在悄悄提醒我们：秋天来了。</p>
			<p>秋天的韵味挂在天空。空中明净如洗，湛蓝无比，那是一种新鲜却不张扬，柔和又不失明快的色彩，它又是那样高旷悠远。 七月八月看巧云，秋天的晚霞变化万千，绚丽多彩，有时红的像一团火，有时美的像一幅画，有时萌动得像一部水幕电影，有时朵朵白云像羊群 奔跑，像骏马驰骋……..使人目不暇接，充满幻想。</p>
			<p>秋天的韵味藏在花丛中。南方的桂花花香正浓，北方的秋菊又开了。“秋来谁为韶华主，总领群芳是菊花”。菊花，浓缩了冬春夏的精华，在百花凋零的季节，迎着风霜，携一身淡雅花香而至，给萧索的的大地带来了勃勃生机。</p>
			<p>秋的韵味出现在树林中。秋天的树，在南国，路边，山坡上，房前屋后多是榕树和青松等常绿植物，即便是秋，放眼望去，一派生机勃勃的葱茏！在北方，树下铺陈一片金黄色的落叶。拾起一片来，细细端详，那清晰的脉络，那温暖的色调，使人不由惊叹 ，这是树叶对大地的眷恋，对根的依恋，对树的回报？而有一些树木，每到秋天霜打之后，树叶便变得火红一片，成了一道道靓丽的风景线，扮美了起伏的山川，引来游客们驻足观看。</p>
			<p>秋的韵味展现在果园、田野里。 瓜果飘香，是对冬春夏的回报，秋粮丰收，金黄满坡，是对农者辛勤劳作的颁奖。秋收冬藏是世人生生不息的保障。</p>
			<p>秋的韵味还展现在中秋夜晚，秋月圆圆，万家团圆，一桌家乡的饭菜，一屋欢声笑语，道出了人们对美好生活的赞许和小康生活的向往。家人、亲朋相聚，人间温情浓浓。</p>
			<p>秋的韵味还挂在人们的脸上。面对秋天，人们发自内心的感激之情溢于言表，赞叹太平盛世的衣食无忧，感叹祖国日新月异的发展变化，展望中国梦的稳步实现。</p>
			<p>秋天的韵味是成熟的。如果说春天是一个少年， 他对未来的希望和憧憬往往带有几分盲目和青涩；假如夏天是一位青年，它往往带着青春的躁动去闯荡世界，遭受狂风暴雨的洗涤；而秋天，恰恰是一位成年人和长者。它已经没有春天的盲目和青涩，也没有夏天的躁动，它阅尽了世间的得与失、荣与辱、繁华与萧条，看惯了世态的炎凉和人间的冷暖，从而变得更加恬淡，更加深沉，更加自信，更加成熟。</p>
		</div>
		<div class="col-md-3">
			<a class="btn btn-default jquery-word-export" href="javascript:void(0)">
					<span class="word-icon">W</span>
					导出为.doc文档
				 </a>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/FileSaver.js"></script>
<script type="text/javascript" src="js/jquery.wordexport.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
	$("a.jquery-word-export").click(function(event) {
		$("#pagecontent").wordExport();
	});
});
</script>
</body>
</html>

JS代码(FileSaver.js):

/* FileSaver.js * A saveAs() FileSaver implementation. * 1.3.2 * 2016-06-16 18:25:19 * * By Eli Grey,http://eligrey.com * License:MIT * See https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md */
/*global self */
/*jslint bitwise:true,indent:4,laxbreak:true,laxcomma:true,smarttabs:true,plusplus:true */
/*! @source http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js */
var saveAs = saveAs || (function(view){
	"use strict";
	// IE <10 is explicitly unsupportedif (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)){
	return;
}
var doc = view.document // only get URL when necessary in case Blob.js hasn't overridden it yet,get_URL = function(){
	return view.URL || view.webkitURL || view;
}
,save_link = doc.createElementNS("http://www.w3.org/1999/xhtml","a"),can_use_save_link = "download" in save_link,click = function(node){
	var event = new MouseEvent("click");
	node.dispatchEvent(event);
}
,is_safari = /constructor/i.test(view.HTMLElement),is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent),throw_outside = function(ex){
	(view.setImmediate || view.setTimeout)(function(){
	throw ex;
}
,0);
}
,force_saveable_type = "application/octet-stream"// the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to,arbitrary_revoke_timeout = 1000 * 40 // in ms,revoke = function(file){
	var revoker = function(){
	if (typeof file === "string"){
	// file is an object URLget_URL().revokeObjectURL(file);
}
else{
	// file is a Filefile.remove();
}
}
;
	setTimeout(revoker,arbitrary_revoke_timeout);
}
,dispatch = function(filesaver,event_types,event){
	event_types = [].concat(event_types);
	var i = event_types.length;
	while (i--){
	var listener = filesaver["on" + event_types[i]];
	if (typeof listener === "function"){
	try{
	listener.call(filesaver,event || filesaver);
}
catch (ex){
	throw_outside(ex);
}
}
}
}
,auto_bom = function(blob){
	// prepend BOM for UTF-8 XML and text/* types (including HTML)// note:your browser will automatically convert UTF-16 U+FEFF to EF BB BFif (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;
	.*charset\s*=\s*utf-8/i.test(blob.type)){
	return new Blob([String.fromCharCode(0xFEFF),blob],{
	type:blob.type}
);
}
return blob;
}
,FileSaver = function(blob,name,no_auto_bom){
	if (!no_auto_bom){
	blob = auto_bom(blob);
}
// First try a.download,then web filesystem,then object URLsvar filesaver = this,type = blob.type,force = type === force_saveable_type,object_url,dispatch_all = function(){
	dispatch(filesaver,"writestart progress write writeend".split(" "));
}
// on any filesys errors revert to saving with object URLs,fs_error = function(){
	if ((is_chrome_ios || (force && is_safari)) && view.FileReader){
	// Safari doesn't allow downloading of blob urlsvar reader = new FileReader();
	reader.onloadend = function(){
	var url = is_chrome_ios ? reader.result:reader.result.replace(/^data:[^;
	]*;
	/,'data:attachment/file;
	');
	var popup = view.open(url,'_blank');
	if(!popup) view.location.href = url;
	url=undefined;
	// release reference before dispatchingfilesaver.readyState = filesaver.DONE;
	dispatch_all();
}
;
	reader.readAsDataURL(blob);
	filesaver.readyState = filesaver.INIT;
	return;
}
// don't create more object URLs than neededif (!object_url){
	object_url = get_URL().createObjectURL(blob);
}
if (force){
	view.location.href = object_url;
}
else{
	var opened = view.open(object_url,"_blank");
	if (!opened){
	// Apple does not allow window.open,see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/SafariExtensionGuide/WorkingwithWindowsandTabs/WorkingwithWindowsandTabs.htmlview.location.href = object_url;
}
}
filesaver.readyState = filesaver.DONE;
	dispatch_all();
	revoke(object_url);
}
;
	filesaver.readyState = filesaver.INIT;
	if (can_use_save_link){
	object_url = get_URL().createObjectURL(blob);
	setTimeout(function(){
	save_link.href = object_url;
	save_link.download = name;
	click(save_link);
	dispatch_all();
	revoke(object_url);
	filesaver.readyState = filesaver.DONE;
}
);
	return;
}
fs_error();
}
,FS_proto = FileSaver.prototype,saveAs = function(blob,name,no_auto_bom){
	return new FileSaver(blob,name || blob.name || "download",no_auto_bom);
}
;
	// IE 10+ (native saveAs)if (typeof navigator !== "undefined" && navigator.msSaveOrOpenBlob){
	return function(blob,name,no_auto_bom){
	name = name || blob.name || "download";
	if (!no_auto_bom){
	blob = auto_bom(blob);
}
return navigator.msSaveOrOpenBlob(blob,name);
}
;
}
FS_proto.abort = function(){
}
;
	FS_proto.readyState = FS_proto.INIT = 0;
	FS_proto.WRITING = 1;
	FS_proto.DONE = 2;
	FS_proto.error =FS_proto.onwritestart =FS_proto.onprogress =FS_proto.onwrite =FS_proto.onabort =FS_proto.onerror =FS_proto.onwriteend =null;
	return saveAs;
}
( typeof self !== "undefined" && self|| typeof window !== "undefined" && window|| this.content));
	// `self` is undefined in Firefox for Android content script context// while `this` is nsIContentFrameMessageManager// with an attribute `content` that corresponds to the windowif (typeof module !== "undefined" && module.exports){
	module.exports.saveAs = saveAs;
}
else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)){
	define([],function(){
	return saveAs;
}
);
}

CSS代码(demo.css):

body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#494A5F;color:#D5D6E2;font-weight:500;font-size:1.05em;font-family:"Microsoft YaHei","宋体","Segoe UI","Lucida Grande",Helvetica,Arial,sans-serif,FreeSans,Arimo;}
a{color:rgba(255,255,255,0.6);outline:none;text-decoration:none;-webkit-transition:0.2s;transition:0.2s;}
a:hover,a:focus{color:#74777b;text-decoration:none;}
.word-icon{font-family:"Helvetica",sans-serif;font-size:24px;font-weight:bold;background-color:#0054a6;color:white;padding:2px 5px;vertical-align:middle;}

附件:下载该文件资源,减少时间成本(增值服务)