js导出word和excel

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

html页面内容

页面就一个基本的表格,和两个按钮,分别用于导出word和excel

   
   
Name Grade Math History
Like 1 65 83
Mary 1 34 89.5
Lily 2 90 95
BOb 2 76.3 80.1
Sendy 3 60 79
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+="

    ";
    var html=document.getElementById("score").innerHTML;
    doc+=html;
    doc+="
    ";
    var docFile="";
    docFile=docFile+""+doc+"";
    var base64data="base64,"+window.btoa(unescape(encodeURIComponent(docFile)));
    window.open('data:application/msword;'+ base64data);
    }
    }
    下面为导出word的示例图片

    js导出word和excel_第1张图片
    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+="";
            var html=document.getElementById("score").innerHTML;
            doc+=html;
            doc+="
"; var docFile=""; docFile=docFile+""+doc+""; var base64data="base64,"+window.btoa(unescape(encodeURIComponent(docFile))); window.open('data:application/vnd.ms-excel;'+ base64data); }

下面为导出excel的示例图片

js导出word和excel_第2张图片
image.png


你可以发现导出word和excel的代码几乎相同,所以我们可以合并他们,写的更简洁。

  function tableExport(type){
        var doc="";
        doc+="";
        var html=document.getElementById("score").innerHTML;
        doc+=html;
        doc+="
"; var a=document.body.innerHTML; var docFile=""; docFile=docFile+""+doc+""; 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)