首页 > 其他分享 >destoon上做纯js实现html指定页面导出word

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

时间:2023-09-19 10:55:47浏览次数:49  
标签:style destoon word prnhtml getElementsByClassName js article document

因为最近做了范文网站需要,所以要下载为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)

 

标签:style,destoon,word,prnhtml,getElementsByClassName,js,article,document
From: https://www.cnblogs.com/68xi/p/17714047.html

相关文章

  • 【Sword系列】第七届全国残疾人职业技能大赛样题-网络安全-这个厉害了
    (文章目录)前言把明文转换为16进制编码的步骤如下:将明文中的每个字符转换为其对应的ASCII码。将ASCII码转换为16进制编码。例如,如果明文为"Hello",则转换为16进制编码后为"48656C6C6F"。将16进制编码转换为10进制数的步骤如下:将16进制编码每两个字母分组。将每个字母转换......
  • npm does not support Node.js的解决办法
    原文链接:https://blog.csdn.net/UKilll/article/details/131589827 1、查看npm和nodejs的版本是否配套。2、因为我的使用了npminstall-gnpm把npm的版本升级到了9.几导致运行项目的时候提示npmv9.8.0doesnotsupportNode.jsv14.16.1,查阅了很多资料之后感觉太麻烦了,现......
  • 如何在vuejs项目中使用md5加密密码的实现
    1、NPM安装:npminstall--savejs-md52、全局用法2.1、全局引用importmd5from'js-md5';Vue.prototype.$md5=md5;2.2、全局使用将您需要加密的信息放进去:this.$md5('Thisisencryptedcontent')//6f43dd5db792acb25d6fe32f3dddac703.局部用法在页面中单独使用......
  • How to use ESM & TypeScript in Node.js All In One
    HowtouseESM&TypeScriptinNode.jsAllInOne{"compilerOptions":{"module":"NodeNext",//"module":"Node16",}}{"name":"esm-ts-package",......
  • js_对输入框按下enter键会触发change事件
    测试代码<body><inputtype="text"id="i1"/><script>constoI1=document.querySelector('#i1')oI1.addEventListener('keydown',function(e){console.log(e.key)})oI1.add......
  • Vue-js循环方式、v-model的使用、事件处理、表单控制、购物车案例
    js循环方式在es6语法中:(以后尽量少用var有很多坑)-let:定义变量-const:定义常量1.方式一:for循环,基于索引的循环<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc=".......
  • JSP
    什么是JSP以及他有什么用servlet程序用于接收并处理客户端的请求,并做出响应,并将响应(一般是一个Html页面)回传给客户端演示一般情况下回传html页面a.html<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title></head>......
  • Vue之js循环方式、v-model 的使用、事件处理、表单控制、购物车案例、v-model修饰符
    js循环方式<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>js循环方式</title><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></sc......
  • Python中数据类转换为JSON的方法
    dataclass到Python中的JSONJavaScriptObjectNotation或JSON表示使用编程语言中的文本组成的脚本(可执行)文件来存储和传输数据。Python通过JSON内置模块支持JSON。因此,我们在Python脚本中导入JSON包,以利用这一能力。JSON中使用的引号字符串包含了键值映射中的值。它与Pytho......
  • NextJS应用中的Stripe Elements未显示
    如果在Next.js应用中使用StripeElements时未能正确显示,请尝试以下解决方案:确保正确引入Stripe.js库:在Next.js应用中使用StripeElements之前,需要确保正确引入Stripe.js库。你可以在<Head>组件中引入Stripe.js库,例如:importHeadfrom'next/head';functionMyComponent(){ret......