纯js实现html指定页面导出word

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

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

FileSaver.js
jquery.wordexport.js

首先引入:

<!--生成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导出按钮:

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

 js过滤处理部分:

<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>

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

演示效果:学校班主任安全工作计划模板_醉学网 (nongpin88.com)icon-default.png?t=N7T8http://www.nongpin88.com/fanwen/2713580.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/136612.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

使用香橙派学习 Linux的守护进程

Q&#xff1a;什么是守护进程 A&#xff1a;Linux Daemon&#xff08;守护进程&#xff09;是运行在后台的一种特殊进程。它独立于控制终端并且周期性地执行 某种任务或等待处理某些发生的事件。它不需要用户输入就能运行而且提供某种服务&#xff0c;不是对整个系统就是对某个…

简述TCP三次握手,四次挥手

前言&#xff1a; 通常大多数认为三次握手、四次挥手是HTTP协议产生的。这是一个错误的认知&#xff0c;实际上HTTP协议并不参与握手以及挥手过程&#xff0c;三次握手四次挥手均是在TCP协议层上进行的&#xff0c;而HTTP协议只是在已建立 TCP连接的基础上&#xff0c;进行通信…

讯飞实时语音读写,并播放录音,上传录音文件

需求描述&#xff1a;使用讯飞实现录音实时识别&#xff0c;并且可以播放以及上传。 首先想到使用到这个组件voice-input-button2&#xff0c;他集成了讯飞语音读写的功能 &#xff0c;插件地址&#xff1a;https://github.com/ferrinweb/voice-input-button2根据文档集成成功…

TypeScrip

TypeScript强调了两个重要的特性--类型系统、适用于任何规模的项目 1、TypeScript 从名字就可以看出来&#xff0c;类型是其核心的特性。 我们知道&#xff0c;JavaScript是一门非常灵活的编程语言,他有以下一些特点: 没有类型约束&#xff0c;一个变量可以初始化是字符串&a…

c语言进阶部分详解(指针进阶1)

大家好&#xff01;指针的初阶内容我已经写好&#xff0c;可移步至我的文章&#xff1a;c语言进阶部分详解&#xff08;指针初阶&#xff09;_总之就是非常唔姆的博客-CSDN博客 基本内容我便不再赘述&#xff0c;直接带大家进入进阶内容&#xff1a; 目录 一.字符指针 1.讲解…

华为云云服务器云耀L实例评测 | 从零到一:华为云云耀云服务器L实例上手体验

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

Android StateFlow初探

Android StateFlow初探 前言&#xff1a; 最近在学习StateFlow&#xff0c;感觉很好用&#xff0c;也很神奇&#xff0c;于是记录了一下. 1.简介&#xff1a; StateFlow 是一个状态容器式可观察数据流&#xff0c;可以向其收集器发出当前状态更新和新状态更新。还可通过其 …

go学习之函数知识

函数 文章目录 函数1.函数入门(1)为什么需要函数&#xff1f;(2)什么是函数&#xff1a;2.包3.函数的调用机制通俗理解调用过程&#xff1a;return语句递归调用 4.函数注意事项和细节讨论5.init函数6.匿名函数7.闭包8.defer9.函数参数的传递方式10.字符串中常用的函数11.时间和…

基于SSM+Vue的舞蹈网站

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用Vue技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

elment table静态表格 +表头居中加粗和表格内居中

效果图 注意的地方 表头居中加粗 header-cell-class-nameactive-header header-cell-class-name是element表格自带的参数 表格内居中cell-class-name"table-center"cell-class-name是el自带的参数 <el-table :data"tableData" style"width: 100%&…

Rhino网格如何转化成曲面?

的方法有多种&#xff0c;以下是一个常用的方法: 1.选择要转换的网格对象并右键单击: 2.选择“转换网格为曲面”选项; 3.在弹出的“转换网格为曲面”对话框中&#xff0c;选择要使用的参数并点击”确定” 另外&#xff0c;还可以通过Rhino的”ExtractWireframe"和“Ed…

理解QT信号和槽

进入QT官网&#xff0c;注册&#xff0c;创建账号&#xff0c;登录&#xff1b; 下载在线安装程序&#xff1b;10天试用版本&#xff1b;安装&#xff1b;完成后如下&#xff1b; 新建一个widgets项目&#xff0c;也就是桌面的窗口应用&#xff1b; 按向导新建完成项目&#x…

华为HCIA学习(一)

文章目录 一.根据考试题总结知识点&#xff08;一题一点&#xff09;二.上午学习三.下午学习四.今天只做了70题&#xff0c;需要的可以找我 一.根据考试题总结知识点&#xff08;一题一点&#xff09; 二.上午学习 ① VRP系统是VRP是华为公司从低端到高端的全系列路由器、交换…

iOS17正式版BUG汇总:无法正常拨打电话、小组件不可用、无线充电不可用等问题

今天凌晨 iOS 17 正式版发布&#xff0c;相信不少尝鲜派已经更新体验了iOS17的新功能了&#xff0c;但还有很多用户选择观望看是否要升级&#xff0c;小编汇总了目前已更新的用户反馈的已知BUG&#xff0c;供大家查看是否要更新iOS17正式版&#xff01; 目前已知BUG&#xff1…

基于dq0变换的三相并联有源电力滤波器模拟模型(Simulink)

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…

Golang教程与Gin教程合集,入门到实战

GolangGin框架GormRbac微服务仿小米商城项目实战视频教程Docker Swarm K8s云原生分布式部署 介绍&#xff1a; Go即Golang&#xff0c;是Google公司2009年11月正式对外公开的一门编程语言&#xff0c;它不仅拥有静态编译语言的安全和高性能&#xff0c;而 且又达到了动态语言开…

【Linux学习】01Linux初识与安装

Linux&#xff08;B站黑马&#xff09;学习笔记 01Linux初识与安装 文章目录 Linux&#xff08;B站黑马&#xff09;学习笔记前言01Linux初识与安装操作系统简述Linux初识虚拟机介绍安装VMware Workstation虚拟化软件VMware中安装CentOS7 Linux操作系统下载CentOS操作系统VMwa…

基于YOLOv8模型的烟火目标检测系统(PyTorch+Pyside6+YOLOv8模型)

摘要&#xff1a;基于YOLOv8模型的烟火目标检测系统可用于日常生活中检测与定位烟火目标&#xff0c;利用深度学习算法可实现图片、视频、摄像头等方式的目标检测&#xff0c;另外本系统还支持图片、视频等格式的结果可视化与结果导出。本系统采用YOLOv8目标检测算法训练数据集…

八大排序(二)--------冒泡排序

本专栏内容为&#xff1a;八大排序汇总 通过本专栏的深入学习&#xff0c;你可以了解并掌握八大排序以及相关的排序算法。 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;八大排序汇总 &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库…

分支和远程仓库

分支 查看分支 git branch -v 创建分支 git branch 分支名 切换分支 git checkout 分支名 合并分支 git merge 分支名 把指定的分支合并到当前分支上 查看当前所有远程地址别名&#xff1a; git remote -v 起别名&#xff1a; git remote add 别名 远程地址推送本地分支上的…