使用插件jquery.wondexport.js将页面导入word文档遇到的问题
项目新增功能：添加页面导出功能，要求要有页面的样式。网上百度有很多使用前端插件jquery.wondexport.js去实现的，我也去试了一下。
先从网上下载两个js文件：jquery.wondexport.js和FileSaver.js
原文件：FileSaver.js 下载地址：https://github.com/eligrey/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 unsupported if (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 URL get_URL().revokeObjectURL(file); } else { // file is a File file.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 BF if (/^\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 URLs var 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 urls var 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 dispatching filesaver.readyState = filesaver.DONE; dispatch_all(); }; reader.readAsDataURL(blob); filesaver.readyState = filesaver.INIT; return; } // don't create more object URLs than needed if (!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.html view.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 window if (typeof module !== "undefined" && module.exports) { module.exports.saveAs = saveAs; } else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) { define([], function() { return saveAs; }); }
原文件：jquery.wondexport.js 【在此非常感谢jquery三方插件的支持】
if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") { (function($) { $.fn.wordExport = function(fileName) { fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export"; var 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>\n_html_</html>", head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>\n_styles_\n</style>\n</head>\n", body: "<body>_body_</body>" } }; var options = { maxWidth: 624 }; // Clone selected element before manipulating it var markup = $(this).clone(); // Remove hidden elements from the output markup.each(function() { var self = $(this); if (self.is(':hidden')) self.remove(); }); // Embed all images using Data URLs var images = Array(); var img = markup.find('img'); for (var i = 0; i < img.length; i++) { // Calculate dimensions of output image var w = Math.min(img[i].width, options.maxWidth); var h = img[i].height * (w / img[i].width); // Create canvas for converting image to data URL var canvas = document.createElement("CANVAS"); canvas.width = w; canvas.height = h; // Draw image to canvas var context = canvas.getContext('2d'); context.drawImage(img[i], 0, 0, w, h); // Get data URL encoding of image var uri = canvas.toDataURL("image/png"); $(img[i]).attr("src", img[i].src); img[i].width = w; img[i].height = h; // Save encoded image to array images[i] = { type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")), encoding: uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")), location: $(img[i]).attr("src"), data: uri.substring(uri.indexOf(",") + 1) }; } // Prepare bottom of mhtml file with image data var mhtmlBottom = "\n"; for (var i = 0; i < images.length; i++) { mhtmlBottom += "--NEXT.ITEM-BOUNDARY\n"; mhtmlBottom += "Content-Location: " + images[i].location + "\n"; mhtmlBottom += "Content-Type: " + images[i].type + "\n"; mhtmlBottom += "Content-Transfer-Encoding: " + images[i].encoding + "\n\n"; mhtmlBottom += images[i].data + "\n\n"; } mhtmlBottom += "--NEXT.ITEM-BOUNDARY--"; //TODO: load css from included stylesheet var styles = ""; // Aggregate parts of the file together var fileContent = static.mhtml.top.replace("_html_", static.mhtml.head.replace("_styles_", styles) + static.mhtml.body.replace("_body_", markup.html())) + mhtmlBottom; // Create a Blob with the file contents var blob = new Blob([fileContent], { type: "application/msword;charset=utf-8" }); saveAs(blob, fileName + ".doc"); }; })(jQuery); } else { if (typeof jQuery === "undefined") { console.error("jQuery Word Export: missing dependency (jQuery)"); } if (typeof saveAs === "undefined") { console.error("jQuery Word Export: missing dependency (FileSaver.js)"); } }
以上jquery.wondexport.js代码的主要思路是先创建一个标准html文档的json对象（static），然后获取你要导出元素的html标签（包含所有子标签），读取要导出元素的中的图片，将其转化为画布的形式方便写入doc【文本则直接被写入】，页面的样式定义为变量styles，你可以直接将css中的代码赋值给style【不能在mhtml对象中以link的形式引入外联css，本人已尝试】，最后使用开源FileSaver.js写入doc。
由于一些特殊需求：本人在jquery.wondexport.js上扩展了一个自己的版本：
jquery.wondexport_extension.js
if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") { (function($) { $.fn.wordExport = function(fileName,cssSrc) { fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export"; // I use ajax get outreach style or insert inline style code in variable(styles) directly var ajaxCss = ""; if(typeof cssSrc !== 'undefined') { $.ajax({ type: "GET",// java server I use get,other maybe use post async:false, // you must do this url: cssSrc, success: function(result){ ajaxCss = result; } }); }
// static is a keyword in java and rename the variable name here var static_html = { 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>\n_html_</html>", head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>\n_styles_\n</style>\n</head>\n", body: "<body>_body_</body>" } }; var options = { maxWidth: 624 }; // Clone selected element before manipulating it var markup = $(this).clone(); // I need hidden elements so I note the following code /*// Remove hidden elements from the output markup.each(function() { var self = $(this); if (self.is(':hidden')) self.remove(); });*/ // Embed all images using Data URLs var images = Array(); var img = markup.find('img'); for (var i = 0; i < img.length; i++) { // Calculate dimensions of output image var w = Math.min(img[i].width, options.maxWidth); var h = img[i].height * (w / img[i].width); // Create canvas for converting image to data URL var canvas = document.createElement("CANVAS"); canvas.width = w; canvas.height = h; // Draw image to canvas var context = canvas.getContext('2d'); context.drawImage(img[i], 0, 0, w, h); // Get data URL encoding of image var uri = canvas.toDataURL("image/png"); $(img[i]).attr("src", img[i].src); img[i].width = w; img[i].height = h; // Save encoded image to ar // .ray images[i] = { type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")), encoding: uri.substring(uri.indexOf(";") + 1, uri.indexOf(",")), location: $(img[i]).attr("src"), data: uri.substring(uri.indexOf(",") + 1) }; } // Prepare bottom of mhtml file with image data var mhtmlBottom = "\n"; for (var i = 0; i < images.length; i++) { mhtmlBottom += "--NEXT.ITEM-BOUNDARY\n"; mhtmlBottom += "Content-Location: " + images[i].location + "\n"; mhtmlBottom += "Content-Type: " + images[i].type + "\n"; mhtmlBottom += "Content-Transfer-Encoding: " + images[i].encoding + "\n\n"; mhtmlBottom += images[i].data + "\n\n"; } mhtmlBottom += "--NEXT.ITEM-BOUNDARY--"; //TODO: load css(use ajax get outreach style or copy inline style code and paste here) from included stylesheet var styles = ajaxCss; // I need to remove redundant code $.each(markup.find(".wrap_radio"),function() { var select = $(this).children("input:checked").attr("value"); $(this).children(".hide-span").html(select); }); $.each(markup.find("select"),function() { if($(this).children("option:selected").length == 0) { $(this).next(".hide-span").eq(0).html($(this).children("option").eq(0).html()); }else { $(this).next(".hide-span").eq(0).html($(this).children("option:selected").html()); } }); var innerTexts = ""; $.each(markup.find("#selector .hide-span"),function() { innerTexts += $(this).attr("data-name") + ":" + $(this).html() + " "; }); markup.find("#selector").css("text-align","center").html(innerTexts+"<br><br>"); markup.find("#box").css("text-align","center"); markup.find("#box .bod").after("<br><br>"); // Aggregate parts of the file together var fileContent = static_html.mhtml.top.replace("_html_", static_html.mhtml.head.replace("_styles_", styles) + static_html.mhtml.body.replace("_body_", markup.html())) + mhtmlBottom; // Create a Blob with the file contents var blob = new Blob([fileContent], { type: "application/msword;charset=utf-8" }); saveAs(blob, fileName + ".doc"); }; })(jQuery); } else { if (typeof jQuery === "undefined") { console.error("jQuery Word Export: missing dependency (jQuery)"); } if (typeof saveAs === "undefined") { console.error("jQuery Word Export: missing dependency (FileSaver.js)"); } }
有三处标红在此说一下：
1.使用ajax请求获取外联的css文件
2.在我的页面中隐藏了一些img标签，我希望能读取出来
3.对拼接的标准的html里的内容进行一些处理【删除一些不要的元素，调整一下格式等等】
我们先来看一下页面吧：
图中部分是我需要导出到word中的内容，使用的是echarts制图。首先我想使用上面说的插件，但是插件里的是对img进行处理的，而echarts生成的是cavans，在页面中是可以直接将myChart的Base64码赋值给img.src，浏览器会解析出是一张图片展示出来，但是在插件的代码中这样写就不能读取出它是一张图片【原因等会在解释】。由于echarts并没有提供使用代码触发下载图片的接口，所以我只好使用myChart.getDataURL();获取Base64码传到后台，然后后台转为图片放到静态目录下，然后在将拼接的相对路径赋值给隐藏的img.src【这张图被hidden，这就是我标红第二部分代码的原因】，这样我的图首先是一张真真切切的图了，应该不会有什么问题了，果然插件读取没什么问题，doc也生成了，样式嘛也马马虎虎，看一下：
布局还是有一些问题的，不过已经能接受了。
现在最关键的问题来了，我后台是这样处理的，使用uuid生成一个文件夹名称【放在static目录下】，将创建的图片丢进去，然后我想等浏览器下载完word后，删除这个文件夹，不然的话，人家一直点导出，我服务器端一直创建文件夹，早晚要完蛋。我这样处理了，然后发现一个问题，我再次打开下载的doc，里面图片全都没了！！！然后查找各种原因，最后我console了一下fileContent，发现了问题：我们看一下fileContent到底是什么：
Mime-Version: 1.0 Content-Base: http://localhost:8080/jeesite/a/oa/commons/page/demo3 Content-Type: Multipart/related; boundary="NEXT.ITEM-BOUNDARY";type="text/html" --NEXT.ITEM-BOUNDARY Content-Type: text/html; charset="utf-8" Content-Location: http://localhost:8080/jeesite/a/oa/commons/page/demo3 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> /* 外在css */ #selector .form-group{ display: inline-block; margin-bottom: 0; vertical-align: middle; } /* 清除浮动 */ .cl{ clear:both; } .marleft { margin-left:3px; } /* 去除bootstrap的container-fluid的padding */ #parent{ padding-left:0; padding-right:0; } /* 查询按钮 */ .form-inline .btn-primary { margin-left:30px; } .rgb{ background-color:#E2E4ED; } /* 选择条件下边线 */ .line_bottom{ margin:0 auto; height:10px; border-bottom:1px solid #DBE1E7; } .h_10{ height:10px; } /* 背景样式 */ #box .bod{ background-color:#E2E4ED; } /* 隐藏导出图片 */ img.hide { display:none; } /* 设置所有图层标题样式 */ #box .bod span.h3_style h3{ margin:0 5px 0 0; text-align:center; font-size:18px; color:black; font-weight:600; padding:10px 0; } /* 设置dataList样式 */ #box .bod .dataList{ margin:0 auto; } #box .bod .dataList ul{ list-style:none; padding:20px 20px; margin:0; } #box .bod .dataList ul li{ overflow:hidden; line-height: 30px; text-align:center; } #box .bod .dataList ul li .info{ display:block; width:230px; float:left; padding:10px 0; } #box .bod .dataList ul li .info .name{ display:block; font-size:14px; line-height:14px; float:left; text-align:left; } #box .bod .dataList ul li .info .data{ display:block; float:right; font-size:14px; line-height:14px; text-align:right; background-color:#FDFEF6; } #box .bod .dataList ul li .unit{ display:block; float:left; font-size:14px; line-height:14px; text-align:left; padding:10px 0; padding-left:10px; } </style> </head> <body> <div class="row clearfix"> <div class="col-md-12 column"> <div class="form-inline rgb" id="selector" style="text-align: center;">
开始时间:2017-01-01 结束时间:2017-12-31 机构:全部 就诊类型:全选 <br><br>
</div> </div> <div class="cl line_bottom"></div> <div class="h_10"></div> </div> <div class="row clearfix ct"><!-- height: 493px;width: 1168px --> <div id="box" class="col-md-12 column ct" style="height: 433px; text-align: center;"> <div class="bod" style="width:40%;height:400px;float:left; margin:0 1% 0 0;">
<span class="h3_style"><h3>乳腺癌患者负担</h3></span>
<div id="pie1" style="width: 95%; height: 80%; background-color: rgb(253, 254, 246); margin: 0px auto; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1538268342287">
<div style="position: relative; overflow: hidden; width: 433px; height: 320px; padding: 0px; margin: 0px; border-width: 0px; cursor: pointer;">
<canvas data-zr-dom-id="zr_0" width="433" height="320" style="position: absolute; left: 0px; top: 0px; width: 433px; height: 320px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
</div>
<div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px "Microsoft YaHei"; padding: 5px; left: 114px; top: 138px;">金额(元)/比率 <br>治疗费用 : 413090.58 (14.96%)</div>
<img src="http://localhost:8080/jeesite/static/images/747d9afa7af24635b8ede05eae9acd13/pie1.png" width="433" height="320" class="hide"></div></div><br><br><div class="bod" style="width:59%;height:400px;float:left; margin:0 0 0 0;"><span class="h3_style"><h3>乳腺癌患者负担</h3></span><div id="pie2" style="width: 95%; height: 80%; background-color: rgb(253, 254, 246); margin: 0px auto; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1538268342286"><div style="position: relative; overflow: hidden; width: 638px; height: 320px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="638" height="320" style="position: absolute; left: 0px; top: 0px; width: 638px; height: 320px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div>
<div style="position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1), top 0.4s cubic-bezier(0.23, 1, 0.32, 1); background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px "Microsoft YaHei"; padding: 5px; left: 404px; top: 92px;">金额(元)/比率 <br>药品费用 : 1442903.95 (52.26%)</div>
<img src="http://localhost:8080/jeesite/static/images/747d9afa7af24635b8ede05eae9acd13/pie2.png" width="624" height="312" class="hide"></div></div><br><br><div class="bod" style="width:40%;height:400px;float:left; margin:0 1% 0 0;"><span class="h3_style"><h3>乳腺癌患者负担</h3></span><div id="pie3" style="width: 95%; height: 80%; background-color: rgb(253, 254, 246); margin: 0px auto; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1538268342289">
<div style="position: relative; overflow: hidden; width: 433px; height: 320px; padding: 0px; margin: 0px; border-width: 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="433" height="320" style="position: absolute; left: 0px; top: 0px; width: 433px; height: 320px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas>
</div><div></div>
<img src="http://localhost:8080/jeesite/static/images/747d9afa7af24635b8ede05eae9acd13/pie3.png" width="433" height="320" class="hide"></div></div><br><br><div class="bod" style="width:59%;height:400px;float:left; margin:0 0 0 0;"><span class="h3_style"><h3>乳腺癌患者负担</h3></span><div id="pie4" style="width: 95%; height: 80%; background-color: rgb(253, 254, 246); margin: 0px auto; -webkit-tap-highlight-color: transparent; user-select: none; position: relative;" _echarts_instance_="ec_1538268342288">
<div style="position: relative; overflow: hidden; width: 638px; height: 320px; padding: 0px; margin: 0px; border-width: 0px;"><canvas data-zr-dom-id="zr_0" width="638" height="320" style="position: absolute; left: 0px; top: 0px; width: 638px; height: 320px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border-width: 0px;"></canvas></div><div></div>
<img src="http://localhost:8080/jeesite/static/images/747d9afa7af24635b8ede05eae9acd13/pie4.png" width="624" height="312" class="hide"></div></div><br><br></div> </div> </body></html> --NEXT.ITEM-BOUNDARY
// pie1.png的基本信息 Content-Location: http://localhost:8080/jeesite/static/images/747d9afa7af24635b8ede05eae9acd13/pie1.png Content-Type: image/png Content-Transfer-Encoding: base64 // pie.png的base64码 iVBORw0KGgoAAAANSUhEUgAAAbEAAAFACAYAAAAyHkINAAAMDUlEQVR4Xu3VgQkAAAgCwdx/6eZ4uCaQM3DnCBAgQIBAVGDR3GITIECAAIEzYp6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECBgxP0CAAAECWQEjlq1OcAIECBAwYn6AAAECBLICRixbneAECBAgYMT8AAECBAhkBYxYtjrBCRAgQMCI+QECBAgQyAoYsWx1ghMgQICAEfMDBAgQIJAVMGLZ6gQnQIAAASPmBwgQIEAgK2DEstUJToAAAQJGzA8QIECAQFbAiGWrE5wAAQIEjJgfIECAAIGsgBHLVic4AQIECDzpagFB29KMdgAAAABJRU5ErkJggg== // 此处删减一些其他图片基本信息
--NEXT.ITEM-BOUNDARY--
从开头那段Content-Base开始就不对劲了，他怎么是请求我的服务器呢？在看后面Content-Type为图片的Location竟然也是请求我服务器的图，难道这些放在word文档里的图片是请求我服务器的地址以链接的形式放在word中的？我尝试着把服务器关闭，果然，word中的图片也没了（文字还有）。恍然大悟，我知道为什么我不能删除服务器中的图片了，原来doc中的图是通过链接的形式去访问这些图的，当你把这些图删掉后，doc文档在用Conten-Loaction请求服务器访问这些图片时，就找不到了，所以doc中没有图片。当你把服务器关闭，doc再去访问Conten-Location地址获取图片也获取不到了，服务器都关了，上哪访问啊！知道了这个原因，我深感痛心，导出的word如果有图的话首先图不能被删，服务器也不能停，就这个原因足以使我放弃这个插件去完成这项功能，我的图都是由cavans转化的一些临时图，不是常用且必要的，导出到word后就不需要了，而且doc文档离开了我的服务器，图就不能显示，这是个大问题。如果直接手动使用复制粘贴的形式，doc文档中图是被保存在文档中，不会丢失的，但是使用这个插件导出的word里的图是使用链接的形式访问的。如果你导出的是一些文字（可以导出表格，本人已尝试，效果还不错）或者是常用图（不会改变，而且仅支持在服务器在启动时才可访问的word中的图），你完全可以使用以上插件。
只好另谋他路了。
前进时，请别遗忘了身后的脚印。
