当前位置: 首页 > news >正文

js导出excel文件

<div id="tablesDiv">
    <table id="tabDiv1">
        <tbody><tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>0001</td>
            <td>张三</td>
            <td>24</td>
        </tr>
    </tbody></table>
    <table id="tabDiv2">
        <tbody><tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>0002</td>
            <td>李四</td>
            <td>24</td>
        </tr>
    </tbody></table>
    <table id="tabDiv3">
        <tbody><tr>
            <td>ID</td>
            <td>姓名</td>
            <td>年龄</td>
        </tr>
        <tr>
            <td>0003</td>
            <td>王五</td>
            <td>24</td>
        </tr>
    </tbody></table>
    <button onclick="exp();">export to excel...</button>
</div>
#tabDiv1,#tabDiv2,#tabDiv3 {
    border:1px solid pink;
    margin:10px auto;
    width:100%;
}
button {
    width:100%;
}
 function exp() {
     tablesToExcel(['tabDiv1', 'tabDiv2', 'tabDiv3'], ['yy', 'bb', 'cc'], "abc.xls", "Excel");
 }
 //导出excel包含多个sheet
 //tables:tableId的数组;wsbames:sheet的名字数组;wbname:工作簿名字;appname:Excel
 function tablesToExcel(tables, wsnames, wbname, appname) {

     var uri = 'data:application/vnd.ms-excel;base64,',
         tmplWorkbookXML = '<?xml version="1.0"?><?mso-application progid="Excel.Sheet"?><Workbook xmlns="urn:schemas-microsoft-com:office:spreadsheet" xmlns:ss="urn:schemas-microsoft-com:office:spreadsheet">' +
         '<DocumentProperties xmlns="urn:schemas-microsoft-com:office:office"><Author>Axel Richter</Author><Created>{created}</Created></DocumentProperties>' +
         '<Styles>' +
         '<Style ss:ID="Currency"><NumberFormat ss:Format="Currency"></NumberFormat></Style>' +
         '<Style ss:ID="Date"><NumberFormat ss:Format="Medium Date"></NumberFormat></Style>' +
         '</Styles>' +
         '{worksheets}</Workbook>',
         tmplWorksheetXML = '<Worksheet ss:Name="{nameWS}"><Table>{rows}</Table></Worksheet>',
         tmplCellXML = '<Cell{attributeStyleID}{attributeFormula}><Data ss:Type="{nameType}">{data}</Data></Cell>',
         base64 = function(s) {
             return window.btoa(unescape(encodeURIComponent(s)))
         },
         format = function(s, c) {
             return s.replace(/{(\w+)}/g, function(m, p) {
                 return c[p];
             })
         }

     var ctx = "";
     var workbookXML = "";
     var worksheetsXML = "";
     var rowsXML = "";

     for (var i = 0; i < tables.length; i++) {
         if (!tables[i].nodeType)
             tables[i] = document.getElementById(tables[i]);

         //           控制要导出的行数
         for (var j = 0; j < tables[i].rows.length; j++) {
             rowsXML += '<Row>';

             for (var k = 0; k < tables[i].rows[j].cells.length; k++) {
                 var dataType = tables[i].rows[j].cells[k].getAttribute("data-type");
                 var dataStyle = tables[i].rows[j].cells[k].getAttribute("data-style");
                 var dataValue = tables[i].rows[j].cells[k].getAttribute("data-value");
                 dataValue = (dataValue) ? dataValue : tables[i].rows[j].cells[k].innerHTML;
                 var dataFormula = tables[i].rows[j].cells[k].getAttribute("data-formula");
                 dataFormula = (dataFormula) ? dataFormula : (appname == 'Calc' && dataType == 'DateTime') ? dataValue : null;
                 ctx = {
                     attributeStyleID: (dataStyle == 'Currency' || dataStyle == 'Date') ? ' ss:StyleID="' + dataStyle + '"' : '',
                     nameType: (dataType == 'Number' || dataType == 'DateTime' || dataType == 'Boolean' || dataType == 'Error') ? dataType : 'String',
                     data: (dataFormula) ? '' : dataValue,
                     attributeFormula: (dataFormula) ? ' ss:Formula="' + dataFormula + '"' : ''
                 };
                 rowsXML += format(tmplCellXML, ctx);
             }
             rowsXML += '</Row>'
         }
         ctx = {
             rows: rowsXML,
             nameWS: wsnames[i] || 'Sheet' + i
         };
         worksheetsXML += format(tmplWorksheetXML, ctx);
         rowsXML = "";
     }

     ctx = {
         created: (new Date()).getTime(),
         worksheets: worksheetsXML
     };
     workbookXML = format(tmplWorkbookXML, ctx);

     //       查看后台的打印输出
     //console.log(workbookXML);

     var link = document.createElement("A");
     link.href = uri + base64(workbookXML);
     link.download = wbname || 'Workbook.xls';
     link.target = '_blank';
     document.body.appendChild(link);
     link.click();
     document.body.removeChild(link);

 }

 

代码出自:JQ22.com

 

转载于:https://www.cnblogs.com/mystudy/p/9987312.html

相关文章:

  • Java枚举比较用equals还是==
  • vue两个组件间值的传递或修改方式
  • 如何在国内构建一个硅谷级的高效技术团队?
  • C#中的结构体与类的区别 (转载)
  • 如何用纯 CSS 创作一个记事本翻页动画
  • SpringBoot整合Angular应用第三弹-渲染RestAPI数据
  • CentOS从零开始部署Nodejs项目
  • d6
  • Jeff Bean谈Flink与流式处理的5大新发现
  • 解决 scapy “NameError: global name 'wrpcap' is not defined” 错误
  • 【xshell】xshell设置快捷键 设置Ctrl+C Ctrl+V快捷键为复制粘贴
  • Android FlatBuffers数据交互
  • 【man】 查看命令帮助文档
  • react 使用 react-loadable分包
  • Emacs学习(一)
  • [Vue CLI 3] 配置解析之 css.extract
  • 《剑指offer》分解让复杂问题更简单
  • 《深入 React 技术栈》
  • Angular4 模板式表单用法以及验证
  • create-react-app项目添加less配置
  • java取消线程实例
  • MYSQL 的 IF 函数
  • Python代码面试必读 - Data Structures and Algorithms in Python
  • Redis 中的布隆过滤器
  • Spring Cloud中负载均衡器概览
  • 百度地图API标注+时间轴组件
  • 编写高质量JavaScript代码之并发
  • 订阅Forge Viewer所有的事件
  • 给Prometheus造假数据的方法
  • 后端_ThinkPHP5
  • 聊聊flink的TableFactory
  • 码农张的Bug人生 - 见面之礼
  • 驱动程序原理
  • 如何编写一个可升级的智能合约
  • 入门到放弃node系列之Hello Word篇
  • 深入浅出webpack学习(1)--核心概念
  • ​如何防止网络攻击?
  • (4) openssl rsa/pkey(查看私钥、从私钥中提取公钥、查看公钥)
  • (aiohttp-asyncio-FFmpeg-Docker-SRS)实现异步摄像头转码服务器
  • (solr系列:一)使用tomcat部署solr服务
  • (分享)一个图片添加水印的小demo的页面,可自定义样式
  • (蓝桥杯每日一题)love
  • (南京观海微电子)——I3C协议介绍
  • (十一)图像的罗伯特梯度锐化
  • .net mvc actionresult 返回字符串_.NET架构师知识普及
  • .NET 中创建支持集合初始化器的类型
  • @Documented注解的作用
  • @Transient注解
  • [ vulhub漏洞复现篇 ] JBOSS AS 4.x以下反序列化远程代码执行漏洞CVE-2017-7504
  • [1127]图形打印 sdutOJ
  • [AIGC] Redis基础命令集详细介绍
  • [ai笔记4] 将AI工具场景化,应用于生活和工作
  • [android] 练习PopupWindow实现对话框
  • [Android]RecyclerView添加HeaderView出现宽度问题
  • [Angular] 笔记 7:模块