js導出word和excel

有些時候，我們想把網(wǎng)頁上的一些數(shù)據(jù)下載下來，我們想要把它們用word和excel的方式保存，但是總是找不到合適的方法，最近我也遇到了這樣的問題，在網(wǎng)上搜羅一圈下來，也倒是有很多這方面的文章，但是主要是適用于IE瀏覽器的，對于其他瀏覽器幾乎都是用的插件，我就想用js自己寫一個可以導出文件的頁面。在搜尋了一些資料后，自己寫了一個比較簡潔的。
一般情況下，我們導出的內(nèi)容為表格數(shù)據(jù)居多，所以我們就以表格為例，導出頁面內(nèi)容

html頁面內(nèi)容

頁面就一個基本的表格，和兩個按鈕，分別用于導出word和excel

   <body>
   <table id="score">
      <tr>
        <th>Name</th>
        <th>Grade</th>
        <th>Math</th>
        <th>History</th>
      </tr>
      <tr>
        <td>Like</td>
        <td>1</td>
        <td>65</td>
        <td>83</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>1</td>
        <td>34</td>
        <td>89.5</td>
      </tr>
      <tr>
        <td>Lily</td>
        <td>2</td>
        <td>90</td>
        <td>95</td>
      </tr>
      <tr>
        <td>BOb</td>
        <td>2</td>
        <td>76.3</td>
        <td>80.1</td>
      </tr>
      <tr>
        <td>Sendy</td>
        <td>3</td>
        <td>60</td>
        <td>79</td>
      </tr>
  </table>
     <input id="Button1" type="button" value="導出word" onclick="tableExport('doc')" />
     <input id="Button1" type="button" value="導出excel" onclick="tableExport('excel')" />
    </body>
js內(nèi)容

  • IE瀏覽器
    IE瀏覽器是最特別的，它的excel導出是用到activex方式，使用js/vbs調(diào)用excel對象，下面這種方法僅限于IE，所以局限性比較大。在我的另一個文章中已經(jīng)寫了如何判斷瀏覽器類型請點擊這里進入：JavaScript判斷瀏覽器類型
    if(getExplorer()=='ie')
    {
    var curTbl = document.getElementById(tableid);
    var oXL = new ActiveXObject("Excel.Application");

              //創(chuàng)建AX對象excel 
          var oWB = oXL.Workbooks.Add();
          //獲取workbook對象 
          var xlsheet = oWB.Worksheets(1);
          //激活當前sheet 
          var sel = document.body.createTextRange();
          sel.moveToElementText(curTbl);
          //把表格中的內(nèi)容移到TextRange中 
          sel.select;
          //全選TextRange中內(nèi)容 
          sel.execCommand("Copy");
          //復制TextRange中內(nèi)容  
          xlsheet.Paste();
          //粘貼到活動的EXCEL中       
          oXL.Visible = true;
          //設(shè)置excel可見屬性

          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);
              //xls.visible = false;
              oXL.Quit();
              oXL = null;
              //結(jié)束excel進程，退出完成
              //window.setInterval("Cleanup();",1);
              idTmr = window.setInterval("Cleanup();", 1);

          }

      }

  • 其他主流瀏覽器（Chrome、Firefox等）
    其實只要懂這個基本步驟和原理，導出文件就變得輕而易舉了。下面的代碼是以導出word為例
    function tableExport(type){
    if(type=='doc'){
    var doc="";
    doc+="<table>";
    var html=document.getElementById("score").innerHTML;
    doc+=html;
    doc+="</table>";
    var docFile="<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:"+doc+"' xmlns='http://www.w3.org/TR/REC-html40'>";
    docFile=docFile+"<head></head>"+doc+"</body></html>";
    var base64data="base64,"+window.btoa(unescape(encodeURIComponent(docFile)));
    window.open('data:application/msword;'+ base64data);
    }
    }
    下面為導出word的示例圖片



    我們來詳細解讀一下代碼，首先漢化參數(shù)里的type是點擊按鈕是傳過去的對應的類型，doc或者excel，當判斷為doc時，定義變量doc，doc的值就是table（也就是要導出的）內(nèi)容，然后把doc放在docFile這樣的形式中，encodeURIComponent()函數(shù)可把字符串作為 URI 組件進行編碼,該方法不會對 ASCII 字母和數(shù)字進行編碼，也不會對這些 ASCII 標點符號進行編碼： - _ . ! ~ * ' ( ),unescape()通過找到形式為 %xx 和 %uxxxx 的字符序列（x 表示十六進制的數(shù)字），用 Unicode 字符 \u00xx 和 \uxxxx 替換這樣的字符序列進行解碼,btoa()就是把需要轉(zhuǎn)碼的進行base64編碼，編碼后才能被識別。

導出excel

      if(type=='excel'){
            var doc="";
            doc+="<table>";
            var html=document.getElementById("score").innerHTML;
            doc+=html;
            doc+="</table>";
            var docFile="<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:"+doc+"' xmlns='http://www.w3.org/TR/REC-html40'>";
            docFile=docFile+"<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>"+doc+"</body></html>";
            var base64data="base64,"+window.btoa(unescape(encodeURIComponent(docFile)));
            window.open('data:application/vnd.ms-excel;'+ base64data);
        }

下面為導出excel的示例圖片



你可以發(fā)現(xiàn)導出word和excel的代碼幾乎相同，所以我們可以合并他們，寫的更簡潔。

  function tableExport(type){
        var doc="";
        doc+="<table>";
        var html=document.getElementById("score").innerHTML;
        doc+=html;
        doc+="</table>";
        var a=document.body.innerHTML;
        var docFile="<html xmlns:o='urn:schemas-microsoft-com:office:office' xmlns:x='urn:schemas-microsoft-com:office:"+a+"' xmlns='http://www.w3.org/TR/REC-html40'>";
        docFile=docFile+"<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>"+doc+"</body></html>";
        var base64data="base64,"+window.btoa(unescape(encodeURIComponent(docFile)));
        if(type=='doc'){
            window.open('data:application/msword;'+ base64data);
        }else if(type=='excel'){
            window.open('data:application/vnd.ms-excel;'+ base64data);
        }
    }

但是唯一不同的是MIME類型，也就是代碼中window.open里的內(nèi)容不同，如果需要查看更多網(wǎng)頁中的重要MIME類型列表，點擊這里

擴展名 文檔類型 MIME Type
.doc Microsoft Word application/msword
.xls Microsoft Excel application/vnd.ms-excel
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 事件源對象 event.srcElement.tagName event.srcElement.type 捕獲釋放...
    孤魂草閱讀 997評論 0贊 0
  • 總的來說，兩種方法：服務器端生成和瀏覽器端生成。 服務器端生成就是：根據(jù)用戶請求，獲取相應的數(shù)據(jù)，使用poi/jx...
    顏之有霧閱讀 3,600評論 0贊 2
  • 第一章： JS簡介 從當初簡單的語言，變成了現(xiàn)在能夠處理復雜計算和交互，擁有閉包、匿名函數(shù)， 甚至元編程等...
    LaBaby_閱讀 1,756評論 0贊 6
  • （20141008周三） 人人都說開卷有益，其實到了現(xiàn)在這個時代，許多事，不一定還像過去一樣非從看書中了解不可。喜...
    不完整的容器閱讀 927評論 5贊 12
  • 第一章 ：悅來客棧 大唐隴州，敦煌郡有一處地方，喚作十里鄉(xiāng)，位于沙城和玉門關(guān)的必經(jīng)之路上。十里鄉(xiāng)周圍茫茫一片戈壁，...
    興?？?/span>閱讀 418評論 0贊 4

友情鏈接更多精彩內(nèi)容