使用JS导出页面内容到Excel

  • JS代码

    <script>
        $(function(){
    
            // 使用outerHTML属性获取整个table元素的HTML代码(包括<table>标签),然后包装成一个完整的HTML文档,设置charset为urf-8以防止中文乱码
            var html = ‘\<html\>\<head\>\<meta charset="utf-8" \/\>\<\/head\>\<body\>‘
                    + document.getElementsByTagName(‘table‘)[0].outerHTML
                    + ‘\<\/body\>\</html\>‘;
    
            // 实例化一个Blob对象,其构造函数的第一个参数是包含文件内容的数组,第二个参数是包含文件类型属性的对象
            var blob = new Blob([html], { type: "application/vnd.ms-excel" });
            var a = document.getElementsByClassName(‘export‘)[0];
    
            // 利用URL.createObjectURL()方法为a元素生成blob URL
            a.href = URL.createObjectURL(blob);
            // 设置文件名
    
            a.download = "【{$user_name}】提成详情表.xls";
        })
    </script>
  • 导出按钮

    <a href="" class="export" style="text-decoration: none;display: inline-block;width: 100%;">导出详情表</a>

原文地址:https://www.cnblogs.com/wxdblog/p/10331334.html

时间: 2024-10-09 21:32:13

使用JS导出页面内容到Excel的相关文章

js导出table中的EXCEL总结

导出EXCEL一般是用PHP做,但是项目中,有时候PHP后端工程师返回的数据不是我们想要的,作为前端开发工程师,把对应的数据编号转换为文字后,展示给用户,但是,需求要把数据同时导出一份EXCEl.无奈之下,我只能用js导出table中的数据了. 导出EXCEl一般是自己人用的,所以用js导出,因为js导出EXCEL一般情况下兼容性不是很好,很多只是兼容IE浏览器,还要设置在工具栏中进行设置才能导出,因为会相对比较烦.下面介绍几种方法: 一.js导出EXCEl带单元格合并[已验证,比较好用] //

如是使用JS实现页面内容随机显示

之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家一起分享,如何使用js控制实现页面内容随机显示. 这里我以本地的蝉知建站系统为例,给大家演示一下实现流程. 首先将想要显示的不同内容分别放到不同的盒子里(div),并用ID属性标记好.例如: <div id="p1"> <p>联系人:张三</p> <

如何使用JS实现页面内容随机显示

之前有个客户咨询我,因为他们公司的业务员有多个人,但公司网站的联系方式板块里只够放一个人的信息,所以就想能不能实现这个联系方式信息随机显示,对于业务或客服人员来说也能做到分配均匀公平.本文我们将和大家一起分享,如何使用js控制实现页面内容随机显示. 这里我以本地的蝉知建站系统为例,给大家演示一下实现流程. 首先将想要显示的不同内容分别放到不同的盒子里(div),并用ID属性标记好.例如: 1 <div id="p1"> 2 <p>联系人:张三</p>

使用clipboard.js复制页面内容到剪切板

最近在做一个的智能客服Web端浏览器应用,其中有一项需求是客户在获取系统返回的 答案后点击“复制答案”按钮将答案复制到系统剪切板.本以为这是一个小case,但是发现如果 要对各种主流浏览器都有良好的兼容性并不简单.原因在于出于安全原因,大多数现代浏览 器都未提供通用的剪贴板复制接口(或即便有,也默认被禁用). 上网搜索了一下,现有的方案大致有两种: 一:使用原生javascript中window.clipboardData实现复制到剪贴板功能: 二:使用Zero Clipboard库: 在尝试了

纯JS搜索页面内容-我的扩展版本

我扩展了什么? 1.不区分大小写,且替换后保留原大小写内容. 2.自动滚动到所属位置. 时间比较赶 也比较粗糙. 原作 张鑫旭 ------- ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62

js 获取页面内容可见区域的高度和宽度

var h = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //height var w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //width

js 打印页面内容

function Pageprint(tid) {           var oldHTNL= document.body.innerHTML;           document.body.innerHTML = document.getElementById(tid).innerHTML;            window.print();            document.body.innerHTML = oldHTNL; }; onclick="Pageprint('tid'

JS 将页面上的表格导出为 Excel 文件

如果在页面上展示了一个表格,想把这个表格导出为Excel文件,那么在要求不高的情况下,可以直接利用 JavaScript 的 Blob 和 Object URL 特性将表格导出.不过,这就是利用了 Excel 能打开 HTML 文档的特性,所以导出的表格实际上是一个 HTML 文档,并且其扩展名只能为 .xls,而不能是 .xlsx,否则Excel无法打开.(有使用JavaScript生成真正Excel文件的方案,以后再研究.) 实例: <!DOCTYPE html> <html>

js导出excel增加表头、mso-number-format定义数据格式

问题1:增加表头 js导出表格时,只会导出table里的展现出的内容,如需增加表头等内容需要在页面获取的字符串中拼接表头的相关字符串,详细介绍如下: tableString:新增的表头内容字符串: ctx.table: 新增的表头+页面获取的table字符串. 这样,表头就加上了,还可以通过style设置它的样式: 问题2:mso-number-format定义数据格式 在做项目时遇到mso-number-format定义的科学计数法转化格式与金额定义的向右对齐样式有冲突.  之前有写过篇博客专