表格导出 Excel

已于 2022-05-04 14:42:50 修改
阅读量173 收藏
点赞数
分类专栏： JavaScript 文章标签： javascript
于 2020-08-12 14:34:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42374676/article/details/107956855
版权

Excel表格导出


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //blob、base64转文件下载，通过A标签模拟点击,设置文件名
        /*
            万能流  application/octet-stream
            word文件  application/msword
            excel文件  application/vnd.ms-excel
            txt文件  text/plain
            图片文件  image/png、jpeg、gif、bmp
         */
        function downloadByBlob(fileName, text) {
            let a = document.createElement("a");
            a.href = URL.createObjectURL(new Blob([text], { type: "application/octet-stream" }));
            a.download = fileName || 'Blob导出测试.txt';
            a.click();
            a.remove();
            URL.revokeObjectURL(a.href);
        }
        function downloadByBase64(fileName, text) {
            let a = document.createElement('a');
            a.href = 'data:application/octet-stream;base64,' + window.btoa(unescape(encodeURIComponent(text)));
            a.download = fileName || 'Base64导出测试.txt';
            a.click();
            a.remove();
            URL.revokeObjectURL(a.href);
        }
        //踹掉后端，前端导出Excel！
        function exportExcel(fileName, columns, datas) {
            //列名
            let columnHtml = "";
            columnHtml += "<tr style=\"text-align: center;\">\n";
            for (let key in columns) {
                columnHtml += "<td style=\"background-color:#bad5fd\">" + columns[key] + "</td>\n";
            }
            columnHtml += "</tr>\n";

            //数据
            let dataHtml = "";
            for (let data of datas) {
                dataHtml += "<tr style=\"text-align: center;\">\n";
                for (let key in columns) {
                    dataHtml += "<td>" + data[key] + "</td>\n";
                }
                dataHtml += "</tr>\n";
            }

            //完整html
            let excelHtml = "<html xmlns:o=\"urn:schemas-microsoft-com:office:office\"\n" +
                "      xmlns:x=\"urn:schemas-microsoft-com:office:excel\"\n" +
                "      xmlns=\"http://www.w3.org/TR/REC-html40\">\n" +
                "<head>\n" +
                "   <!-- 加这个，其他单元格带边框 -->" +
                "   <xml>\n" +
                "        <x:ExcelWorkbook>\n" +
                "            <x:ExcelWorksheets>\n" +
                "                <x:ExcelWorksheet>\n" +
                "                    <x:Name></x:Name>\n" +
                "                    <x:WorksheetOptions>\n" +
                "                        <x:DisplayGridlines/>\n" +
                "                    </x:WorksheetOptions>\n" +
                "                </x:ExcelWorksheet>\n" +
                "            </x:ExcelWorksheets>\n" +
                "        </x:ExcelWorkbook>\n" +
                "   </xml>\n" +
                "   <style>td{font-family: \"宋体\";}</style>\n" +
                "</head>\n" +
                "<body>\n" +
                "<table border=\"1\">\n" +
                "    <thead>\n" +
                columnHtml +
                "    </thead>\n" +
                "    <tbody>\n" +
                dataHtml +
                "    </tbody>\n" +
                "</table>\n" +
                "</body>\n" +
                "</html>";

            //下载
            downloadByBlob((fileName || "导出Excel") + ".xls", excelHtml);
        }

        exportExcel('cwl', { name: 'name', age: 'age', sex: 'sex' }, [{ 'name': '我是谁', 'age': '18', 'sex': 1 }, { 'name': '我是谁', 'age': '18', 'sex': '1' }, { 'name': '我是谁', 'age': '18', 'sex': '1' }])
    </script>
</body>

</html>


<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <div class="tools">
        <button type="button" class="btn green" id="excell" onclick="method5('dataTable')">导出考勤表格</button>
    </div>

    <table border="1" id="dataTable">
        <tr>
            <td>王婷111</td>
            <td>一见倾城333 </td>
        </tr>
        <tr>
            <td>祈澈姑娘222</td>
            <td>Python开发者交流平台44</td>
        </tr>
        <tr>
            <td>wwwangting888</td>
            <td>13661725475</td>
        </tr>
    </table>

</body>
<script>
    //打印表格
    var idTmr;
    //    判断浏览器的类型
    function getExplorer() {
        // 浏览器的内核
        var explorer = window.navigator.userAgent;
        //ie  
        if (explorer.indexOf("MSIE") >= 0) {
            return 'ie';
        }
        //firefox  
        else if (explorer.indexOf("Firefox") >= 0) {
            return 'Firefox';
        }
        //Chrome  
        else if (explorer.indexOf("Chrome") >= 0) {
            return 'Chrome';
        }
        //Opera  
        else if (explorer.indexOf("Opera") >= 0) {
            return 'Opera';
        }
        //Safari  
        else if (explorer.indexOf("Safari") >= 0) {
            return 'Safari';
        }
    }

    function method5(tableid) {
        // ie浏览器的处理方式
        if (getExplorer() == 'ie') {
            var curTbl = document.getElementById(tableid);
            var oXL = new ActiveXObject("Excel.Application");
            var oWB = oXL.Workbooks.Add();
            var xlsheet = oWB.Worksheets(1);
            var sel = document.body.createTextRange();
            sel.moveToElementText(curTbl);
            sel.select();
            sel.execCommand("Copy");
            xlsheet.Paste();
            oXL.Visible = true;

            try {
                var fname = oXL.Application.GetSaveAsFilename("Excel.xls",
                    "Excel Spreadsheets (*.xls), *.xls");
            } catch (e) {
                print("Nested catch caught " + e);
            } finally {
                // 清空数据
                oWB.SaveAs(fname);
                oWB.Close(savechanges = false);
                oXL.Quit();
                oXL = null;
                idTmr = window.setInterval("Cleanup();", 1);
            }

        } else {
            // 标准浏览器的方式
            tableToExcel(tableid)
        }
    }

    function Cleanup() {
        window.clearInterval(idTmr);
        CollectGarbage();
    }
    var tableToExcel = (function () {
        var uri = 'data:application/vnd.ms-excel;base64,',
            template = '<html><head><meta charset="UTF-8"></head><body><table  border="1">{table}</table></body></html>',
            base64 = function (s) {
                // window.btoa(str) 将str转化成base64的方法  base64转字符串 window.atob() 将base64转变成字符串
                // 我们将使用 escape() 来编码字符串(空格)Visit%20W3School%21  然后使用 unescape() 对其解码 Visit W3School!
                // 替代因此应该用 decodeURI() 和 decodeURIComponent() 取而代之。 
                // encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。 
                // ----------------------------------------------------------------------
                // 提示：请注意 encodeURIComponent() 函数 与 encodeURI() 函数的区别之处，
                // 前者假定它的参数是 URI 的一部分（比如协议、主机名、路径或查询字符串）。
                // ----------------------------------------------------------------------
                // 因此 encodeURIComponent() 函数将转义用于分隔 URI 各个部分的标点符号。"http://www.w3school.com.cn/p 1/" 
                // 加密 http%3A%2F%2Fwww.w3school.com.cn%2Fp%201%2F 
                return window.btoa(unescape(encodeURIComponent(s)))
            },
            format = function (s, c) {
                return s.replace(/{(\w+)}/g, function (m, p) {
                    return c[p];
                })
            }
        return function (table, name) {
            if (!table.nodeType)
                table = document.getElementById(table)
            var ctx = {
                worksheet: name || 'Worksheet',
                table: table.innerHTML
            }
            window.location.href = uri + base64(format(template, ctx))
        }
    })()
</script>

</html>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style media="screen">
        .tableA {
            border-collapse: collapse;
            color: #f00
        }

        .tableA .title th {
            height: 50px;
            font-size: 24px;
            font-family: '微软雅黑';
            font-weight: 700;
        }

        .tableA tr th {
            border: 1px #000 solid;
            height: 40px;
            background: #efefef;
        }

        .tableA tr td {
            padding: 0 40px;
            border: 1px #000 solid;
            height: 40px;
            text-align: center;
        }

        .tableA .footer td {
            font-size: 20px;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <table bordercolor="black" class="tableA">
        <tr class="title">
            <th colspan="4">学生信息</th>
        </tr>
        <tr>
            <th>名字</th>
            <th>性别</th>
            <th>年龄</th>
            <th>班级</th>
        </tr>
        <tr>
            <td>小明</td>
            <td>男</td>
            <td>19</td>
            <td>1班</td>
        </tr>
        <tr>
            <td>小黄</td>
            <td>男</td>
            <td>20</td>
            <td>2班</td>
        </tr>
        <tr>
            <td>老王</td>
            <td>男</td>
            <td>29</td>
            <td>3班</td>
        </tr>
        <tr class="footer">
            <td colspan="4">总人数：3人</td>
        </tr>
    </table>
    <button onclick="deriveAble()">导出表单</button>
    <script>
        var oHtml = document.getElementsByClassName('tableA')[0].outerHTML;
      
        function deriveAble() {
            var excelHtml = `
    <html>
      <head>
        <meta charset='utf-8' />
        <style>
          .tableA {
            border-collapse: collapse;
          }
          .tableA .title th{
            height: 50px;
            font-size: 24px;
            font-family: '微软雅黑';
            font-weight: 700;
          }
          .tableA tr th {
            border: 1px #000 solid;
            height: 40px;
            background: #efefef;
          }
          .tableA tr td {
            padding: 0 40px;
            border: 1px #000 solid;
            height: 40px;
            text-align: center;
          }
          .tableA .footer td {
            font-size: 20px;
            font-weight: 700;
          }
        </style>
      </head>
      <body>
        ${oHtml}
      </body>
    </html>
  `
            var excelBlob = new Blob([excelHtml], { type: 'application/vnd.ms-excel' })
            // 创建一个a标签
            var oA = document.createElement('a');
            // 利用URL.createObjectURL()方法为a元素生成blob URL
            oA.href = URL.createObjectURL(excelBlob);
            // 给文件命名
            oA.download = '学生名单.xls';
            // 模拟点击
            oA.click();

        }

    </script>
</body>

</html>


js导出Excel的方法
利用html的table表格的格式书写想要的excel格式
获取table的内容并组装成一个xls格式的字符串
利用Blob对象生成一个xls格式的文件
利用a标签的download属性创建文件名，并下载到本地
例子：js导出Excel

table表格内容
先写一个正常的html表格

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style media="screen">
    .tableA {
      border-collapse: collapse;
    }
    .tableA .title th{
      height: 50px;
      font-size: 24px;
      font-family: '微软雅黑';
      font-weight: 700;
    }
    .tableA tr th {
      border: 1px #000 solid;
      height: 40px;
      background: #efefef;
    }
    .tableA tr td {
      padding: 0 40px;
      border: 1px #000 solid;
      height: 40px;
      text-align: center;
    }
    .tableA .footer td {
      font-size: 20px;
      font-weight: 700;
    }
  </style>
</head>
<body>
  <table bordercolor="black" class="tableA">
    <tr class="title">
      <th colspan="4">学生信息</th>
    </tr>
    <tr>
      <th>名字</th>
      <th>性别</th>
      <th>年龄</th>
      <th>班级</th>
    </tr>
    <tr>
      <td>小明</td>
      <td>男</td>
      <td>19</td>
      <td>1班</td>
    </tr>
    <tr>
      <td>小黄</td>
      <td>男</td>
      <td>20</td>
      <td>2班</td>
    </tr>
    <tr>
      <td>老王</td>
      <td>男</td>
      <td>29</td>
      <td>3班</td>
    </tr>
    <tr class="footer">
      <td colspan="4">总人数：3人</td>
    </tr>
  </table>
</body>
</html>
来看看在浏览器显示的效果如下，在这里我是给table增加了样式的：
浏览器显示效果

获取table的内容装成一个xls格式的字符串
接下来就是获取table的html内容了，里面包括标签的class或id等。

var oHtml = document.getElementsByClassName('tableA')[0].outerHTML;
这里将table和style组成一个html，
【附上es6字符串模板链接[es6字符串模板][1]】
[1]:http://es6.ruanyifeng.com/#docs/string#模板字符串 "es6字符串模板"

// 这里我是用了es6的字符串语法``和${},对es6不熟悉的同学可以去查一下。
// 有没有发现我这里的样式就是和HTML上的style复制下来的，
  var excelHtml = `
    <html>
      <head>
        <meta charset='utf-8' />
        <style>
          .tableA {
            border-collapse: collapse;
          }
          .tableA .title th{
            height: 50px;
            font-size: 24px;
            font-family: '微软雅黑';
            font-weight: 700;
          }
          .tableA tr th {
            border: 1px #000 solid;
            height: 40px;
            background: #efefef;
          }
          .tableA tr td {
            padding: 0 40px;
            border: 1px #000 solid;
            height: 40px;
            text-align: center;
          }
          .tableA .footer td {
            font-size: 20px;
            font-weight: 700;
          }
        </style>
      </head>
      <body>
        ${oHtml}
      </body>
    </html>
  `;
生成xls文件并通过a标签下载到本地
前面的准备工作就差不多了，接下来就是将字符串转成xls文件了，这里主要利用Blob对象和URL.createObjectURL() 方法

Blob对象表示不可变的类似文件对象的原始数据。Blob表示不一定是JavaScript原生形式的数据。 File 接口基于Blob，继承了 blob的功能并将其扩展使其支持用户系统上的文件。
URL.createObjectURL() 静态方法会创建一个 DOMString，其中包含一个表示参数中给出的对象的URL。这个 URL 的生命周期和创建它的窗口中的 document 绑定。这个新的URL 对象表示指定的 File 对象或 Blob 对象。
Blob 构造函数用法举例（生成一个json文件）：

var debug = {hello: "world"};
var blob = new Blob([JSON.stringify(debug, null, 2)], {type : 'application/json'});
同样道理利用第二个步骤的字符串生成Excel

var excelBlob = new Blob([excelHtml], {type: 'application/vnd.ms-excel'})
最后一步就是通过a标签下载到本地了，下载前可以利用a标签的download属性命名

// 创建一个a标签
var oA = document.createElement('a');
// 利用URL.createObjectURL()方法为a元素生成blob URL
oA.href = URL.createObjectURL(excelBlob);
// 给文件命名
oA.download = '学生名单.xls';
// 模拟点击
oA.click();
最后生成的xls效果如下：
js导出excel效果图
可以看出和浏览器的样式除了涉及到px的会有偏差，其它设置都是生效的，只要微调一下就可以达到想要的效果了

ps:因为权限问题，生成的excel的格式只能为.xls而且每次打开都会弹窗询问。所以建议打开后另存一份excel
web修理工
关注
专栏目录
js 导出excel
08-18
页面 table excel 导出
易语言高级表格导出EXCEL
04-21
在"易语言高级表格导出EXCEL"这个主题中，我们主要关注的是如何使用易语言来操作表格数据，并将这些数据高效地导出到Microsoft Excel格式。易语言提供了丰富的库函数和组件，使得开发者可以方便地实现对表格数据的...
js导出excel
diangengdan7347的博客
12-02 224
js导出Excel的方法 利用html的table表格的格式书写想要的excel格式 获取table的内容并组装成一个xls格式的字符串 利用Blob对象生成一个xls格式的文件 利用a标签的download属性创建文件名，并下载到本地 例子：js导出Excel table表格内容 先写一个正常的html表格 <!DOCTYPE html> <html lang=...
javaScript将页面的表格导成EXCEL(所见即所得)
iteye_18326的博客
03-07 416
&lt;html&gt; &lt;body&gt; &lt;script language="javascript"&gt; //导出excel function exportExcel(DivID){ //先声明Excel插件、Excel工作簿等对像 var jXls, myWorkbook, myWorksheet; try { //插件初始...
表格导出Excel_labview_Labview表格_Labview表格导出到excel表格_labview数据导入_labv
09-10
“表格导出Excel.vi”是LabVIEW程序，其主要功能是实现从LabVIEW的表格数据导出到Excel文件。这个过程涉及到几个关键步骤： 1. 数据准备：首先，需要将LabVIEW中的表格数据转换成可以被Excel识别的格式。这通常意味...
layui数据表格导出Excel插件
07-20
layui数据表格导出Excel插件是一款为layui框架设计的实用工具，它允许用户方便地将layui数据表格中的数据导出到Excel文件中。layui是一款轻量级的前端UI框架，以其简洁、优雅的代码风格和丰富的组件库深受开发者喜爱...
易语言源码易语言高级表格导出EXCEL.rar
02-22
易语言源码易语言高级表格导出EXCEL.rar 易语言源码易语言高级表格导出EXCEL.rar 易语言源码易语言高级表格导出EXCEL.rar 易语言源码易语言高级表格导出EXCEL.rar 易语言源码易语言高级表格导出EXCEL.rar ...
jQuery把页面上的表格导出Excel表格
05-25
通过jQuery技术，把页面上的表格导出Excel，导出时解决纯数据导出后显示科学计数法和日期型导出后为#号显示问题
js 导出excel(.xls格式)
10-21
为了减轻服务器的压力，很多网站采用的js下载或导出数据的方式。 该文件就是利用javascript把json数据转换成excel数据后，并进行了下载。 真实可用，而且使用起来方便快捷，为了开发快速，可以下载看看。 里面有教程的
JS导出Excel
07-25
Javascript导出Excel，自动合并单元格、自动列宽、自动获取table页面数据进行合并单元格。列
导出excel的JS
11-07
把网页的table元素生成excel　
js浏览器导出Excel[兼容所有浏览器]
09-14
本zip包主要是为了到处html页面中的table表格而设计的demo。可以参考文件里的Hello.html和testdao.html两个，经过本人测试都可以导出Excel。IE导出的效果反而比Google浏览器的好看。IE测试版本11.1715.14393.0。
js导出EXCEL
天使与海豚
04-19 125
========JS代码============================================== //导出EXCEL功能. function toExcelMethod(tableid) {//整个表格拷贝到EXCEL中 //alert(tableid); var curTbl = document.getElementById(tableid); var oX...
JS 导出EXCEL
gsgh123的专栏
06-23 1287
因为公司的程序需要导出Excel,而且页面展示数据用的是 Html table 所以必需用 JS 导出 EXCEL，调用EXCEL打开，但不自动保存。经过测式，IE6,IE7,IE8 都好用，测式Excel版本：2000，2003，2007导出代码如下：         //开始行StartRow，开始列StartCol，结束行EndRow，结束列EndCol，特殊转换列N
JS导出excel表格
yuanjun_05的专栏
01-09 145
function output() { //拷贝 var elTable = document.getElementById("data_table"); var oRangeRef = document.body.createTextRange(); oRangeRef.moveToElementText( elTable ); oRan...
JS导出EXCEL的两种方法
你若强大，来者不怕
07-11 1382
function method1(tableid) {//整个表格拷贝到EXCEL中     var curTbl = document.getElementById(tableid);     var oXL = new ActiveXObject("Excel.Application");     //创建AX对象excel     var oWB = oXL.Workbook
js导出Excel
WXC_MangGuo的博客
04-29 154
js导出Excel，从后端请求数据回来后直接放入导出 //表头 let str = ‘姓名，年龄，性别’+'\n'; //数据 let dataList = ["张三","15","男"] if(dataList && dataList.length){ for(let i = 0 ; i < dataList.length ; i++ ){ str+=`${dataList[i] + '\t'},`; str+='\n'; }
element ui表格导出excel
最新发布
08-29
要使用 Element UI 表格导出 Excel，你需要进行以下步骤： 1. 首先，确保你已经安装了 `file-saver` 和 `xlsx` 这两个库。你可以通过 npm 或 yarn 进行安装： ```bash npm install file-saver xlsx ``` 或者 `...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

web修理工

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值