JS019. 原生JS使用new Blob()实现带格式导出Word、Excel(提供无编程基础将页面上表格导出到本地的方法)
导出效果
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table id="table" border="1">
<tr style="height:50px;">
<th style="width:100px;color:red;">姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>小明</td>
<td>男</td>
<td>16</td>
</tr>
<tr>
<td>小红</td>
<td>女</td>
<td>17</td>
</tr>
<tr>
<td>小张</td>
<td>男</td>
<td>17</td>
</tr>
</table>
<a id="down">点击下载excel</a>
<script>
let html = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
${document.getElementById('table').outerHTML}
</body>
</html>`
let blob = new Blob([html],{ type: 'application/vnd.ms-excel'});
let a = document.getElementById('down');
a.href = URL.createObjectURL(blob);
a.download = '测试excel下载'
</script>
</body>
</html>
注意事项
· 只能写行内样式。
· 有一部分css无效,目前我发现无效的有flex、margin,尽量使用最普通最老的css写法,不要使用css3的样式,用 来代替需要margin的地方;
· 因为有些样式不支持,导出的excel和你写出来的界面是不会完全一致的,要打印出来测试
· 如果在vue中使用建议不要使用document.getElementB…来获取dom,应该直接使用ref来获取。
扩展使用
(此节也适用未接触过前端的人)
首先键入 F12 打开控制台,然后键入 CTRL + SHIFT + C 选择元素,将光标移动到页面上的表格,使高亮区域包裹整个表格,这里拿Element-UI Table举例。
找到图片标出的 <table> 标签,鼠标右键,选择Edit as HTML,在 "<table " 后面添加 " id="table2xls "(注意空格)
切换到控制台
在空白处复制以下代码并键入 ENTER :
(function() {
let html = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
${document.getElementById('table2xls').outerHTML}
</body>
</html>`
let blob = new Blob([html],{ type: 'application/vnd.ms-excel'});
let a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = `TableExcel${+new Date()}`
a.click()
}())
开始下载:
下载成功:
用这个方法导出其他标签也是可以的,比如上图导出的.XLS文件就不包括表头,是因为ELEMENT-UI的表格将表头放在了 <div> 另一个table中。
通过#testt导出表格,导出结果如下:
将代码块中 blob type 的值改为 " application/msword "
将标签导出为带格式.DOC的Word文件
————————————————
原文链接:https://blog.csdn.net/weixin_35958891/article/details/103381012
本文部分转自上述链接,感谢友友提供的思路。
- END -
JS019. 原生JS使用new Blob()实现带格式导出Word、Excel(提供无编程基础将页面上表格导出到本地的方法)的更多相关文章
- js基础进阶--图片上传时实现本地预览功能的原理
欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...
- 原生js封装ajax:传json,str,excel文件上传表单提交
由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...
- 原生js实现分页效果(带实例)
小小插件(静态分页) 效果图: 首先实现简单功能: <!DOCTYPE html> <html> <head> <meta http-equiv=" ...
- PHPcms编辑器如何粘贴带格式的word文档
在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...
- 网页内容导出word/excel的js代码
IE设置: 工具-> Internet选项-> 安全->自定义级别-> 对没有标记安全级别的ActiveX控件进行初始化 设为启用! 1.导出word //指定区域导出到Wo ...
- JS 监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求: 那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包 ...
- JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法
$(function(){ pushHistory(); window.addEventListener("popstate", function(e) { alert(" ...
- Freemarker导出带格式的word的使用
1.新建一个doc文档
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
随机推荐
- OpenGL学习笔记(二)画三角形
目录 渲染管线(Graphics Pipeline) 编码实现 顶点数据 顶点缓冲对象(VBO) 顶点着色器 编译着色器 片段着色器 着色器程序 链接顶点属性 顶点数组对象 最终绘制三角形 索引缓冲对 ...
- shell中cmd1 && cmd2 || cmd3的含义
在某些情况下,很多指令我想要一次输入去执行,而不想要分次去执行时,就要用到 && || 了.cmd 1 && cmd21,若cmd1执行完毕之后且正确执行($?=0), ...
- 2019-07-06 sql备忘 连续取最大
连续最大: SELECT M.* FROM #temp MINNER JOIN (SELECT ISNULL(A.score,0)-b.score AS score,B.id FROM #temp A ...
- Discuz ML RCE漏洞
1.漏洞描述 Discuz国际版漏洞存在于cookie的language可控并且没有严格过滤,导致可以远程代码执行. 2.产生原因:Discuz!ML 系统对cookie中的l接收的language参 ...
- Windows协议 Kerberos篇
认证流程 角色 功能 Domain Controller 也就是域控 Key Distribution Center 秘钥分发中心,简称KDC,默认安装在域控里,包括AS.AD和TGS. Accoun ...
- 关于Servlet技术
1.Servlet 技术 a)什么是 Servlet 1.Servlet 是 JavaEE 规范之一.规范就是接口 ...
- WPF自定义控件二:Border控件与TextBlock控件轮播动画
需求:实现Border轮播动画与TextBlock动画 XAML代码如下: <Window.Resources> <Storyboard x:Key="OnLoaded1& ...
- Java HashSet和TreeSet【笔记】
Java HashSet和TreeSet[笔记] PS:HashSet.TreeSet 两个类是在 Map 的基础上组装起来的类 HashSet 类注释 1.底层实现基于 HashMap,所以迭代时不 ...
- SpringBoot开发十一-显示登录信息
需求介绍-显示登录信息 我们需要在每个页面的头部都要把登录用户的头像显示出来,另外在详细信息里面你需要显示用户的名字,除此之外如果登录了,我们显示首页 信息 头像 三个功能的链接,否则显示首页 登录两 ...
- Qt开发Gif播放器
一.资源下载地址 https://www.aliyundrive.com/s/jBU2wBS8poH 本项目路径:项目->免费->Gif播放器(包含整个工程源码,vs2019打开即可编译运 ...