因为最近做了范文网站需要,所以要下载为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. malloc/free 与 new/delete

    malloc/free与new/delete表达式的区别?相同点: 都是用来申请堆空间不同点: 1. malloc/free是库函数; new/delete是表达式 2. malloc开空间时,并不会 ...

  2. 这就是艺术,优雅的二维码生成器「GitHub 热点速览」

    平时如果没有需要一般那团黑乎乎的二维码,估计路过的人看见第一眼就不会再看第二眼.但是假若,它是个帅哥靓妹,估计就不同了,更别提像是艺术画一样,将编码图案融入到画里的二维码生成器 qrbtf 作者的新作 ...

  3. CSS3实现3D效果的图片墙

    先来看一下效果:http://39.105.101.122/myhtml/CSS/transform_3D/img_3D.html 目前没有做IE的兼容,在谷歌浏览器里面可以看到效果 布局结构: &l ...

  4. 第二章 VM与Linux的安装

    1. VMWare 安装 ​​ ‍ ​​ ‍ ‍ 2. CentOS 安装 ‍ 安装网址:https://blog.csdn.net/qq_41819965/article/details/11118 ...

  5. 逍遥自在学C语言 | 指针陷阱-空指针与野指针

    前言 在C语言中,指针是一种非常强大和灵活的工具,但同时也容易引发一些问题,其中包括空指针和野指针. 本文将带你了解这两个概念的含义.产生原因以及如何避免它们所导致的问题. 一.人物简介 第一位闪亮登 ...

  6. Python Flask - 快速构建Web应用详解

    本文将详细探讨Python Flask Web服务.我将首先简单介绍Flask,然后将逐步进入Flask中的路由.模板.表单处理以及数据库集成等高级概念,目标是能够让大家了解并掌握使用Flask来创建 ...

  7. Spring Boot 整合组件套路

    自动配置类 Spring Boot 在整合任何一个组件的时候都会先添加一个依赖 starter,比如整合 MybatisPlus 有一个 mybatis-plus-boot-starter,如下: & ...

  8. 前端查询天气的html

    <html> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script&g ...

  9. AutoCAD 2024下载及安装教程

    安装教程 演示操作系统:Windows 11 *安装前请关闭所有杀毒软件,避免报错 1.解压[CAD2024.zip] 2.打开解压的[CAD2024]文件夹,打开[Setup]文件夹,运行[Setu ...

  10. 2023-08-02:给定一棵树,一共有n个点, 每个点上没有值,请把1~n这些数字,不重复的分配到二叉树上, 做到 : 奇数层节点的值总和 与 偶数层节点的值总和 相差不超过1。 返回奇数层节点分配

    2023-08-02:给定一棵树,一共有n个点, 每个点上没有值,请把1~n这些数字,不重复的分配到二叉树上, 做到 : 奇数层节点的值总和 与 偶数层节点的值总和 相差不超过1. 返回奇数层节点分配 ...