导出效果

代码实现

<!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的样式，用&nbsp;来代替需要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（提供无编程基础将页面上表格导出到本地的方法）的更多相关文章

  1. js基础进阶--图片上传时实现本地预览功能的原理

    欢迎访问我的个人博客:http://www.xiaolongwu.cn 前言 最近在项目上加一个图片裁剪上传的功能,用的是cropper插件,注意到选择本地图片后就会有预览效果,这里整理一下这种预览效 ...

  2. 原生js封装ajax：传json，str，excel文件上传表单提交

    由于项目中需要在提交ajax前设置header信息,jquery的ajax实现不了,我们自己封装几个常用的ajax方法. jQuery的ajax普通封装 var ajaxFn = function(u ...

  3. 原生js实现分页效果（带实例）

    小小插件(静态分页) 效果图: 首先实现简单功能: <!DOCTYPE html> <html> <head> <meta http-equiv=" ...

  4. PHPcms编辑器如何粘贴带格式的word文档

    在之前在工作中遇到在富文本编辑器中粘贴图片不能展示的问题,于是各种网上扒拉,终于找到解决方案,在这里感谢一下知乎中众大神以及TheViper. 通过知乎提供的思路找到粘贴的原理,通过TheViper找 ...

  5. 网页内容导出word/excel的js代码

    IE设置: 工具-> Internet选项-> 安全->自定义级别-> 对没有标记安全级别的ActiveX控件进行初始化  设为启用! 1.导出word //指定区域导出到Wo ...

  6. JS 监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

    在实际的应用中,我们常常需要实现在移动app和浏览器中点击返回.后退.上一页等按钮实现自己的关闭页面.调整到指定页面或执行一些其它操作的需求: 那在代码中怎样监听当点击微信.支付宝.百度糯米.百度钱包 ...

  7. JS监听微信、支付宝等移动app及浏览器的返回、后退、上一页按钮的事件方法

    $(function(){ pushHistory(); window.addEventListener("popstate", function(e) { alert(" ...

  8. Freemarker导出带格式的word的使用

    1.新建一个doc文档

  9. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

随机推荐

  1. ABC165C题解

    题目 看题目的时候一脸懵,直到看见数据范围 \[N \le 10,\; M \le 10,\; Q \le 50 \] 之后才意识到问题的严重性. 毕竟数据如此的小,我们完全可以用阶乘复杂度算法卡过去 ...

  2. 小白学vue第四天，从入门到放弃（vue指令的使用加高阶函数）

    v-on修饰符的使用 .stop 阻止事件冒泡 调用  stopPropagation() .prevent 阻止默认事件 调用 event.preventDefault() .keyCode 键盘事 ...

  3. 有赞Android实习五面都挂了，复习半月再战，转拿腾讯offer！

    缘起 为了有赞的面试准备了半个月的样子,当时还投了美团.字节.滴滴.京东,目的只有一个,就是要进大厂,但是只有有赞扛过了一面,其他都是一面就挂了. 前三面都自我感觉良好,以为能稳拿offer的,没想到 ...

  4. 三年Android开发，月薪一万二，不敢跳槽，每天都很焦虑

    在我们的身边,存在一个普遍现象:很多人从事Android开发工作多年,走过的弯和坎,不计其数,经历的心酸难与外人道也.可是技术确难以提升.止步不前,薪资也只能看着别人水涨船高,自己却没有什么起色. 虽 ...

  5. dython：Python数据建模宝藏库

    尽管已经有了scikit-learn.statsmodels.seaborn等非常优秀的数据建模库,但实际数据分析过程中常用到的一些功能场景仍然需要编写数十行以上的代码才能实现. 而今天要给大家推荐的 ...

  6. Echarts 图表位置调整

    Echarts 图表的位置调整 折线图和柱状图,通过grid属性调整. grid:{ show:false, top:'20%', right:'5%', bottom:'10%', left:'10 ...

  7. Oracle 11g数据库下载安装教程

    今天重装系统之后发现甲骨文的网站变化较大,下载安装废了一点时间,留下个笔记为以后再装留作参考.本教程是win10,64位系统环境下 1.下载 下载的时候需要登陆甲骨文账号,如果没有的话申请一个也挺快. ...

  8. L298N的接线和详细使用方法

    文章说明: 名词概念(为了方便易懂,我就通俗的表达): 逻辑电压:控制板子执行程序的电压. 驱动电压:输出口AB的电压. 逻辑电流:驱动板执行程序的电流. 驱动电流:输出口AB的电流. 本人调试此款L ...

  9. L298N使用资料

    L298N驱动连接arduino小车电机(代码和使用): https://www.cnblogs.com/fsong/p/12309911.htmlarduino UNO 连接L298N驱动两个电机转 ...

  10. 第一次上传代码到gitee

    初始化 git init 添加文件到本地仓库 git add . 提交文件到本地仓库 git remote add origin 仓库地址 拉去远程仓库代码 git pull origin maste ...