Javascript：js借助jQuery和fileSave将表格存储到world
2024-06-10 07:19:07
使用方法
- 引入所需要的js文件
依次引入：jQuery.js、fileSaver.js、jquery.wordexport.js
fileSaver下载地址：fileSaver
jquery.wordexport下载地址：wordexport - 将需要的内容解析为一个表格
- 使用
$("#page_content").wordExport(表名);命令进行下载，默认保存在本地，表名可以不传，默认为jQuery-Word-Export
使用注意
- 下载fileSaver的时候，如果dist目录下js文件报错，可以使用src目录下js文件。
- 如果将样式保存为外部样式或嵌入式样式，在下载的时候可能会引用不到，所以在案例中直接使用了内联式css样式。
案例代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style></style>
</head>
<body>
<button id="download" style="height: 100px;width: 100px"> 下载</button>
<div class="page-content" id="page_content" style="box-sizing: border-box"><table style="border-collapse: collapse;width: 600px"><caption style="margin-bottom: 20px;font-size: 30px;font-weight: bolder">基本特征</caption><tr><td style="padding:13px;border: 1px solid #000;font-weight: bolder;">编号(新)</td><td style="padding:13px;border: 1px solid #000;">asd</td><td style="padding:13px;border: 1px solid #000;font-weight: bolder">编号(原)</td><td style="padding:13px;border: 1px solid #000;">sdff</td><td style="padding:13px;border: 1px solid #000;font-weight: bolder">灾害类型</td><td style="padding:13px;border: 1px solid #000;">ffff</td><td style="padding:13px;border: 1px solid #000;font-weight: bolder">管道桩号</td><td style="padding:13px;border: 1px solid #000;">asdas</td><td style="padding:13px;border: 1px solid #000;font-weight: bolder">风险等级</td><td style="padding:13px;border: 1px solid #000;">较低</td></tr><tr ><td style="padding:13px;border: 1px solid #000;font-weight: bolder">地理位置</td><td style="padding:13px;border: 1px solid #000;" colspan="4">新闻</td><td style="padding:13px;border: 1px solid #000;font-weight: bolder">基本特征</td><td style="padding:13px;border: 1px solid #000;" colspan="4">阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴阿巴。</td></tr><tr><td style="padding:13px;border: 1px solid #000;font-weight: bolder">部门1</td><td style="padding:13px;border: 1px solid #000;">1</td><td style="padding:13px;border: 1px solid #000;font-weight: bolder">部门2</td><td style="padding:13px;border: 1px solid #000;" colspan="3">2</td><td style="padding:13px;border: 1px solid #000;font-weight: bolder">部门3</td><td style="padding:13px;border: 1px solid #000;" colspan="3">3</td></tr><tr><td style="padding:13px;border: 1px solid #000;font-weight: bolder">专家1</td><td style="padding:13px;border: 1px solid #000;"> </td><td style="padding:13px;border: 1px solid #000;font-weight: bolder">电话</td><td style="padding:13px;border: 1px solid #000;"> </td><td style="padding:13px;border: 1px solid #000;font-weight: bolder">单位</td><td style="padding:13px;border: 1px solid #000;">公司</td><td style="padding:13px;border: 1px solid #000;font-weight: bolder">单位联系人</td><td style="padding:13px;border: 1px solid #000;">人</td><td style="padding:13px;border: 1px solid #000;font-weight: bolder">联系人电话</td><td style="padding:13px;border: 1px solid #000;">152113201100</td></tr><tr><td style="padding:13px;border: 1px solid #000;font-weight: bolder">照片</td><td style="padding:13px;border: 1px solid #000;" colspan="9"><img src="传感器.png" alt="柳池乡大郎家湾崩塌:cqdsDZBT007"></td></tr></table>
</div>
<!--<a class="word-export" href="javascript:void(0)"> 导出 </a>-->
</body>
<script src="../js/jQuery.js"></script>
<script src="../js/fileSaver.js"></script>
<script src="../js/jquery.wordexport.js"></script>
<script>jQuery(document).ready(function ($) {let $content = $(``)$("#download").click(function (event) {$("#page_content").wordExport('123');});});
</script>
</html>
运行结果：
下载后world文档内容：
Javascript：js借助jQuery和fileSave将表格存储到world相关推荐
- 超全超实用的Javascript类库和jQuery插件大全之二：文字处理，表格和列表处理，实用......
为什么80%的码农都做不了架构师?>>> 日期:2012-10-15 来源:GBin1.com 如果你需要解决一些开发中遇到的技术问题的话,很可能会找到一些相关的javasc ...
- 路由器web网页管理界面goahead和Lighttpd、jQuery（JavaScript(js)众多框架中的比较老的一个）、超文本标记语言html
一.路由器web网页管理界面goahead 1.开源的轻量级WEB Server很多,比如GoAhead.Shttpd.Thttpd.Lighttpd.BOA.mathopd.minihttpd.ap ...
- jquery.form.js java_教javascript函数和jquery函数的使用$(form).submit(function()
教javascript函数和jquery函数的使用$("form").submit(function() 1.$ 是 JQuery 常用的一个回传函数,定义为 "选取&q ...
- 32. Pandas借助Python爬虫读取HTML网页表格存储到Excel文件
Pandas借助Python爬虫读取HTML网页表格存储到Excel文件 实现目标: 网易有道词典可以用于英语单词查询,可以将查询的单词加入到单词本; 当前没有导出全部单词列表的功能.为了复习方便,可 ...
- JavaScript强化教程——jQuery选择器
本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 -- jQuery选择器 jQuery 选择器 选择器 实例 选取 * $("*") 所 ...
- 使用jquery进行多行表格数据验证
使用jquery进行多行表格数据验证 <!DOCTYPE html> <html lang="en"> <head><meta chars ...
- ruby on rails_如何在Ruby on Rails应用中用Vue.js替换jQuery
ruby on rails by Igor Petrov 通过伊戈尔·彼得罗夫(Igor Petrov) 如何在Ruby on Rails应用中用Vue.js替换jQuery (How to repl ...
- 使用Jquery+CSS实现的表格隔行凸显和当前行高亮效果
我几次想尝试终于被我弄成功了! 前提条件:将jquery-1.2.6.js导入进来,<script src="jquery-1.2.6.js" type="text ...
- 原生JS 和 jQuery 通过url传递 和 接收 自定义参数
一.传递参数页面 参数传递方法1:通过a标签传递 <a href="page/info.html?gid=1024&red=#5u6c86&img='./img/goo ...
- HTML、CSS、JS、jQuery
前端技巧 HTML form表单 input的type常用类型 图片分区响应 视频播放 CSS 样式选择器 background背景图 text文本样式 transition过渡 animation动 ...
最新文章
- Windows之建立C++开发环境
- WebSphere通过corba调Tuxedo问题（2）
- 数据库性能优化—分库分表
- Stream流方法引用
- php开发微信图灵机器人
- NLP界新SOTA！吸纳5000万级知识图谱，一举刷爆54个中文任务！
- 【2017年第4期】大数据标准体系
- 江苏省有JAVA技能大赛,江苏省职业学校技能大赛组委会
- 浅谈数据结构之主席树(线段树进阶版)
- iOS学习笔记-自己动手写RESideMenu
- 与 Netcraft 携手为 GlobalSign 的客户提供先进的保护措施以防止网站遭受恶意入侵和钓鱼攻击...
- [转] 电子技术*笔记4【2013-03】
- tkmybatis详细教程（一篇就明白）
- 随机数生成器【欧拉常数】
- 导出anaconda的代码为pdf
- EDK2编译环境搭建、编译、在模拟器运行、在笔记本运行（带目录版本）
- 邮件营销整体解决方案
- ab进行压力测试详解
- Parameter-FreeSpatialAttentionNetworkforPersonRe-Identification
- android 距离校准,通过距离校准设备提升WiFi定位精度的方法与流程