JS實作導出Excel的五種方法詳解-js教程-PHP中文網

首頁

web前端

js教程

JS實作導出Excel的五種方法詳解

亚连

May 30, 2018 am 10:04 AM

excel javascript 匯出

這篇文章主要介紹了JS實現導出Excel的五種方法,結合實例形式較為詳細的分析了基於table表格導出Excel文件的相關操作技巧,並附源碼供讀者下載參考,需要的朋友可以參考下

本文實例講述了JS實作導出Excel的五種方法。分享給大家供大家參考，具體如下：

這五種方法前四種方法只支援IE瀏覽器，最後一個方法支援當前主流的瀏覽器（火狐，IE，Chrome，Opera，Safari）

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>html 表格导出道</title>
  <script language="JavaScript" type="text/javascript">
    //第一种方法
    function method1(tableid) {
      var curTbl = document.getElementById(tableid);
      var oXL = new ActiveXObject("Excel.Application");
      var oWB = oXL.Workbooks.Add();
      var oSheet = oWB.ActiveSheet;
      var sel = document.body.createTextRange();
      sel.moveToElementText(curTbl);
      sel.select();
      sel.execCommand("Copy");
      oSheet.Paste();
      oXL.Visible = true;
    }
    //第二种方法
    function method2(tableid)
    {
      var curTbl = document.getElementById(tableid);
      var oXL = new ActiveXObject("Excel.Application");
      var oWB = oXL.Workbooks.Add();
      var oSheet = oWB.ActiveSheet;
      var Lenr = curTbl.rows.length;
      for (i = 0; i < Lenr; i++)
      {    var Lenc = curTbl.rows(i).cells.length;
        for (j = 0; j < Lenc; j++)
        {
          oSheet.Cells(i + 1, j + 1).value = curTbl.rows(i).cells(j).innerText;
        }
      }
      oXL.Visible = true;
    }
    //第三种方法
    function getXlsFromTbl(inTblId, inWindow){
      try {
        var allStr = "";
        var curStr = "";
        if (inTblId != null && inTblId != "" && inTblId != "null") {
          curStr = getTblData(inTblId, inWindow);
        }
        if (curStr != null) {
          allStr += curStr;
        }
        else {
          alert("你要导出的表不存在");
          return;
        }
        var fileName = getExcelFileName();
        doFileExport(fileName, allStr);
      }
      catch(e) {
        alert("导出发生异常:" + e.name + "->" + e.description + "!");
      }
    }
    function getTblData(inTbl, inWindow) {
      var rows = 0;
      var tblDocument = document;
      if (!!inWindow && inWindow != "") {
        if (!document.all(inWindow)) {
          return null;
        }
        else {
          tblDocument = eval(inWindow).document;
        }
      }
      var curTbl = tblDocument.getElementById(inTbl);
      var outStr = "";
      if (curTbl != null) {
        for (var j = 0; j < curTbl.rows.length; j++) {
          for (var i = 0; i < curTbl.rows[j].cells.length; i++) {
            if (i == 0 && rows > 0) {
              outStr += " t";
              rows -= 1;
            }
            outStr += curTbl.rows[j].cells[i].innerText + "t";
            if (curTbl.rows[j].cells[i].colSpan > 1) {
              for (var k = 0; k < curTbl.rows[j].cells[i].colSpan - 1; k++) {
                outStr += " t";
              }
            }
            if (i == 0) {
              if (rows == 0 && curTbl.rows[j].cells[i].rowSpan > 1) {
                rows = curTbl.rows[j].cells[i].rowSpan - 1;
              }
            }
          }
          outStr += "rn";
        }
      }
      else {
        outStr = null;
        alert(inTbl + "不存在 !");
      }
      return outStr;
    }
    function getExcelFileName() {
      var d = new Date();
      var curYear = d.getYear();
      var curMonth = "" + (d.getMonth() + 1);
      var curDate = "" + d.getDate();
      var curHour = "" + d.getHours();
      var curMinute = "" + d.getMinutes();
      var curSecond = "" + d.getSeconds();
      if (curMonth.length == 1) {
        curMonth = "0" + curMonth;
      }
      if (curDate.length == 1) {
        curDate = "0" + curDate;
      }
      if (curHour.length == 1) {
        curHour = "0" + curHour;
      }
      if (curMinute.length == 1) {
        curMinute = "0" + curMinute;
      }
      if (curSecond.length == 1) {
        curSecond = "0" + curSecond;
      }
      var fileName = "table" + "_" + curYear + curMonth + curDate + "_"
          + curHour + curMinute + curSecond + ".csv";
      return fileName;
    }
    function doFileExport(inName, inStr) {
      var xlsWin = null;
      if (!!document.all("glbHideFrm")) {
        xlsWin = glbHideFrm;
      }
      else {
        var width = 6;
        var height = 4;
        var openPara = "left=" + (window.screen.width / 2 - width / 2)
            + ",top=" + (window.screen.height / 2 - height / 2)
            + ",scrollbars=no,width=" + width + ",height=" + height;
        xlsWin = window.open("", "_blank", openPara);
      }
      xlsWin.document.write(inStr);
      xlsWin.document.close();
      xlsWin.document.execCommand(&#39;Saveas&#39;, true, inName);
      xlsWin.close();
    }
    //第四种
    function method4(tableid){
      var curTbl = document.getElementById(tableid);
      var oXL;
      try{
        oXL = new ActiveXObject("Excel.Application"); //创建AX对象excel
      }catch(e){
        alert("无法启动Excel!\n\n如果您确信您的电脑中已经安装了Excel，"+"那么请调整IE的安全级别。\n\n具体操作：\n\n"+"工具 → Internet选项 → 安全 → 自定义级别 → 对没有标记为安全的ActiveX进行初始化和脚本运行 → 启用");
        return false;
      }
      var oWB = oXL.Workbooks.Add(); //获取workbook对象
      var oSheet = oWB.ActiveSheet;//激活当前sheet
      var sel = document.body.createTextRange();
      sel.moveToElementText(curTbl); //把表格中的内容移到TextRange中
      sel.select(); //全选TextRange中内容
      sel.execCommand("Copy");//复制TextRange中内容
      oSheet.Paste();//粘贴到活动的EXCEL中
      oXL.Visible = true; //设置excel可见属性
      var fname = oXL.Application.GetSaveAsFilename("将table导出到excel.xls", "Excel Spreadsheets (*.xls), *.xls");
      oWB.SaveAs(fname);
      oWB.Close();
      oXL.Quit();
    }
    //第五种方法
    var idTmr;
    function getExplorer() {
      var explorer = window.navigator.userAgent ;
      //ie
      if (explorer.indexOf("MSIE") >= 0) {
        return &#39;ie&#39;;
      }
      //firefox
      else if (explorer.indexOf("Firefox") >= 0) {
        return &#39;Firefox&#39;;
      }
      //Chrome
      else if(explorer.indexOf("Chrome") >= 0){
        return &#39;Chrome&#39;;
      }
      //Opera
      else if(explorer.indexOf("Opera") >= 0){
        return &#39;Opera&#39;;
      }
      //Safari
      else if(explorer.indexOf("Safari") >= 0){
        return &#39;Safari&#39;;
      }
    }
    function method5(tableid) {
      if(getExplorer()==&#39;ie&#39;)
      {
        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 = &#39;data:application/vnd.ms-excel;base64,&#39;,
          template = &#39;<html><head><meta charset="UTF-8"></head><body><table>{table}</table></body></html>&#39;,
          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 || &#39;Worksheet&#39;, table: table.innerHTML}
        window.location.href = uri + base64(format(template, ctx))
      }
    })()
  </script>
</head>
<body>
<p >
  <button type="button" onclick="method1(&#39;tableExcel&#39;)">导出Excel方法一</button>
  <button type="button" onclick="method2(&#39;tableExcel&#39;)">导出Excel方法二</button>
  <button type="button" onclick="getXlsFromTbl(&#39;tableExcel&#39;,&#39;myp&#39;)">导出Excel方法三</button>
  <button type="button" onclick="method4(&#39;tableExcel&#39;)">导出Excel方法四</button>
  <button type="button" onclick="method5(&#39;tableExcel&#39;)">导出Excel方法五</button>
</p>
<p id="myp">
<table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">
  <tr>
    <td colspan="5" align="center">html 表格导出道Excel</td>
  </tr>
  <tr>
    <td>列标题1</td>
    <td>列标题2</td>
    <td>类标题3</td>
    <td>列标题4</td>
    <td>列标题5</td>
  </tr>
  <tr>
    <td>aaa</td>
    <td>bbb</td>
    <td>ccc</td>
    <td>ddd</td>
    <td>eee</td>
  </tr>
  <tr>
    <td>AAA</td>
    <td>BBB</td>
    <td>CCC</td>
    <td>DDD</td>
    <td>EEE</td>
  </tr>
  <tr>
    <td>FFF</td>
    <td>GGG</td>
    <td>HHH</td>
    <td>III</td>
    <td>JJJ</td>
  </tr>
</table>
</p>
</body>
</html>

登入後複製

今天上來發現，好多人，會遇到檔案名，格式等問題。這裡添加一種方法。相容性我沒有測試，大家可以試下，不過需要利用JQ直接貼程式碼了。原始碼可點選此處本站下載。注意一定要引jquery-3.2.1.min.js，jquery.table2excel.js對應的檔案。 jquery-3.2.1.min.js這個看你對應的檔案版本，不重要。如有問題，歡迎批評指導。

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title>html 表格导出道</title>
  <script src="js/vendor/jquery-3.2.1.min.js"></script>
  <script src="jquery.table2excel.js"></script>
  <script language="JavaScript" type="text/javascript">
    $(document).ready(function () {
      $("#btnExport").click(function () {
        $("#tableExcel").table2excel({
          exclude : ".noExl", //过滤位置的 css 类名
          filename : "你想说啥" + new Date().getTime() + ".xls", //文件名称
          name: "Excel Document Name.xlsx",
          exclude_img: true,
          exclude_links: true,
          exclude_inputs: true
        });
      });
    });
  </script>
</head>
<body>
<p >
  <button type="button" id="btnExport" onclick="method5(&#39;tableExcel&#39;)">导出Excel</button>
</p>
<p id="myp">
  <table id="tableExcel" width="100%" border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td colspan="5" align="center">html 表格导出道Excel</td>
    </tr>
    <tr>
      <td>列标题1</td>
      <td>列标题2</td>
      <td>类标题3</td>
      <td>列标题4</td>
      <td>列标题5</td>
    </tr>
    <tr>
      <td>aaa</td>
      <td>bbb</td>
      <td>ccc</td>
      <td>ddd</td>
      <td>eee</td>
    </tr>
    <tr>
      <td>AAA</td>
      <td>BBB</td>
      <td>CCC</td>
      <td>DDD</td>
      <td>EEE</td>
    </tr>
    <tr>
      <td>FFF</td>
      <td>GGG</td>
      <td>HHH</td>
      <td>III</td>
      <td>JJJ</td>
    </tr>
  </table>
</p>
</body>
</html>

登入後複製

上面是我整理給大家的，希望今後會對大家有幫助。

詳解Vue.js專案API、Router設定分割實作

Vue實作active點擊切換方法

vue中手機號碼,郵件信箱正規驗證以及60s發送驗證碼的實例

以上是JS實作導出Excel的五種方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Java教學

1677

CakePHP 教程

1431

Laravel 教程

1334

PHP教程

1280

C# 教程

1257

Related knowledge

excel列印表格框線消失怎麼辦 Mar 21, 2024 am 09:50 AM

如果在開啟一份需要列印的文件時，在列印預覽裡我們會發現表格框線不知為何消失不見了，遇到這樣的情況，我們就要及時進行處理，如果你的列印文件裡也出現了此類的問題，那麼就和小編一起來學習下邊的課程吧：excel列印表格框線消失怎麼辦？ 1.開啟一份需要列印的文件，如下圖所示。　　2、選取所有需要的內容區域，如下圖所示。　　3、按滑鼠右鍵，選擇「設定儲存格格式」選項，如下圖所示。　　4、點選視窗上方的「邊框」選項，如下圖所示。　　5、在左側的線條樣式中選擇細實線圖樣，如下圖所示。　　6、選擇“外邊框”

excel同時篩選3個以上關鍵字怎麼操作 Mar 21, 2024 pm 03:16 PM

在日常辦公中經常使用Excel來處理數據，時常遇到需要使用「篩選」功能。當我們在Excel中選擇執行「篩選」時，對於同一列而言，最多只能篩選兩個條件，那麼，你知道excel同時篩選3個以上關鍵字該怎麼操作嗎？接下來，就請小編為大家示範一次。第一種方法是將條件逐步加入篩選器。如果要同時篩選出三個符合條件的明細，首先需要逐步篩選出其中一個。開始時，可以先依照條件篩選出姓「王」的員工。然後按一下【確定】，接著在篩選結果中勾選【將目前所選內容新增至篩選器】。操作步驟如下圖所示。　　同樣，再次分別執行篩選

excel表格相容模式改正常模式的方法 Mar 20, 2024 pm 08:01 PM

在我們日常的工作學習中，從他人處拷貝了Excel文件，打開進行內容添加或重新編輯後，再保存的有時候，有時會提示出現兼容性檢查的對話框，非常的麻煩，不知道Excel軟體，可不可改為正常模式呢？那麼下面就由小編為大家帶來解決這個問題的詳細步驟，讓我們一起來學習吧。最後一定記得收藏保存。 1.開啟一個工作表，在工作表的名稱中顯示多出來一個相容模式，如圖所示。 2.在這個工作表中，進行了內容的修改後保存，結果總是彈出兼容檢查器的對話框，很麻煩看見這個頁面，如圖所示。　　3、點選Office按鈕，點另存為，然

抖音私訊表情包怎麼弄到微信？私訊表情包怎麼匯出？ Mar 21, 2024 pm 10:01 PM

隨著社群媒體的不斷興起，抖音作為一款備受歡迎的短影片平台，吸引了大量用戶的青睞。在抖音上，使用者不僅可以展現自己的生活，還能與其他使用者互動。在這種互動中，表情包逐漸成為使用者表達情感的重要方式。一、抖音私訊表情包怎麼弄到微信？首先，要在抖音平台上取得私訊表情包，需要登入抖音帳號，然後瀏覽並選擇喜歡的表情包，可以選擇傳送給好友或自己收藏。在抖音收到表情包後，可以透過私訊介面長按該表情包，然後選擇「加入表情」功能。這樣，就可以將這個表情包加入抖音的表情庫中。 3.接下來，我們需要將抖音表情庫中的

excel上標應該如何設定 Mar 20, 2024 pm 04:30 PM

在處理資料時，有時我們會遇到資料包含了倍數、溫度等等各種符號的時候，你知道excel上標應該如何設定嗎？我們在使用excel處理資料時，如果不會設定上標，這可是會讓我們的許多資料在輸入時就會比較麻煩。今天小編就為大家帶來了excel上標的具體設定方法。 1.首先，讓我們打開桌面上的MicrosoftOfficeExcel文檔，選擇需要修改為上標的文字，具體如圖所示。 2.然後，點擊右鍵，點擊後出現的選單中，選擇「設定儲存格格式」選項，具體如圖所示。 3.接下來，在系統自動彈出的「儲存格格式」對話框

excel中iif函數的用法 Mar 20, 2024 pm 06:10 PM

大部分使用者使用Excel都是用來處理表格資料的，其實Excel還有vba程式編寫，這個除了專人士應該沒有多少使用者用過此功能，在vba編寫時常常會用到iif函數，它其實跟if函數的功能差不多，下面小編跟大家介紹下iif函數的用法。 Excel中SQL語句和VBA程式碼中都有iif函數。 iif函數和excel工作表中的IF函數用法相似，執行真假值判斷，根據邏輯計算的真假值，傳回不同結果。 IF函數用法是(條件，是，否)。 VBA中的IF語句和IIF函數，前者IF語句是控制語句可以依照條件執行不同的語句，後者

excel閱讀模式在哪裡設置 Mar 21, 2024 am 08:40 AM

在軟體的學習中，我們習慣用excel,不僅是因為需要方便，更因為它可以滿足多種實際工作中需要的格式，而且excel運用起來非常的靈活，有種模式是方便閱讀的，今天帶給大家的就是：excel閱讀模式在哪裡設定。 1.開啟電腦，然後再開啟Excel應用，找到目標資料。 2.要想在Excel中，設定閱讀模式，有兩種方式。第一種：Excel中，有大量的便利處理方式，分佈在Excel中佈局中。在Excel的右下角，有設定閱讀模式的快捷方式，找到十字標誌的圖案，點擊即可進入閱讀模式，在十字標誌的右邊有一個小的三