精华内容
下载资源
问答
  • 主要介绍了JS实现导出Excel的五种方法,结合实例形式较为详细的分析了基于table表格导出Excel文件的相关操作技巧,并附源码供读者下载参考,需要的朋友可以参考下
  • 主要介绍了基于JS实现table导出Excel并保留样式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
  • js实现Excel导出

    2019-03-01 14:10:22
    最近在做一个项目,涉及到导出数据到Excel表格,由于是采用的前后端分离模式开发的,之前常用的方法已经失效,在网上找了一些资料和方法,已经完成整理,都能正常使用
  • JS导出页面数据到excel

    2018-10-10 10:38:18
    这是一个JS工具类程序,可以将页面数据导出excel表格,不使用后台代码。纯前端代码实现。简单实用
  • 主要为大家详细介绍了js实现数据导出EXCEL,支持大量数据导出,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
  • 前台将数据展示到页面上 如下图 ...//jQuery HTML导出Excel文件(兼容IE及所有浏览器) function ExportToExcel(tableid) { filename = "能力信息"; if (getExplorer() == 'ie' || getExplorer() == ...
    前台将数据展示到页面上  如下图

     

    将table表的id传入ExportToExcel方法中即可

    //jQuery HTML导出Excel文件(兼容IE及所有浏览器)
    function ExportToExcel(tableid) {
        filename = "能力信息";
        if (getExplorer() == 'ie' || getExplorer() == undefined) {
            HtmlExportToExcelForIE(tableid, filename);
        }else {
            HtmlExportToExcelForEntire(tableid, filename)
        }
    }
    //IE浏览器导出Excel
    function HtmlExportToExcelForIE(tableid, filename) {
        try {
            var winname = window.open('', '_blank', 'top=10000');
            var strHTML = document.getElementById(tableid).innerHTML;
    
            winname.document.open('application/vnd.ms-excel', 'export excel');
            winname.document.writeln(strHTML);
            winname.document.execCommand('saveas', '', filename + '.xls');
            winname.close();
    
        } catch (e) {
            alert(e.description);
        }
    }
    
    //非IE浏览器导出Excel
    var HtmlExportToExcelForEntire = (function() {
        var uri = 'data:application/vnd.ms-excel;base64,',
            template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>',
            base64 = function(s) { 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 }
            document.getElementById("dlink").href = uri + base64(format(template, ctx));
            document.getElementById("dlink").download = name + ".xls";
            document.getElementById("dlink").click();
        }
    })()
    
    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';
        }
    }

     

    展开全文
  • js导出EXCEL

    2016-01-05 14:05:51
    js导出EXCEL,生成的伪xls文件 支持中文 1,我用谷歌浏览器下载没有问题,可能会碰见下载文件没有后缀名的问题,另存就可以 2,还有另一种解决方案,就是修改base64编码,使其支持中文,下篇文件会列出
  • Excel导出js实现

    2018-12-27 15:45:28
    Excel导出js实现.
  • vue实现导出的两个js文件-Blob+Export2
  • 1.js导出csv 简单来说csv就是一种数据以逗号隔开的,文件以纯文本形式存储表格数据。csv优点是实现起来相对简单,但是不支持多sheet和样式 具体可以查看CSV百度百科进行了解 根据csv格式的说明,所以我们实现导出csv...

    1.js导出csv

    简单来说csv就是一种数据以逗号隔开的,文件以纯文本形式存储表格数据。
    csv优点是实现起来相对简单,但是不支持多sheet和样式
    具体可以查看CSV百度百科进行了解

    根据csv格式的说明,所以我们实现导出csv就很简单了,只要原始数据转换成列数据与列数据之间用逗号隔开,行数据进行换行格式的文本数据其后缀为 .csv 就可以了
    导出示例:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
    </head>
    <body>
        <textarea id="textarea" cols="30" rows="10">列头1,列头2,列头3,列头4,列头5
    r1.1,r1.2,r1.3,r1.4,r1.5
    r2.1,r2.2,r2.3,r2.4,r2.5
    r3.1,r3.2,r3.3,r3.4,r3.5
    r4.1,r4.2,r4.3,r4.4,r4.5
    r5.1,r5.2,r5.3,r5.4,r5.5
    r6.1,r6.2,r6.3,r6.4,r6.5
    r7.1,r7.2,r7.3,r7.4,r7.5</textarea>
        <script>
            var text = document.getElementById("textarea").value;
            var blob = new Blob([text], { type: "text/comma-separated-values" });
            var a = document.createElement("a");
            a.href = URL.createObjectURL(blob);
            a.download = "01.csv";
            a.innerHTML = "下载"
            document.body.appendChild(a);
        </script>
    </body>
    </html>
    
    img_38cf34f059185e335d35ac01b88b8ca8.gif
    aa1.gif

    2.js导出xls

    这个方法是很早前在网上发现的。
    其实它的实现原理也很简单就是直接将嵌有HTML表格的HTML代码直接保存为.xls后缀的文件。
    这种方式的好处是能保留HTML原来设计好的样式,但是你要事先设置好表格显示排版

    img_26da2a6e44e60dee98531bec682db1fe.gif

    导出示例:

    <html>
    
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    </head>
    
    <body>
      <table border="1">
        <tr>
          <th height="40" colspan="6" style="font-size:18px">
            <div align="center">请假条</div>
          </th>
        </tr>
        <tr>
          <td height="40" width="80">
            <div align="center">姓名</div>
          </td>
          <td width="180">&nbsp;</td>
          <td width="80">
            <div align="center">部门</div>
          </td>
          <td width="180">&nbsp;</td>
          <td width="80">
            <div align="center">职务</div>
          </td>
          <td width="180">&nbsp;</td>
        </tr>
        <tr>
          <td height="40" colspan="6">1、请假类别: &nbsp;事假 &nbsp;病假 &nbsp;婚假 &nbsp;丧假 &nbsp;公假 &nbsp;伤假 &nbsp;产假 &nbsp;其他
        </tr>
        <tr>
          <td height="80" colspan="6">
            <p>2、请假事由:</p>
            <p>&nbsp;</p>
          </td>
        </tr>
        <tr>
          <td height="40" colspan="6">3、请假时间:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;至&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;日</td>
        </tr>
        <tr>
          <td height="40">
            <div align="center">审核意见</div>
          </td>
          <td colspan="5">&nbsp;</td>
        </tr>
      </table>
      <script>
        var tableHTML = document.querySelector("table").outerHTML;
        var xlsContent= `<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel"
      xmlns="http://www.w3.org/TR/REC-html40">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <meta name="ProgId" content="Excel.Sheet" /> 
    </head>
    <body>${tableHTML}</body>
    </html>`; 
        var blob = new Blob([xlsContent], { type: "application/vnd.ms-excel" });
        var a = document.createElement("a");
        a.href = URL.createObjectURL(blob);
        a.download = "demo.xls";
        a.innerHTML = "下载xls"
        document.body.appendChild(a); 
      </script>
    </body>
    </html>
    
    img_fd2b52362c78f64786f28be23aa61677.gif
    展开全文
  • 下载过别人的没有支持ie11的,页面js导出表格,支持各浏览器,包括ie11
  • js操作table导出excel

    2018-05-27 16:30:34
    资源提供js操作html、table导出生成excel文件,代码简介易懂
  • 前端导出数据为excel(兼容chrome 和 IE10以上版本),列举了网上常用的两种方法外,新增了可以导出超过5W行数据的方法
  • 当vue.js需要导出Excel文件时,需要的Blob.js和Export2Excel.js.
  • js导出excel为xlsx格式

    2018-05-27 17:31:55
    Javascript导出excel为xlsx格式,兼容IE6+和主流浏览器,下载下来直接可以使用。 其他javascript导出excel插件可看作者文章:https://blog.csdn.net/qq_21693027/article/details/80459677
  • js导出excel.zip

    2020-04-22 18:24:22
    包含easyui,datagrid的列表导出,支持多表头,数据值格式化。QUICKUI,QUIGRID导出,导出excel格式为:xls。
  • 超好用的js操作Excel实现数据导入导出JS包。只需引入JS包即可完成功能开发。压缩包中有Demo,参照编写即可。
  • js-json导出excel

    2019-02-15 08:46:40
    js-json导出excel,下载文件为deml,直接可拓展至程序中
  • js前端导出Excel的方法

    2020-11-27 04:13:57
    要求把项目中的table表格导出Excel 需求分析及解决: 既然需要导出,是报表的可能性比较大,我的项目中就是这样,那既然是报表导出,可以是前端导出,也可以是后端导出(技术包括POI或者报表工具等),这篇文章主 ...
  • js 导出excel(.xls格式)

    2020-10-21 15:08:09
    为了减轻服务器的压力,很多网站采用的js下载或导出数据的方式。 该文件就是利用javascript把json数据转换成excel数据后,并进行了下载。 真实可用,而且使用起来方便快捷,为了开发快速,可以下载看看。 里面有教程...
  • 本文介绍了js基于FileSaver.js 浏览器导出Excel文件,分享给大家,也给自己做个笔记 限制一:不同浏览器对 blob 对象有不同的限制 具体看看下面这个表格(出自FileSaver.js): Browser Constructs as ...
  • 有个项目需要用到jquery 的easyui和导出excel,发现官方下载的datagrid-export.js有几处bug,例如导出的excel格式,长数字会默认按科学计数法显示或没了零开头的数字,不符合所见即所得要求。 首先说明前提条件,...
  • js实现一键导出Excel

    万次阅读 2017-12-05 14:00:25
    想要如下页面,一键导出Excel:html:<div class="container"> <table id="backViewTable" class="table table-hover table-sm table2excel"> <td># <td>ID</td>

    想要如下页面,一键导出Excel:

    这里写图片描述

    html:

    <div class="container">
            <table id="backViewTable" class="table table-hover table-sm table2excel">
                <tr>
                    <td>#</td>
                    <td>ID</td>
                    <td>姓名</td>
                    <td>座位号</td>
                    <td>操作</td>
                </tr>
                <tr>
                    <th scope="row">1</th>
                    <td>1234</td>
                    <td>李文斐</td>
                    <td>2楼 3排 34号 </td>
                    <td><input class="btn-primary" type="button" value="删除"/></td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>2345</td>
                    <td>lwf</td>
                    <td>1楼 3排 34号</td>
                    <td><input class="btn-primary" type="button" value="删除"/></td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>3456</td>
                    <td>Lee</td>
                    <td>1楼 3排 12号</td>
                    <td><input class="btn-primary" type="button" value="删除"/></td>
                </tr>
            </table>
            <button class="btn btn-primary btn-sm" onclick="tablesToExcel(['backViewTable'], ['ProductDay1'], 'TestBook.xls', 'Excel')">Export to Excel</button>
        </div>

    js:

    <script>
        var tablesToExcel = (function() {
            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]; }) }
            return function(tables, wsnames, wbname, appname) {
                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>';
    
    //                    控制导出的列数(在本例中,最后一列为button,导出的文件会出错,所以导出到倒数第二列
                        for (var k = 0; k < tables[i].rows[j].cells.length-1; 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);
            }
        })();
        </script>

    点击“export to Excel”,便开始下载导出的Excel,,打开如下:
    这里写图片描述

    参考链接:Here is Full Example

    展开全文
  • Export2Excel.js导出excel

    2020-11-18 18:41:56
    包含Blob.js和Export2Excel.js文件,支持导出excel内容的宽度自适应,在vue项目中实现前端导出Excel文件
  • js实现Excel导出功能

    千次阅读 2019-05-09 16:21:18
    使用get方式请求后台接口,能获取到导出文件的地址,此时就相当于浏览器打开一个新的链接 <button type="button" id="export" class="btn"><i class="fa fa-download"></i> 导出</button> ...
    1. 使用get方式请求后台接口,能获取到导出文件的地址,此时就相当于浏览器打开一个新的链接

      <button type="button" id="export" class="btn"><i class="fa fa-download"></i>  导出</button>
      
       // 导出功能
      $('#export').on('click',function () {
      	/**
      	*这里是我拼接请求数据,具体请求数据看自己需求
      	*/
          var new_partsName = $('#addPartsName').val(); //配件名
          var brandName = $('#brandName').val(); //配件品牌
          var partsType = $('#partsType').val(); //品牌型号
          var partsUnit = $('#partsUnit').val(); //配件单位
          var purchasePrice = $('#purchasePrice').val(); //配件单价
          var laborCost = $('#laborCost').val(); //人工费
          var price = $('#price').val(); //配件费
          var partsPeriod = $('#partsPeriod').val(); //配件周期
          var addStatus = $('#addStatus').val(); //状态
          var isUse = $('#isUse').val(); //是否常用
          var remark=$('#addRemark').val() || null;
          var imgArr=[];
          var liNode=$('#uploadImgBox').find('li');
          for(var i=0;i<liNode.length;i++){
              imgArr.push($(liNode[i]).find('img').attr('src'));
          }
          // 请求参数
          data = {
              user_id: win.utils.getCookie('user_id'),
              session: win.utils.getCookie('session'),
              firstTypeId: $('#firstTypeName').val() || '',
              firstTypeName:$('#firstTypeName').find("option:selected").text()=="请选择一级配件类型"?'':$('#firstTypeName').find("option:selected").text(),
              secondTypeId: $('#secondTypeName').val() || '',
              secondTypeName:$('#secondTypeName').find("option:selected").text()=="请选择二级配件类型"?'':$('#secondTypeName').find("option:selected").text(),
              partsName:new_partsName || '',
              brandName: brandName || '',
              partsType:partsType || '',
              unit:partsUnit || '',
              purchasePrice:purchasePrice || '',
              laborCost:laborCost || '',
              price:price || '',
              partsPeriod:partsPeriod || '',
              picUrl:'',
              status:addStatus || '',
              isUse:isUse || '',
              remark:remark || ''
          };
          var dataArr=[];
          for(var key in data){
              dataArr.push(key+'='+data[key]);
          }
          /**
      	*以上是我拼接请求数据,具体请求数据看自己需求
      	*/
      	
          window.location.href=win.utils.services.exportPartsList+'?'+dataArr.join('&');
      });
      
    2. 通过xhr请求导出

      //dataStr为参数,即导出数据的条件
      function download(dataStr) {
          var url = win.utils.services.exportPartsList+'?'+dataStr;
          var xhr = new XMLHttpRequest();
          xhr.open('get', url, true);        // 也可以使用POST方式,根据接口
          xhr.responseType = "blob";    // 返回类型blob
          // 定义请求完成的处理函数,请求前也可以增加加载框/禁用下载按钮逻辑
          xhr.onload = function () {
              // 请求完成
              if (this.status === 200) {
                  // 返回200
                  var blob = this.response;
                  var reader = new FileReader();
                  reader.readAsDataURL(blob);    // 转换为base64,可以直接放入a表情href
                  reader.onload = function (e) {
                      // 转换完成,创建一个a标签用于下载
                      var a = document.createElement('a');
                      a.download = 'data.xlsx';
                      a.href = e.target.result;
                      $("body").append(a);    // 修复firefox中无法触发click
                      a.click();
                      $(a).remove();
                  }
              }
          };
          // 发送ajax请求
          xhr.send()
      }
      
    展开全文
  • html> head> meta charset="utf-8"> script type="text/javascript" language="javascript"> var idTmr; function getExplorer() { var explorer = window.navigator.userAgen
  • HTML用JS导出Excel的五种方法.javascript导出excel的5种方法

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,003
精华内容 12,401
关键字:

js实现导出excel