項目新增功能：添加頁面導出功能，要求要有頁面的樣式。網上百度有很多使用前端插件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碼 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 // 此處刪減一些其他圖片基本信息
--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中的圖），你完全可以使用以上插件。
只好另謀他路了。