• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > HTML怎么导出生成word文档?

HTML怎么导出生成word文档?

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含word,HTML,文档等相关知识,匿名希望在学习及工作中可以帮助到您
前言:

项目开发中遇到了需要将HTML页面的内容导出为一个word文档,所以有了这边随笔。

当然,项目开发又时间有点紧迫,第一时间想到的是用插件,所以百度了下。下面就介绍两个导出word文档的方法。

法一:通过jquery.wordexport.js导出word

备注:兼容IE9以上

大概浏览了下jquery.wordexport.js插件的代码,了解到了通过该插件可以导出文本和图片,而图片首先通过canvas的形式

绘制,文本则需要再依赖FileSaver.js插件,FileSaver.js插件则主要通过H5的文件操作新特性new Blob()和new FileReader()

来实现文本的导出。

插件源码:

FileSaver.js

  1 /* FileSaver.js  
  2  * A saveAs() FileSaver implementation.  
  3  * 1.3.2  
  4  * 2016-06-16 18:25:19  
  5  *  
  6  * By Eli Grey,   
  7  * License: MIT  
  8  *   See   
  9  */ 
  10  
  11 /*global self */ 
  12 /*jslint bitwise: true, indent: 4, laxbreak: true, laxcomma: true, smarttabs: true, plusplus: true */ 
  13  
  14 /*! @source  */ 
  15  
  16 var saveAs = saveAs || (function(view) { 
  17         "use strict"; 
  18         // IE <10 is explicitly unsupported 
  19         if (typeof view === "undefined" || typeof navigator !== "undefined" && /MSIE [1-9]\./.test(navigator.userAgent)) { 
  20             return; 
  21         } 
  22         var 
  23             doc = view.document 
  24         // only get URL when necessary in case Blob.js hasn't overridden it yet 
  25             , get_URL = function() { 
  26                 return view.URL || view.webkitURL || view; 
  27             } 
  28             , save_link = doc.createElementNS("", "a") 
  29             , can_use_save_link = "download" in save_link 
  30             , click = function(node) { 
  31                 var event = new MouseEvent("click"); 
  32                 node.dispatchEvent(event); 
  33             } 
  34             , is_safari = /constructor/i.test(view.HTMLElement) 
  35             , is_chrome_ios =/CriOS\/[\d]+/.test(navigator.userAgent) 
  36             , throw_outside = function(ex) { 
  37                 (view.setImmediate || view.setTimeout)(function() { 
  38                     throw ex; 
  39                 }, 0); 
  40             }
  41             , force_saveable_type = "application/octet-stream" 
  42         // the Blob API is fundamentally broken as there is no "downloadfinished" event to subscribe to 
  43             , arbitrary_revoke_timeout = 1000 * 40 // in ms 
  44             , revoke = function(file) { 
  45                 var revoker = function() { 
  46                     if (typeof file === "string") { // file is an object URL 
  47                         get_URL().revokeObjectURL(file); 
  48                     } else { // file is a File 
  49                         file.remove(); 
  50                     } 
  51                 }; 
  52                 setTimeout(revoker, arbitrary_revoke_timeout); 
  53             } 
  54             , dispatch = function(filesaver, event_types, event) { 
  55                 event_types = [].concat(event_types); 
  56                 var i = event_types.length; 
  57                 while (i--) { 
  58                     var listener = filesaver["on" + event_types[i]]; 
  59                     if (typeof listener === "function") { 
  60                         try { 
  61                             listener.call(filesaver, event || filesaver); 
  62                         } catch (ex) { 
  63                             throw_outside(ex); 
  64                         } 
  65                     } 
  66                 } 
  67             } 
  68             , auto_bom = function(blob) { 
  69                 // prepend BOM for UTF-8 XML and text/* types (including HTML) 
  70                 // note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF 
  71                 if (/^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) { 
  72                     return new Blob([String.fromCharCode(0xFEFF), blob], {type: blob.type}); 
  73                 } 
  74                 return blob; 
  75             } 
  76             , FileSaver = function(blob, name, no_auto_bom) { 
  77                 if (!no_auto_bom) { 
  78                     blob = auto_bom(blob); 
  79                 } 
  80                 // First try a.download, then web filesystem, then object URLs 
  81                 var 
  82                     filesaver = this 
  83                     , type = blob.type 
  84                     , force = type === force_saveable_type 
  85                     , object_url 
  86                     , dispatch_all = function() { 
  87                         dispatch(filesaver, "writestart progress write writeend".split(" ")); 
  88                     } 
  89                 // on any filesys errors revert to saving with object URLs 
  90                     , fs_error = function() { 
  91                         if ((is_chrome_ios || (force && is_safari)) && view.FileReader) { 
  92                             // Safari doesn't allow downloading of blob urls 
  93                             var reader = new FileReader(); 
  94                             reader.onloadend = function() { 
  95                                 var url = is_chrome_ios ? reader.result : reader.result.replace(/^data:[^;]*;/, 'data:attachment/file;'); 
  96                                 var popup = view.open(url, '_blank'); 
  97                                 if(!popup) view.location.href = url; 
  98                                 url=undefined; // release reference before dispatching 
  99                                 filesaver.readyState = filesaver.DONE;
  100                                 dispatch_all();
  101                             };
  102                             reader.readAsDataURL(blob);
  103                             filesaver.readyState = filesaver.INIT;
  104                             return;
  105                         }
  106                         // don't create more object URLs than needed
  107                         if (!object_url) {
  108                             object_url = get_URL().createObjectURL(blob);
  109                         }
  110                         if (force) {
  111                             view.location.href = object_url;
  112                         } else {
  113                             var opened = view.open(object_url, "_blank");
  114                             if (!opened) {
  115                                 // Apple does not allow window.open, see 
  116                                 view.location.href = object_url;
  117                             }
  118                         }
  119                         filesaver.readyState = filesaver.DONE;
  120                         dispatch_all();
  121                         revoke(object_url);
  122                     }
  123                     ;
  124                 filesaver.readyState = filesaver.INIT;
  125 
  126                 if (can_use_save_link) {
  127                     object_url = get_URL().createObjectURL(blob);
  128                     setTimeout(function() {
  129                         save_link.href = object_url;
  130                         save_link.download = name;
  131                         click(save_link);
  132                         dispatch_all();
  133                         revoke(object_url);
  134                
  


 

您可能想查找下面的文章:

  • HTML怎么导出生成word文档?
  • 2016年度——React.js 最佳实践

相关文章

  • 2017-08-06自定义html标记替换html5新增元素
  • 2017-08-06html5中为audio标签增加停止按钮动作实现方法
  • 2017-08-06html5的自定义data-*属性与jquery的data()方法的使用
  • 2017-08-06html5 兼容IE6结构的实现代码
  • 2018-12-03详细介绍HTML5简易在线画图工具的实现案例
  • 2017-08-06Html5实现二维码扫描并解析
  • 2018-12-03了解HTML 5 History API的”前生今世”
  • 2018-12-03HTML5自学笔记
  • 2018-12-03动手打造html5俄罗斯方块的(图文)
  • 2018-12-03AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • select下拉框的右边怎么增加提示图标
    • 详解HTML5移动端音频与视频问题及解决方案
    • HTML5的video标签的浏览器兼容性增强方案分享
    • HTML5实现文件断点续传的方法
    • html5拖曳操作 HTML5实现网页元素的拖放操作_html5教程技巧
    • 如何解决微信通过H5页面直接打开本地app
    • HTML5是什么 HTML5是什么意思 HTML5简介_html5教程技巧
    • 关于动画演示的文章推荐
    • 在Web项目中错误代码整理
    • html5中设置或返回音频/视频是否默认静音的属性defaultMuted

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有