html页面导出word文档
来源：互联网 发布：动画短片制作软件 编辑：程序博客网 时间：2024/05/22 06:42
本文将为关注织梦者的朋友提供的是的将HTML导出生成word文档相关教程，具体实例代码请看下文:
前言：项目开发中遇到了需要将HTML页面的内容导出为一个word文档，所以有了这边随笔。
当然，项目开发又时间有点紧迫，第一时间想到的是用插件，所以百度了下。下面就介绍两个导出word文档的方法。
法一：通过jquery.wordexport.js导出word备注：兼容IE9以上
大概浏览了下jquery.wordexport.js插件的代码，了解到了通过该插件可以导出文本和图片，而图片首先通过canvas的形式
绘制，文本则需要再依赖FileSaver.js插件，FileSaver.js插件则主要通过H5的文件操作新特性new Blob()和new FileReader()
来实现文本的导出。
插件源码：
1.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 windowif (typeof module !== "undefined" && module.exports) { module.exports.saveAs = saveAs;} else if ((typeof define !== "undefined" && define !== null) && (define.amd !== null)) { define([], function() { return saveAs; });}插件源码2.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\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)"); }}View Code插件调用：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>生成word文档</title> </head> <body lang=ZH-CN style='tab-interval:21.0pt'> <div class="word"> <p align="center" style="font-size:20pt;font-weight:bold;">JS导出Word文档</p> </div> <input type="button" value="导出word"> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> <script type="text/javascript" src="js/FileSaver.js"></script> <script type="text/javascript" src="js/jquery.wordexport.js"></script> <script> $(function(){ $("input[type='button']").click(function(event) { $(".word").wordExport('生成word文档'); }); }) </script> </body> </html>直接调用wordExport()接口就可以导出word文档，传的参数为导出的word文件名。
补充：
通过我们常规写的外联样式设置样式是无效的，通过个人的实践发现需要写内联样式才能生效，而单位也需要按照word的配置
单位pt设置。
而jquery.wordexport.js插件是要配置了个style样式让我们补充样式设置的：
但是个人实践了下，设置的样式却无法生效，只能通过内联设置才生效。法二：通过百度js模板引擎生成word文档
主要是通过js模板设置对应的标签，然后XDoc.to(baidu.template())导出word，而通过百度js模板引擎的好处是也可以导出PDF文件。
完整demo：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script type="text/javascript" src="http://www.xdocin.com/xdoc.js"></script> <script type="text/javascript" src="http://www.xdocin.com/baiduTemplate.js"></script> <style> .head{ font-size: 29px; display: block; } .content{ display: block; } </style> </head> <body> <input type="button" onclick="gen('pdf')" value="生成PDF"/> <input type="button" onclick="gen('docx')" value="生成Word"/> <br/> <script id="tmpl" type="text/html"> <xdoc version="A.3.0"> <body> <para heading="1" lineSpacing="28"> <text class="head" valign="center" fontName="标宋" fontSize="29"><%=title%></text> </para> <para> <img src="<%=img%>" sizeType="autosize"/> </para> <para lineSpacing="9"> <text class="content" fontName="仿宋" fontSize="18"><%=content%></text> </para> </body> </xdoc> </script> <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script> <script type="text/javascript"> var type="docx";//pdf var data = { title: "导出"+type+"文件", img: "http://www.wordlm.com/uploads/allimg/130101/1_130101000405_1.jpg", content: "我这样就可以导出"+type+"格式的文件了，是不是很方便", }; function renderTemplate(){ var template=$("#tmpl").html(); var html=template.replace(/<%=title%>/,data.title) .replace(/<%=img%>/,data.img) .replace(/<%=content%>/,data.content); $("body").append(html); } renderTemplate(); function gen(type) { XDoc.to(baidu.template('tmpl', data), type, {}, "_blank"); } console.log('http://www.xdocin.com/xml.html'); </script> </body> </html>这里我通过renderTemplate函数叫js模板渲染到HTML中，实现了文本的展示和导出内容的结合。而因为这里导出的word文档是需要特别设置样式的，所以在页面样式展示下我们可以通过添加.class的方式设置。
附部分导出word文档样式设置：
更多参考：
FileSave.js:https://github.com/eligrey/FileSaver.js
百度导出文档模板：http://www.xdocin.com/xml.html
通过本文的学习希望对您了解和学习html的相关知识有一些好的帮助.感谢关注织梦者.我们将为您收集更多更好的html教程.
原文参考地址：http://www.zhimengzhe.com/HTMLjiaocheng/342282.html
http://www.cnblogs.com/ll409546297/p/6634776.html
阅读全文
0 0
- html页面导出word文档
- html导出 word文档教程
- C#页面导出word文档
- aspx页面导出成word文档
- jsp页面中导出word文档
- 清理由Word导出的HTML文档的JS脚本
- WEB页面导出为EXCEL/word文档的方法
- WEB页面导出为WORD,EXCEL文档的方法
- 打印系列 —— web页面导出成word文档
- ASP.NET导出页面内容至word文档
- WEB页面导出为EXCEL、word文档的方法(完整版)
- WEB页面导出为Word文档后分页的方法
- 使用js实现页面导出到word文档
- ASP.NET导出页面内容至word文档
- Javascript实现Html页面指定区域导出WORD
- java页面导出excel实例，java页面导出word文档实例
- datagridview 导出word文档
- php 导出word 文档
- 如何更改CPropertySheet的背景色
- zookeeper的安装目录调整
- caffe安装系列——安装python依赖包
- 编译型语言与解释型语言简析
- dp2之多重背包
- html页面导出word文档
- JavaScript计算精度问题解决方案
- 本地搭建SVN局域网服务器
- 谈谈代理外国软件的事
- 论一个优秀尘盒对扫地机器人的重要性
- 八大种排序算法【java实现】
- 一个图文混排问题的解决过程
- c#中接口的作用
- hightchart饼状图图例、内容放置在饼上
