• 使用插件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*;.*charsets*=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
    Content-Base: " + location.href + "
    Content-Type: Multipart/related; boundary="NEXT.ITEM-BOUNDARY";type="text/html"
    
    --NEXT.ITEM-BOUNDARY
    Content-Type: text/html; charset="utf-8"
    Content-Location: " + location.href + "
    
    <!DOCTYPE html>
    <html>
    _html_</html>",
                        head: "<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <style>
    _styles_
    </style>
    </head>
    ",
                        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 = "
    ";
                for (var i = 0; i < images.length; i++) {
                    mhtmlBottom += "--NEXT.ITEM-BOUNDARY
    ";
                    mhtmlBottom += "Content-Location: " + images[i].location + "
    ";
                    mhtmlBottom += "Content-Type: " + images[i].type + "
    ";
                    mhtmlBottom += "Content-Transfer-Encoding: " + images[i].encoding + "
    
    ";
                    mhtmlBottom += images[i].data + "
    
    ";
                }
                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 Content-Base: " + location.href + " Content-Type: Multipart/related; boundary="NEXT.ITEM-BOUNDARY";type="text/html" --NEXT.ITEM-BOUNDARY Content-Type: text/html; charset="utf-8" Content-Location: " + location.href + " <!DOCTYPE html> <html> _html_</html>", head: "<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style> _styles_ </style> </head> ", 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 = " "; for (var i = 0; i < images.length; i++) { mhtmlBottom += "--NEXT.ITEM-BOUNDARY "; mhtmlBottom += "Content-Location: " + images[i].location + " "; mhtmlBottom += "Content-Type: " + images[i].type + " "; mhtmlBottom += "Content-Transfer-Encoding: " + images[i].encoding + " "; mhtmlBottom += images[i].data + " "; } 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() + "&nbsp;&nbsp;"; }); 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;
        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&nbsp;&nbsp;结束时间:2017-12-31&nbsp;&nbsp;机构:全部&nbsp;&nbsp;就诊类型:全选&nbsp;&nbsp;<br><br>
    </
    div> </div> <div class="cl line_bottom"></div> <div class="h_10"></div> </div> <div class="row clearfix ct"><!-- height: 493px; 1168px --> <div id="box" class="col-md-12 column ct" style="height: 433px; text-align: center;"> <div class="bod" style="40%;height:400px;float:left; margin:0 1% 0 0;">
    <
    span class="h3_style"><h3>乳腺癌患者负担</h3></span>
    <
    div id="pie1" style=" 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; 433px; height: 320px; padding: 0px; margin: 0px; border- 0px; cursor: pointer;">
    <
    canvas data-zr-dom-id="zr_0" width="433" height="320" style="position: absolute; left: 0px; top: 0px; 433px; height: 320px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border- 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- 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; 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="59%;height:400px;float:left; margin:0 0 0 0;"><span class="h3_style"><h3>乳腺癌患者负担</h3></span><div id="pie2" style=" 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; 638px; height: 320px; padding: 0px; margin: 0px; border- 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="638" height="320" style="position: absolute; left: 0px; top: 0px; 638px; height: 320px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border- 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- 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px/21px &quot;Microsoft YaHei&quot;; 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="40%;height:400px;float:left; margin:0 1% 0 0;"><span class="h3_style"><h3>乳腺癌患者负担</h3></span><div id="pie3" style=" 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; 433px; height: 320px; padding: 0px; margin: 0px; border- 0px; cursor: default;"><canvas data-zr-dom-id="zr_0" width="433" height="320" style="position: absolute; left: 0px; top: 0px; 433px; height: 320px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border- 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="59%;height:400px;float:left; margin:0 0 0 0;"><span class="h3_style"><h3>乳腺癌患者负担</h3></span><div id="pie4" style=" 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; 638px; height: 320px; padding: 0px; margin: 0px; border- 0px;"><canvas data-zr-dom-id="zr_0" width="638" height="320" style="position: absolute; left: 0px; top: 0px; 638px; height: 320px; user-select: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 0px; margin: 0px; border- 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中的图),你完全可以使用以上插件。

    只好另谋他路了。

     

    前进时,请别遗忘了身后的脚印。
  • 相关阅读:
    数组及其方法
    Web Worker
    nodejs输入输出
    head标签中的meta
    对象副本的拷贝
    bower指南(一)
    gulp指南(一)
    云服务器搭建
    http协议简单介绍(转)
    使用traits
  • 原文地址:https://www.cnblogs.com/liudaihuablogs/p/9726700.html
Copyright © 2020-2023  润新知