js 导出excel

Posted 2021-03-25 tutao1995

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 导出excel相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>  
<html>  
<head lang="en">  
<meta charset="UTF-8">  
<title>html 表格导出Excel</title>   
</head>  
<body>  
  <div >   
    <button onclick="method(‘tableExcel‘)">表格导出Excel</button>  
    <button onclick="jsonMethod()">json导出Excel</button>  
  </div>  
  <div id="myDiv">  
    <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>  
  </div>  
</body>  
</html> 
<script language="javascript" type="text/javascript"> 
//---------------------------将JSON导出Excel---------------------------//
 
//需要进行数据转换，
 
// 我们使用ajax请求到的数据
 
var data = [{name:"hjm100",duty:‘管理员‘,opensource:‘http://git.oschina.net/hjm100‘,aa:‘无用数据‘},
            {name:"zmjie100",duty:‘前端开发‘,opensource:‘http://git.oschina.net/zmjie100‘,aa:‘无用数据‘},
            {name:"ghf100",duty:‘前端开发‘,opensource:‘http://git.oschina.net/ghf100‘,aa:‘无用数据‘},
            {name:"zhengshanshan",duty:‘前端开发‘,opensource:‘http://git.oschina.net/zhengshanshan‘,aa:‘无用数据‘}];
//数据处理
var title = [{"value":"名称",key:‘name‘},
             {"value":"职务",key:‘duty‘},
             {"value":"开源地址",key:‘opensource‘}];
 
/**dataSwitch函数参数
 * @param datas  原始的json数据
 * @param titles 自己设置的表头数据
 * 注意：
 * 1.必须设置titles
 * 2.titles是过滤datas的必要条件
 * 3.titles中的key属性对应的是需要提取的原始数据的key值
 * 4.datas与titles需要相互对应
 */
//数据转换函数
function dataSwitch(datas,titles){
  if(datas == ‘‘|| titles==‘‘) return;  
  var res = [],resd = [];
  for (var j = 0; j < datas.length; j++) {
    //清空一下res
    res = []
    for (var i = 0; i < titles.length; i++) {
      res.push({"value":datas[j][titles[i].key]})
    }
    resd.push(res)
  }
  return (resd)
}
 
//JSONToExcelConvertor函数需要的数据格式
// var datas = {"title":[{"value":"店铺"},{"value":"点击量"},{"value":"竞争力"}],
//               "data":[[{"value":"运营淘宝代",}, {"value":3057},{"value":955}],
//                       [{"value":"淘宝网",}, {"value":412},{"value":1860}]]
//             }; 
 
//空壳函数用来做调用,与方便理解！！
function jsonMethod(){
  //执行导出函数
  JSONToExcelConvertor(dataSwitch(data,title), "鸿基梦", title,‘鸿基梦组织重要成员信息汇总‘);  
}
 
/**JSONToExcelConvertor函数参数
 * @param JSONData  需要导出的数据
 * @param FileName  Excel表名
 * @param ShowLabel 表头
 * @param Explain   表格说明（选填）
 * 注意： 
 * 上述参数都为转化后数据
 */
function JSONToExcelConvertor(JSONData, FileName, ShowLabel,Explain) {  
  //先转化json  
  var arrData = typeof JSONData != ‘object‘ ? JSON.parse(JSONData) : JSONData;  
  var excel = ‘<table>‘,row = ‘‘; 
  //添加说明(如果想要添加说明请传入Explain参数) 
  if(Explain)row +="<tr><td colspan=‘"+ShowLabel.length+"‘ align=‘center‘>"+Explain+"</td></tr>";       
  //设置表头  
  row += "<tr>";  
  for (var i = 0, l = ShowLabel.length; i < l; i++){  
    row += "<td>" + ShowLabel[i].value + ‘</td>‘;  
  }  
  //换行  
  excel += row + "</tr>";  
  //设置数据  
  for (var i = 0; i < arrData.length; i++){  
    var row = "<tr>";  
    for (var index in arrData[i]) {  
      var value = arrData[i][index].value === "." ? "" : arrData[i][index].value;  
      row += ‘<td>‘ + value + ‘</td>‘;  
    }  
    excel += row + "</tr>";  
  }  
  excel += "</table>";  
  var excelFile = "<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‘>";  
  excelFile += ‘<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">‘;  
  excelFile += ‘<meta http-equiv="content-type" content="application/vnd.ms-excel‘;  
  excelFile += ‘; charset=UTF-8">‘;  
  excelFile += "<head>";  
  excelFile += "<!--[if gte mso 9]>";  
  excelFile += "<xml>";  
  excelFile += "<x:ExcelWorkbook>";  
  excelFile += "<x:ExcelWorksheets>";  
  excelFile += "<x:ExcelWorksheet>";  
  excelFile += "<x:Name>";  
  excelFile += FileName;  
  excelFile += "</x:Name>";  
  excelFile += "<x:WorksheetOptions>";  
  excelFile += "<x:DisplayGridlines/>";  
  excelFile += "</x:WorksheetOptions>";  
  excelFile += "</x:ExcelWorksheet>";  
  excelFile += "</x:ExcelWorksheets>";  
  excelFile += "</x:ExcelWorkbook>";  
  excelFile += "</xml>";  
  excelFile += "<![endif]-->";  
  excelFile += "</head>";  
  excelFile += "<body>";  
  excelFile += excel;  
  excelFile += "</body>";  
  excelFile += "</html>";                
  var uri = ‘data:application/vnd.ms-excel;charset=utf-8,‘ + encodeURIComponent(excelFile);               
  var link = document.createElement("a");      
  link.href = uri;      
  link.style = "visibility:hidden";  
  link.download = FileName + ".xls";     
  document.body.appendChild(link);  
  link.click();  
  document.body.removeChild(link);  
}  
 
//---------------------------将表格导出Excel---------------------------//
var idTmr;  
//判断浏览器
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‘;  
}  
function method(tableid){ //整个表格拷贝到EXCEL中
  if(getExplorer()==‘ie‘){  
    var curTbl  = document.getElementById(tableid), 
        oXL     = new ActiveXObject("Excel.Application"),
        //创建AX对象excel 
        oWB     = oXL.Workbooks.Add(),
        //获取workbook对象  
        xlsheet = oWB.Worksheets(1),
        //激活当前sheet 
        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);  
      oXL.Quit();  
      oXL   = null;  
      idTmr = window.setInterval("Cleanup();", 1);  
    }  
  }else{  
    tableToExcel(tableid)  
  } 
  oXL.worksheets(1).Paste; 
} 
 
//兼容ie之外浏览器 
function Cleanup() {  
  window.clearInterval(idTmr);  
  CollectGarbage();  
}  
var tableToExcel = (function() {  
  var uri      = ‘data:application/vnd.ms-excel;base64,‘,  
      template = ‘<html><head><meta charset="UTF-8"></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}  
    window.location.href = uri + base64(format(template, ctx))  
  }  
})()  
</script>

<!DOCTYPE html>  

<html>  

<head lang="en">  

<meta charset="UTF-8">  

<title>html 表格导出Excel</title>   

</head>  

<body>  

  <div >   

    <button onclick="method(‘tableExcel‘)">表格导出Excel</button>  

    <button onclick="jsonMethod()">json导出Excel</button>  

  </div>  

  <div id="myDiv">  

    <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>  

  </div>  

</body>  

</html> 

<script language="JavaScript" type="text/javascript"> 

//---------------------------将JSON导出Excel---------------------------//

//需要进行数据转换，

// 我们使用ajax请求到的数据

var data = [{name:"hjm100",duty:‘管理员‘,opensource:‘http://git.oschina.net/hjm100‘,aa:‘无用数据‘},

            {name:"zmjie100",duty:‘前端开发‘,opensource:‘http://git.oschina.net/zmjie100‘,aa:‘无用数据‘},

            {name:"ghf100",duty:‘前端开发‘,opensource:‘http://git.oschina.net/ghf100‘,aa:‘无用数据‘},

            {name:"zhengshanshan",duty:‘前端开发‘,opensource:‘http://git.oschina.net/zhengshanshan‘,aa:‘无用数据‘}];

//数据处理

var title = [{"value":"名称",key:‘name‘},

             {"value":"职务",key:‘duty‘},

             {"value":"开源地址",key:‘opensource‘}];

/**dataSwitch函数参数

 * @param datas  原始的json数据

 * @param titles 自己设置的表头数据

 * 注意：

 * 1.必须设置titles

 * 2.titles是过滤datas的必要条件

 * 3.titles中的key属性对应的是需要提取的原始数据的key值

 * 4.datas与titles需要相互对应

*/

//数据转换函数

function dataSwitch(datas,titles){

  if(datas == ‘‘|| titles==‘‘) return;  

  var res = [],resd = [];

  for (var j = 0; j < datas.length; j++) {

    //清空一下res

    res = []

    for (var i = 0; i < titles.length; i++) {

      res.push({"value":datas[j][titles[i].key]})

}

    resd.push(res)

}

  return (resd)

}

//JSONToExcelConvertor函数需要的数据格式

// var datas = {"title":[{"value":"店铺"},{"value":"点击量"},{"value":"竞争力"}],

//               "data":[[{"value":"运营淘宝代",}, {"value":3057},{"value":955}],

//                       [{"value":"淘宝网",}, {"value":412},{"value":1860}]]

//             }; 

//空壳函数用来做调用,与方便理解！！

function jsonMethod(){

  //执行导出函数

  JSONToExcelConvertor(dataSwitch(data,title), "鸿基梦", title,‘鸿基梦组织重要成员信息汇总‘);  

}

/**JSONToExcelConvertor函数参数

 * @param JSONData  需要导出的数据

 * @param FileName  Excel表名

 * @param ShowLabel 表头

 * @param Explain   表格说明（选填）

 * 注意： 

 * 上述参数都为转化后数据

*/

function JSONToExcelConvertor(JSONData, FileName, ShowLabel,Explain) {  

  //先转化json  

  var arrData = typeof JSONData != ‘object‘ ? JSON.parse(JSONData) : JSONData;  

  var excel = ‘<table>‘,row = ‘‘; 

  //添加说明(如果想要添加说明请传入Explain参数) 

  if(Explain)row +="<tr><td colspan=‘"+ShowLabel.length+"‘ align=‘center‘>"+Explain+"</td></tr>";       

  //设置表头  

  row += "<tr>";  

  for (var i = 0, l = ShowLabel.length; i < l; i++){  

    row += "<td>" + ShowLabel[i].value + ‘</td>‘;  

}

  //换行  

  excel += row + "</tr>";  

  //设置数据  

  for (var i = 0; i < arrData.length; i++){  

    var row = "<tr>";  

    for (var index in arrData[i]) {  

      var value = arrData[i][index].value === "." ? "" : arrData[i][index].value;  

      row += ‘<td>‘ + value + ‘</td>‘;  

}

    excel += row + "</tr>";  

}

  excel += "</table>";  

  var excelFile = "<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‘>";  

  excelFile += ‘<meta http-equiv="content-type" content="application/vnd.ms-excel; charset=UTF-8">‘;  

  excelFile += ‘<meta http-equiv="content-type" content="application/vnd.ms-excel‘;  

  excelFile += ‘; charset=UTF-8">‘;  

  excelFile += "<head>";  

  excelFile += "<!--[if gte mso 9]>";  

  excelFile += "<xml>";  

  excelFile += "<x:ExcelWorkbook>";  

  excelFile += "<x:ExcelWorksheets>";  

  excelFile += "<x:ExcelWorksheet>";  

  excelFile += "<x:Name>";  

  excelFile += FileName;  

  excelFile += "</x:Name>";  

  excelFile += "<x:WorksheetOptions>";  

  excelFile += "<x:DisplayGridlines/>";  

  excelFile += "</x:WorksheetOptions>";  

  excelFile += "</x:ExcelWorksheet>";  

  excelFile += "</x:ExcelWorksheets>";  

  excelFile += "</x:ExcelWorkbook>";  

  excelFile += "</xml>";  

  excelFile += "<![endif]-->";  

  excelFile += "</head>";  

  excelFile += "<body>";  

  excelFile += excel;  

  excelFile += "</body>";  

  excelFile += "</html>";                

  var uri = ‘data:application/vnd.ms-excel;charset=utf-8,‘ + encodeURIComponent(excelFile);               

  var link = document.createElement("a");      

  link.href = uri;      

  link.style = "visibility:hidden";  

  link.download = FileName + ".xls";     

  document.body.appendChild(link);  

  link.click();  

  document.body.removeChild(link);  

}

//---------------------------将表格导出Excel---------------------------//

var idTmr;  

//判断浏览器

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‘;  

}

function method(tableid){ //整个表格拷贝到EXCEL中

  if(getExplorer()==‘ie‘){  

    var curTbl  = document.getElementById(tableid), 

        oXL     = new ActiveXObject("Excel.Application"),

        //创建AX对象excel 

        oWB     = oXL.Workbooks.Add(),

        //获取workbook对象  

        xlsheet = oWB.Worksheets(1),

        //激活当前sheet 

        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);  

      oXL.Quit();  

      oXL   = null;  

      idTmr = window.setInterval("Cleanup();", 1);  

}

  }else{  

    tableToExcel(tableid)  

}

  oXL.worksheets(1).Paste; 

}

//兼容ie之外浏览器 

function Cleanup() {  

  window.clearInterval(idTmr);  

  CollectGarbage();  

}

var tableToExcel = (function() {  

  var uri      = ‘data:application/vnd.ms-excel;base64,‘,  

      template = ‘<html><head><meta charset="UTF-8"></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}  

    window.location.href = uri + base64(format(template, ctx))  

}

})()  

</script> 

以上是关于js 导出excel的主要内容，如果未能解决你的问题，请参考以下文章

js导出excel

firefox浏览器下用JS的方式导出excel

纯js导出Excel文件（无需引入插件）

XLSX.js 导出Excel demo

几种Excel导出的方法