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

news2025/1/11 12:58:11

因为最近做了范文网站需要,所以要下载为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.coloradmin.cn/o/1023855.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

企业备份解决方案:保护您的企业虚拟机安全!

在目前这个高度数据化的信息时代中&#xff0c;企业对数据的依赖程度更高&#xff0c;以便进行高效的运营和理智的决策。然而&#xff0c;硬件的故障、自然的灾害以及网络的攻击等无法预料的情况&#xff0c;可能会带来大规模的数据丢失&#xff0c;进而造成经济的损失&#xf…

vscode 编译工程问题总结

1.安装NuGet Package出错 The “path” argument must be of type string or an instance of Buffer of URL Received undefined 解决方法&#xff1a; 账号登录&#xff0c;重启vscode &#xff08;1&#xff09;找到登录 &#xff08;2&#xff09;选择一个登录方式登录 …

打造本地紧密链接的开源社区——KCC@长沙开源读书会openKylin爱好者沙龙圆满举办...

2023年9月9日&#xff0c;由开源社联合 openKylin 社区举办的 KCC长沙开源读书会&openKylin 爱好者沙龙&#xff0c;在长沙圆满举办。这是 KCC长沙首次正式进入公众视野&#xff0c;开展开源交流活动&#xff0c;也是 openKylin 社区长沙首场线下沙龙。长沙地区及其周边的众…

目标分类笔记(二): 利用PaddleClas的框架来完成多标签分类任务(从数据准备到训练测试部署的完整流程)

文章目录 一、演示多分类效果二、PaddleClas介绍三、代码获取四、数据集获取五、环境搭建六、数据格式分析七、模型训练7.1 其他训练指标 八、模型预测九、模型评估十、PaddleClas相关博客 一、演示多分类效果 二、PaddleClas介绍 PaddleClas主要构件&#xff1a; PP-ShiTu&a…

测试与FastAPI应用数据之间的差异

【squids.cn】 全网zui低价RDS&#xff0c;免费的迁移工具DBMotion、数据库备份工具DBTwin、SQL开发工具等 当使用两个不同的异步会话来测试FastAPI应用程序与数据库的连接时&#xff0c;可能会出现以下错误&#xff1a; 在测试中&#xff0c;在数据库中创建了一个对象&#x…

指针笔试题讲解-----让指针简单易懂(2)

目录 回顾上篇重点 &#xff1a; 一.笔试题 ( 1 ) 二.笔试题 ( 2 ) 科普进制知识点 (1) 二进制 (2) 八进制 (3)十六进制 三.笔试题&#xff08; 3 &#xff09; 四.笔试题&#xff08; 4 &#xff09; 五.笔试题&#xff08; 5 &#xff09; 六.笔试题&#xff08; …

Word中的图片保存后变模糊怎么解决

目录 1.介绍 2.原因 3.解决方案 Word是由微软公司开发的一款文字处理软件&#xff0c;它是Microsoft Office套件的一部分。Word提供了丰富的功能和工具&#xff0c;使用户能够创建、编辑和格式化文档。它支持各种文本处理任务&#xff0c;包括编写信函、报告、论文、简历等。…

C# Onnx Yolov8 Detect Poker 扑克牌识别

效果 项目 代码 using Microsoft.ML.OnnxRuntime; using Microsoft.ML.OnnxRuntime.Tensors; using OpenCvSharp; using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System…

OVS-DPDK学习

安装教程&#xff1a; https://docs.openvswitch.org/en/latest/intro/install/dpdk/ https://docs.openvswitch.org/en/latest/howto/dpdk/ overview和应用 https://www.intel.com/content/www/us/en/developer/articles/technical/open-vswitch-with-dpdk-overview.html OVS…

【网络安全】黑客自学笔记

1️⃣前言 &#x1f680;作为一个合格的网络安全工程师&#xff0c;应该做到攻守兼备&#xff0c;毕竟知己知彼&#xff0c;才能百战百胜。 计算机各领域的知识水平决定你渗透水平的上限&#x1f680; 【1】比如&#xff1a;你编程水平高&#xff0c;那你在代码审计的时候就会比…

【Map篇】HashTable详解

目录 成员变量属性构造函数put()remove()get()总结: HashTable的优点?HashTable 是一种基于哈希函数的数据结构。它将每个键Key映射到一个唯一的索引Index,通过这个索引来快速访问数据。底层是一个数组,数组中的每个元素称为桶(bucket)。 当我们需要访问某个元素时,首先会对…

Python 网络爬取的时候使用那种框架

尽管现代的网站多采取前后端分离的方式进行开发了&#xff0c;但是对直接 API 的调用我们通常会有 token 的限制和可以调用频率的限制。 因此&#xff0c;在一些特定的网站上&#xff0c;我们可能还是需要使用网络爬虫的方式获得已经返回的 JSON 数据结构&#xff0c;甚至是处理…

[架构之路-218]- 架构师责权利的定位, 架构师是技术领导者、决策者、激励者、企业家思维、战略思维、理论指导

目录 一、架构的诉求与系统的规模和复杂度强相关 1.1 系统的规模和复杂度对架构的影响 1.2 系统的业务需求对架构的影响 1.3 业架构和软件架构 二、架构师的类型 三、系统架构师 3.1 什么是系统架构师 3.2 系统架构师的技术素质要求 3.3 系统架构师的管理素质要求 3.…

【小程序】九宫格抽奖,页面不是有点丑,功能没啥问题,有需要直接拿去改吧

概述 常用活动抽奖功能&#xff0c;九宫格抽奖&#xff0c;两种方式切换&#xff0c;图片模式和文字模式&#xff0c;带抽奖次数。功能没啥问题&#xff0c;除了有点丑&#xff0c;css样式自己美化一下就可以了... 详细 微信小程序大转盘抽奖 演示图文字&#xff1a; 演示图…

Redis延迟双删-架构案例2021(三十二)

数据库设计 某医药销售企业因业务发展&#xff0c;需要建立线上药品销售系统&#xff0c;为用户提供便捷的互联网药品销售服务、该系统除了常规药品展示、订单、用户交流与反馈功能外&#xff0c;还需要提供当前热销产品排名、评价分类管理等功能。 通过对需求的分析&#xf…

JVM G1垃圾回收器学习笔记

前言 最近在工作中遇到频繁FullGC且YoungGC时间有时特别长的情况&#xff0c;而自己对JVM的垃圾回收也是一知半解&#xff0c;因此需要对JVM做系统的了解&#xff0c;为快速解决工作中的问题&#xff0c;能有效分析GC日志和业务代码&#xff0c;先从G1垃圾回收器开始学习&…

【论文阅读】检索增强发展历程及相关文章总结

文章目录 前言Knn-LMInsightMethodResultsDomain AdaptionTuning Nearest Neighbor Search Analysis REALMInsightsMethodKnowledge RetrieverKnowledge-Augmented Encoder ExpResultAblation StudyCase Study DPRInsightMethodExperimentsResults RAGInsightRAG-Sequence Mode…

小程序中如何查看会员的访问记录

​在小程序中&#xff0c;我们可以通过如下方式来查看会员的访问记录。下面是具体的操作流程&#xff1a; 1. 找到指定的会员卡。在管理员后台->会员管理处&#xff0c;找到需要查看访客记录的会员卡。也支持对会员卡按卡号、手机号和等级进行搜索。 2. 查看会员卡详情。点…

RK3588平台开发系列讲解(项目篇)视频监控之RTMP推流

文章目录 一、RTMP协议是什么二、RTMP 的原理三、Nginx 流媒体服务器四、FFmpeg 推流沉淀、分享、成长,让自己和他人都能有所收获!😄 📢 目前常见的视频监控和视频直播都是使用了 RTMP、RTSP、HLS、MPEG-DASH、WebRTC流媒体传输协议等。 视频监控项目组成,分为三部分:…

PHP-composer安装扩展安装,批量操作合并pdf

清除Composer缓存&#xff1a; 运行以下命令来清除Composer的缓存&#xff0c;并再次尝试安装包。 bash composer clear-cache 使用不同的镜像源&#xff1a; Composer使用的默认包源可能会受到限制或访问问题。你可以切换到使用其他镜像源&#xff0c;如阿里云、Composer中国…