因为最近做了范文网站需要,所以要下载为word文档,如果php进行处理,很吃后台服务器,所以想用前端进行实现。查询github发现,确实有这方面的插件。

js导出word文档所需要的两个插件:

1
2
FileSaver.js
jquery.wordexport.js

 首先引入:

1
2
3
4
<!--生成word!-->
<script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script src="http://www.nongpin88.com/skin/default/js/FileSaver.js"></script>
<script src="http://www.nongpin88.com/skin/default/js/jquery.wordexport.js"></script>

 html导出按钮:

1
<input type="button" value="导出word"  onclick="doWord()" style="color:#FFFFFF;width:70px;height:20px;border-radius: 5px;">

  js过滤部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script>
function doWord(){
document.getElementsByClassName('article-mp_msg')[0].style.display="none";
document.getElementsByClassName('article-msg')[0].style.padding="20px";
document.getElementsByClassName('article-title')[0].style.textAlign ="center";
document.getElementsByClassName('article-detail_inner')[0].style.margin ="auto";
    bdhtml=window.document.body.innerHTML; 
    sprnstr="<!--startprint-->";  
    eprnstr="<!--endprint-->";  
    prnhtml=bdhtml.substr(bdhtml.indexOf(sprnstr)+17);  
    prnhtml=prnhtml.substring(0,prnhtml.indexOf(eprnstr));  
    var re1 = /<img.*?(?:>|\/>)/gi;//匹配html标签的正则表达式,"g"是搜索匹配多个符合的内容
prnhtml = prnhtml.replace(re1,'');//执行替换成空字符
    var re2 = /<([a-z]+?)(?:\s+?[^>]*?)?>\s*?<\/\1>/ig;
    prnhtml = prnhtml.replace(re2,'');//执行替换成空字符
    window.document.body.innerHTML=prnhtml; 
    $(".article-detail_inner").wordExport('文章的标题');
   
}
</script>

  这样就搞定了,看看效果吧!

体验地址:攻略-第2页-9335游戏网

destoon上做纯js实现html指定页面导出word的更多相关文章

  1. js 图片压缩上传(纯js的质量压缩,非长宽压缩)

    下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...

  2. 前端图片压缩上传(纯js的质量压缩,非长宽压缩)

    此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> <html> <head&g ...

  3. 图片上传 纯js编码

    ie8测试始终不支持,非ie方法一.二都正常 <!DOCTYPE html> <html lang="zh"> <head> <meta ...

  4. js如何在指定页面跳转到另一指定页面

    要实现从一个页面A跳到另一个页面B,js实现就在A的js代码加跳转代码 JS跳转大概有以下几种方式: 第一种:(跳转到b.html)<script language="javascri ...

  5. pc或者微信上用pdf.js在线预览pdf和word

    最近项目要求pdf和word可以在线预览功能,pc端还好解决,但是微信端就有点坑了,pc端原来的思路是将文件转成base64,然后用html格式显示 ,但是微信端不支持, 这种方式就pass掉了,谷歌 ...

  6. JS 如何将 HTML 页面导出为多页 PDF

    参考链接:https://blog.csdn.net/pwc1996/article/details/70141383

  7. js jquery jquery.wordexport.js 实现导出word

    由于工作需要,将一个页面导出word文档,主要是简历!经过百度搜索之后,没找到结果,无奈之下只能求助Google,意外发现jquery一款插件可以实现这个功能!而且效果还算可以! 基本可以实现想要的功 ...

  8. js在table指定tr行上或底下添加tr行

    js在table指定tr行上或下面添加tr行 function onAddTR(trIndex)         {             var tb = document.getElementB ...

  9. F2工作流引擎之-纯JS Web在线可拖拽的流程设计器(八)

          Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回.传阅.转交,都可以非常方便快捷地实现,管理员 ...

  10. 纯JS Web在线可拖拽的流程设计器

    F2工作流引擎之-纯JS Web在线可拖拽的流程设计器 Web纯JS流程设计器无需编程,完全是通过鼠标拖.拉.拽的方式来完成,支持串行.并行.分支.异或分支.M取N路分支.会签.聚合.多重聚合.退回. ...

随机推荐

  1. 沉思篇-剖析Jetpack的ViewModel

    ViewModel做为架构组件的三元老之一,是实现MVVM的有力武器. ViewModel的设计目标 ViewModel的基本功能就是管理UI的数据.其实,从职责上来说,这又是对Activity和Fr ...

  2. Dapr v1.11 版本已发布

    Dapr是一套开源.可移植的事件驱动型运行时,允许开发人员轻松立足云端与边缘位置运行弹性.微服务.无状态以及有状态等应用程序类型.Dapr能够确保开发人员专注于编写业务逻辑,而不必分神于解决分布式系统 ...

  3. C# 集合类 入门

    什么是集合类? 集合类的位置在System.Collections.Generic命名空间中. 在我看来,集合类和大学里<数据结构>中所学的各种结构很像.集合类中包含Queue<T& ...

  4. 浅析switch和if(开发中这两者的优缺点;分析出优缺点在使用就能更确定自己需要使用哪个函数了)

    分析 Switch 相较于 if 的优点 1.switch 执行效率  高于  if 的执行效率 分析: switch是在编译阶段将子函数的地址和判断条件绑定了,只要直接将a的直接映射到子函数地址去执 ...

  5. 基于词袋(Bag of Words)和SVM的图片分类

    目录 摘要 源码及完整报告: 词袋(Bag of Words, BoW) 基于词袋模型的图片分类基本流程 多尺度空间极值点检测 关键点精确定位 关键点主方向计算 生成描述子 特征词典的生成 SVM分类 ...

  6. Unity的IGenerateNativePluginsForAssemblies:深入解析与实用案例

    Unity IGenerateNativePluginsForAssemblies Unity是一款非常流行的游戏引擎,它支持多种平台,包括Windows.Mac.Linux.Android.iOS等 ...

  7. Net 编译器平台--- Roslyn Scripting APIs

    引言 上一篇中.Net 编译器平台 --- Roslyn,介绍了Roslyn的各项功能,包括公开API,使用语法,使用语义,使用工作区等功能. 那么回到上一篇中提到的问题,实现类似这样的功能(以下代码 ...

  8. 活动干货|泛娱乐App出海东南亚深度解析

    泛娱乐社交出海,还有哪些机会点? 为助力出海企业把握增长红利,即构科技特开设<出海"构"有料--泛娱乐出海系列直播>,从热门国家的特性洞察.玩法解决方案到技术服务经验分 ...

  9. 即构SDK5月迭代:新增声道选择、网络探测、智能消噪等功能,打造更优的视听体验

    即构SDK5月份的迭代更新如期而至,本月互动视频(LiveRoom).实时语音(AudioRoom)两大SDK以及录制插件(PlayRecord)均有新功能上线.新增的声道选择.变调控制.智能消噪.枚 ...

  10. (占坑编辑中)hexo博客github page更换域名

    hexo博客github page更换域名 檗科下的Cname文件一定要改为最近的域名