js导出word和excel

2017-07-25 本文已影响0人每木传情

有些时候，我们想把网页上的一些数据下载下来，我们想要把它们用word和excel的方式保存，但是总是找不到合适的方法，最近我也遇到了这样的问题，在网上搜罗一圈下来，也倒是有很多这方面的文章，但是主要是适用于IE浏览器的，对于其他浏览器几乎都是用的插件，我就想用js自己写一个可以导出文件的页面。在搜寻了一些资料后，自己写了一个比较简洁的。
一般情况下，我们导出的内容为表格数据居多，所以我们就以表格为例，导出页面内容

html页面内容

页面就一个基本的表格，和两个按钮，分别用于导出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内容

IE浏览器
IE浏览器是最特别的，它的excel导出是用到activex方式，使用js/vbs调用excel对象，下面这种方法仅限于IE，所以局限性比较大。在我的另一个文章中已经写了如何判断浏览器类型请点击这里进入：JavaScript判断浏览器类型
if(getExplorer()=='ie')
{
var curTbl = document.getElementById(tableid);
var oXL = new ActiveXObject("Excel.Application");

          //创建AX对象excel 
          var oWB = oXL.Workbooks.Add();
          //获取workbook对象 
          var xlsheet = oWB.Worksheets(1);
          //激活当前sheet 
          var sel = document.body.createTextRange();
          sel.moveToElementText(curTbl);
          //把表格中的内容移到TextRange中 
          sel.select;
          //全选TextRange中内容 
          sel.execCommand("Copy");
          //复制TextRange中内容  
          xlsheet.Paste();
          //粘贴到活动的EXCEL中       
          oXL.Visible = true;
          //设置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;
              //结束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的示例图片

image.png

我们来详细解读一下代码，首先汉化参数里的type是点击按钮是传过去的对应的类型，doc或者excel，当判断为doc时，定义变量doc，doc的值就是table（也就是要导出的）内容，然后把doc放在docFile这样的形式中，encodeURIComponent()函数可把字符串作为 URI 组件进行编码,该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ),unescape()通过找到形式为 %xx 和 %uxxxx 的字符序列（x 表示十六进制的数字），用 Unicode 字符 \u00xx 和 \uxxxx 替换这样的字符序列进行解码,btoa()就是把需要转码的进行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的示例图片

image.png

你可以发现导出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里的内容不同，如果需要查看更多网页中的重要MIME类型列表，点击这里

扩展名	文档类型	MIME Type
.doc	Microsoft Word	application/msword
.xls	Microsoft Excel	application/vnd.ms-excel

js导出word和excel

html页面内容

js内容

猜你喜欢

热点阅读