JS Export HTML to Word

Source: Internet
Author: User

The drawback is that the exported Word document does not have a style in HTML and is appropriate for exporting the HTML of the article class

1, the introduction of documents (below the plugin source code)

<script type= "Text/javascript" src= ". /libs/jquery/1.11.1/jquery-1.11.1.min.js "></script>  //jquery Version No restrictions
<script type= "Text/javascript" src= ". /libs/jquery/filesaver.js "></script><script type=" Text/javascript "src=". /libs/jquery/jquery.wordexport.js "></script>

2. Click events, use Plugins, export word

$ (function () {$ ("button"). Click (function () {        $ ("#content"). Wordexport ("FileName");                  FileName is the name of the exported Word file, content is the HTML content container        Html2canvas (document.getElementById ("content") to be exported, {    Onrendered:function (canvas) {        //renders HTML into canvas by Html2canvas, then obtains the picture data        var imgdata = Canvas.todataurl (' image /jpeg ');        Initialize the PDF, set the corresponding format        var doc = new Jspdf ("P", "MM", "A4");        Doc.setfillcolor (0,0,0);        Here is the A4 paper size        doc.addimage (imgdata, ' JPEG ', 0, 0,210,297);        The output holds a PDF        doc.save (' content.pdf ') named content;    } });})

3. Note: If the HTML content to be exported is in an IFRAME and contains a picture, you need to set the cross-domain attribute in the HTML img tag: crossorigin= "Anonymous" otherwise the corresponding picture in the exported word will not appear

4. Plugin Source code

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/FileSa Ver.js/blob/master/license.md *//*global self *//*jslint bitwise:true, indent:4, Laxbreak:true, Laxcomma:true, Smartta Bs: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 unsupportedif (typeof view = = = "undefined" | | typeof Navigator! = = "undefined" &&/msie [1-9]\./.test (navigator.useragent)) {return;} var doc = view.document//Only get URLs when necessary in case blob.js hasn ' t overridden it yet, Get_url = function () {R Eturn 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 Fundame Ntally broken as there is no "downloadfinished" event to subscribe to, Arbitrary_revoke_timeout = $ * +/in MS, Revo ke = function (file) {var revoker = function () {if (typeof file = = = "string") {//file is an object Urlget_url (). revokeobj Ecturl (file);} else {//file is a filefile.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 Lis Tener = = = "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 would automatically convert UTF-16 U+feff to EF BB bfif (/^\s* (?: Text\/\s*|appli Cation\/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 Urlsvar filesaver = this, type = blob.type, force = Type = = = Fo Rce_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 urlsvar 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 dispatchingfilesaver.readystate = Filesaver. Done;dispatch_all ();}; Reader.readasdataurl (BLOB); filesaver.readystate = Filesaver. Init;return;} Don ' t create more object URLs than Neededif (!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 do Es not allow window.open, see https://developer.apple.com/library/safari/documentation/Tools/Conceptual/ Safariextensionguide/workingwithwindowsandtabs/workingwithwindowsandtabs.htmlview.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);d ispatch_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 (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 ' was undefined in Firefox for Android content script context//and ' This ' was nsicontentframemessagemanager//with An attribute ' content ' corresponds to the windowif (typeof module!== "undefined" && module.exports) {module . Exports.saveas = SaveAs;} else if ((typeof define!== "undefined" && define!== null) && (DEFINE.AMD!== null)) {define ([], functi  On () {return saveAs; });}

Jquery.wordexport.js

if (typeof jQuery!== "undefined" && typeof saveAs!== "undefined") {(function ($) {$.fn.wordexport = f            Unction (filename) {filename = typeof filename!== ' undefined '? FileName: "Jquery-word-export"; var static = {mhtml: {top: "mime-version:1.0\ncontent-base:" + location.href + "\nco ntent-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

  

JS Export HTML to Word

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.