HTML导出生成词文档的方法有哪些 - 行业资讯 - 肥雀云

　　介绍

小编给大家分享一下HTML导出生成词文档的方法有哪些,希望大家阅读完这篇文章后大所收获、下面让我们一起去探讨吧!

<强>

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

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

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

备注:兼容IE9以上

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

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

来实现文本的导出。

插件源码:

filesave。js

 1/* FileSaver.js
　　2 * saveAs () filesave实现。
　　3 * 1.3.2
　　4 * 2016-06-16 18:25:19
　　5 *
　　6 *以利灰色,
　　7 *许可:麻省理工学院
　　8 *看到
　　9 */10
　　11/*全球自我*/12/* jslint位:真的,缩进:4,laxbreak:真的,laxcomma:真的,smarttabs:真的,plusplus:真*/13
　　14/* !@source */15
　　16 var saveAs=saveAs | |(函数(视图){
　　17“使用strict";
　　18//IE & lt; 10是明确不支持的
　　19如果(typeof视图===皍ndefined"| | typeof领航员!==皍ndefined",,/MSIE \ [1 - 9]。/test (navigator.userAgent)) {
　　20返回;
　　21}
　　22 var
　　23 doc=view.document
　　24//> 
  jquery.wordexport视图代码。js 
  1如果(typeof jQuery !==皍ndefined",,typeof saveAs !==皍ndefined") {
　　2(函数(美元){
　　3 .fn美元。wordExport=函数(文件名){
　　4文件名=typeof文件名!==& # 39;未定义# 39;？ 文件名:“jQuery-Word-Export";
　　5 var静态={
　　6 mhtml: {
　　7:“Mime-Version: 1.0 \ nContent-Base:“+位置。href +“\ nContent-Type: Multipart/相关;边界=\“NEXT.ITEM-BOUNDARY \“type=\“text/html \“\ n \ n——下一个。ITEM-BOUNDARY \ nContent-Type: text/html;utf - 8字符集=\“\“\ nContent-Location:“+位置。href +“\ n \ n< !DOCTYPE html> \ n“
　　8头:“& lt; head> \ n<元http-equiv=\“内容类型\“;内容=\“text/html;utf - 8字符集=\“祝辞\ n \ n \ n"
　　9的身体:“& lt; body> _body_“
　　10}
　　11};
　　12={var选项
　　13 maxWidth: 624
　　14个};
　　前15//克隆所选元素操纵它
　　16=$ var标记(这).clone ();
　　17
　　18//删除隐藏元素的输出
　　19 markup.each(函数(){
　　20自我=$ var(这个);
　　21如果(意念(& # 39;:隐藏# 39;))
　　22 self.remove ();
　　23});
　　24
　　25//嵌入所有图片使用数据的url
　　26 var=图像数组();
　　27 var img=markup.find (& # 39; img # 39;);
　　28 (var=0;我& lt;img.length;我+ +){
　　29//计算输出图像的尺寸
　　30 w=Math.min var (img[我]。宽度,options.maxWidth);
　　31日var h=img[我]。高度* (w/img[我].width);
　　32//创建画布将图像转换为数据的URL
　　33画布var=document.createElement (“CANVAS");
　　34岁的画布。宽度=w;
　　35画布。身高=h;
　　36个//帆布画图像
　　37 var上下文=canvas.getContext (& # 39; 2 d # 39;);
　　38上下文。drawImage (img[我],0,0,w h);
　　39//URL编码的图像获取数据
　　40 var uri=canvas.toDataURL(“图像/png/jpg");
　　41美元(img[我]).attr (“src", img[我].src);
　　42个img[我]。宽度=w;
　　43个img[我]。身高=h;
　　44//编码图像保存到数组中
　　[我]={45图像
　　46个类型:uri.substring (uri.indexOf (“:”) + 1, uri.indexOf (“;”)),
　　47个编码:uri.substring (uri.indexOf (“;”) + 1, uri.indexOf (“”)),
　　48地点:$ (img[我]).attr (“src"),
　　49个数据:uri.substring (uri.indexOf (“、“) + 1)
　　50个};
　　51}
　　52
　　53//准备mhtml与图像数据文件的底部
　　54 var mhtmlBottom=癨 n";
　　55 (var=0;我& lt;images.length;我+ +){
　　56 mhtmlBottom +=啊狽EXT.ITEM-BOUNDARY \ n";
　　57 mhtmlBottom +=澳谌荻ㄎ?“;[我]+图像。位置+“\ n";
　　58 mhtmlBottom +=? type:“;[我]+图像。类型+“\ n";
　　59 mhtmlBottom +=癈ontent-Transfer-Encoding:“;[我]+图像。编码+“\ n \ n";
　　[我]60 mhtmlBottom +=图像。数据+“\ n \ n";
　　61年              }
　　62年mhtmlBottom +=癗EXT.ITEM-BOUNDARY——“;
　　63
　　64//TODO:从包括加载css样式表
　　65
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　null
　　nullHTML导出生成词文档的方法有哪些