因为最近做了范文网站需要,所以要下载为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. Linux 线程传递参数

    1 #include <stdio.h> 2 #include <stdlib.h> 3 #include <pthread.h> 4 #include <u ...

  2. 识别一切模型RAM(Recognize Anything Model)及其前身 Tag2Text 论文解读

    总览 大家好,我是卷了又没卷,薛定谔的卷的AI算法工程师「陈城南」~ 担任某大厂的算法工程师,带来最新的前沿AI知识和工具,欢迎大家交流~ 继MetaAI 的 SAM后,OPPO 研究院发布识别一切模 ...

  3. 2023-06-22:一所学校里有一些班级,每个班级里有一些学生,现在每个班都会进行一场期末考试 给你一个二维数组 classes ,其中 classes[i] = [passi, totali] 表

    2023-06-22:一所学校里有一些班级,每个班级里有一些学生,现在每个班都会进行一场期末考试 给你一个二维数组 classes ,其中 classes[i] = [passi, totali] 表 ...

  4. mysql截取函数,拼接函数,大写函数例子

    题目:这题目是牛客网sql题,因为牵扯到3个函数,都是自己没怎么用过的,所以记录一下. 答案:是别人的解题思路 可以看出在mysql中提供的函数可以供我们使用来操作字段,非常的方便

  5. LSP协议被劫持,导致无法上网

    QQ无法登录,网页打不开 用火绒的断网修复 说已经修复了 结果屁用没有 然后找的百度经验 管理员打开命令行窗口 输入 netsh winsock reset catalog 重启即生效

  6. Centos7 升级 Kubernetes(k8s) 集群

    目录 一.系统环境 二.前言 三.Kubernetes(k8s) 集群升级简介 四.升级master主节点 4.1 升级kubeadm 4.2 升级各个组件 4.3 升级 kubelet 和 kube ...

  7. MybatisPlus的各种查询方法

    MybatisPlus的各种查询方法 合并转载于https://my.oschina.net/u/241218/blog/1838534/和https://my.oschina.net/u/24275 ...

  8. quarkus实战之四:远程热部署

    将本地的改动极速同步到远程服务端,并自动生效,掌握此技能,开发调试会更高效 欢迎访问我的GitHub 这里分类和汇总了欣宸的全部原创(含配套源码):https://github.com/zq2599/ ...

  9. 使用调试工具调试博图TCP连接所遇到的问题

    PLC端使用的指令 PLC为服务器端,电脑为客户端,以上为服务器与客户端的配置参数 启动连接后连接成功,PLC的IP地址也可以ping通 ------------------------------- ...

  10. AcWing 4799. 最远距离题解

    请看: 我们规定,如果一个无向连通图满足去掉其中的任意一条边都会使得该图变得不连通,则称该图为有效无向连通图. 去掉一条边就不连通了,这不就是树吗? (否则如果是图(就是不是树的图)的话,一定有环,拆 ...