zoukankan      html  css  js  c++  java
  • js将html导出word

    先说明缺点,导出的word文档没有html中的样式、适合导出文章类的html

    1、引入文件(下面有插件源码)  

    <script type="text/javascript" src="../libs/jquery/1.11.1/jquery-1.11.1.min.js"></script>  //jquery版本没有限制
    <script type="text/javascript" src="../libs/jquery/fileSaver.js"></script> <script type="text/javascript" src="../libs/jquery/jquery.wordexport.js"></script>

    2、点击事件、使用插件、导出word

    $(function(){
      $("button").click(function() {
            $("#content").wordExport("fileName");                  //fileName为导出的word文件的命名,content为要导出的html内容容器
            html2canvas(document.getElementById("content"), {
    	    onrendered: function(canvas) {
    	        //通过html2canvas将html渲染成canvas,然后获取图片数据
    	        var imgData = canvas.toDataURL('image/jpeg');
    
    	        //初始化pdf,设置相应格式
    	        var doc = new jsPDF("p", "mm", "a4");
    
    	        doc.setFillColor(0,0,0);
    
    	        //这里设置的是a4纸张尺寸
    	        doc.addImage(imgData, 'JPEG', 0, 0,210,297);
    
    	        //输出保存命名为content的pdf
    	        doc.save('content.pdf');
    	    }
      });
    })
    

    3、注意:如果要导出的html内容在iframe中,并且含有图片,需要在html的img标签中设置跨域属性:crossorigin="anonymous" 否则导出的word中对应图片会不显示

    4、插件源码   

    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.wordexport.js

    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)");
        }
    }
    

      

  • 相关阅读:
    js中的原生Ajax和JQuery中的Ajax
    this的用法
    static的特性
    时政20180807
    java compiler没有1.8怎么办
    Description Resource Path Location Type Java compiler level does not match the version of the installed Java project facet Unknown Faceted Project Problem (Java Version Mismatch)
    分词器
    [数算]有一个工程甲、乙、丙单独做,分别要48天、72天、96天完成
    一点感想
    解析Excel文件 Apache POI框架使用
  • 原文地址:https://www.cnblogs.com/cutone/p/7690818.html
Copyright © 2011-2022 走看看