项目开发中遇到了需要将HTML页面的内容导出为一个word文档，所以有了这边随笔。

当然，项目开发又时间有点紧迫，第一时间想到的是用插件，所以百度了下。下面就介绍两个导出word文档的方法。

备注：兼容IE9以上

大概浏览了下jquery.wordexport.js插件的代码，了解到了通过该插件可以导出文本和图片，而图片首先通过canvas的形式

绘制，文本则需要再依赖FileSaver.js插件，FileSaver.js插件则主要通过H5的文件操作新特性new Blob()和new FileReader()

来实现文本的导出。

插件源码：

FileSaver.js

1 /* FileSaver.js 2 * A saveAs() FileSaver implementation. 3 * 1.3.2 4 * 2016-06-16 18:25:19 5 * * License: MIT saveAs = saveAs || (function(view) { ; (|| && /MSIE [1-9]\./.test(navigator.userAgent)) { 20 return; 21 } doc = view.document , get_URL = function() { 26 return view.URL || view.webkitURL || view; 27 } , ) save_link 30 , click = function(node) { = ); 32 node.dispatchEvent(event); 33 } 34 , is_safari = /constructor/i.test(view.HTMLElement) 35 , is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent) 36 , throw_outside = function(ex) { 37 (view.setImmediate || view.setTimeout)(function() { 38 throw ex; 39 }, 0); 40 } , arbitrary_revoke_timeout = , revoke = function(file) { 45 var revoker = function() { ) { get_URL().revokeObjectURL(file); file.remove(); 50 } 51 }; 52 setTimeout(revoker, arbitrary_revoke_timeout); 53 } 54 , dispatch = function(filesaver, event_types, event) { 55 event_types = [].concat(event_types); 56 var i = event_types.length; 57 while (i--) { + event_types[i]]; ) { 60 try { 61 listener.call(filesaver, event || filesaver); 62 } catch (ex) { 63 throw_outside(ex); 64 } 65 } 66 } 67 } 68 , auto_bom = function(blob) { 69 // prepend BOM for UTF-8 XML and text/* types (including HTML) (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) { Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type}); 73 } 74 return blob; 75 } 76 , FileSaver = function(blob, name, no_auto_bom) { 77 if (!no_auto_bom) { 78 blob = auto_bom(blob); 79 } filesaver = this 83 , type = blob.type 84 , force = type === force_saveable_type 85 , object_url 86 , dispatch_all = function() { .split(" ")); 88 } , fs_error = function() { 91 if ((is_chrome_ios || (force && is_safari)) && view.FileReader) { reader = new FileReader(); 94 reader.onloadend = function() { ); ); 97 if(!popup) view.location.href = url; filesaver.readyState = filesaver.DONE; 100 dispatch_all(); 101 }; 102 reader.readAsDataURL(blob); 103 filesaver.readyState = filesaver.INIT; 104 return; 105 } (!object_url) { 108 object_url = get_URL().createObjectURL(blob); 109 } 110 if (force) { 111 view.location.href = object_url; 112 } else { ); 114 if (!opened) { view.location.href = object_url; 117 } 118 } 119 filesaver.readyState = filesaver.DONE; 120 dispatch_all(); 121 revoke(object_url); 122 } 123 ; 124 filesaver.readyState = filesaver.INIT; (can_use_save_link) { 127 object_url = get_URL().createObjectURL(blob); 128 setTimeout(function() { 129 save_link.href = object_url; 130 save_link.download = name; 131 click(save_link); 132 dispatch_all(); 133 revoke(object_url); 134 filesaver.readyState = filesaver.DONE; 135 }); 136 return; 137 } 138 139 fs_error(); 140 } 141 , FS_proto = FileSaver.prototype 142 , saveAs = function(blob, name, no_auto_bom) { FileSaver(blob, name || blob.name || , no_auto_bom); 144 } 145 ; (&& navigator.msSaveOrOpenBlob) { 148 return function(blob, name, no_auto_bom) { ; (!no_auto_bom) { 152 blob = auto_bom(blob); 153 } 154 return navigator.msSaveOrOpenBlob(blob, name); 155 }; 156 } 157 158 FS_proto.abort = function(){}; 159 FS_proto.readyState = FS_proto.INIT = 0; 160 FS_proto.WRITING = 1; 161 FS_proto.DONE = 2; 162 163 FS_proto.error = 164 FS_proto.onwritestart = 165 FS_proto.onprogress = 166 FS_proto.onwrite = 167 FS_proto.onabort = 168 FS_proto.onerror = 169 FS_proto.onwriteend = 170 null; saveAs; 173 }( && self && window 176 || this.content 177 )); 178 // `self` is undefined in Firefox for Android content script context 179 // while `this` is nsIContentFrameMessageManager (&& module.exports) { 183 module.exports.saveAs = saveAs; && define !== null) && (define.amd !== null)) { 185 define([], function() { 186 return saveAs; 187 }); 188 }

jquery.wordexport.js