使用js下载数据

由于项目中会用到一个文件的下载功能,所以查找了各种论坛,找到两篇很好用的下载方式,1.通过获取json数据下载为csv文件2.将Table表格下载为excel文件。

代码来源(代码全部来源于以下两篇博客)

https://blog.csdn.net/u012832088/article/details/78905052?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-14.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromBaidu%7Edefault-14.control

https://blog.csdn.net/qq_38951418/article/details/88057016

 

获取json数据下载为csv文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button onclick='tableToExcel()'>导出</button>
</body>
</html>

<script>

function tableToExcel(){
    //要导出的json数据
    var jsonData = [
      {
        name:'李四',
        phone:'1777829****',
        email:'20838****@qq.com'
      },
      {
         name:'张三',
        phone:'1777829****',
        email:'20838****@qq.com'
      },
      {
       name:'王五',
        phone:'1777829****',
        email:'20838****@qq.com'
      },
      {
         name:'老刘',
        phone:'1777829****',
        email:'20838****@qq.com'
      }
    ]
    //列标题,逗号隔开,每一个逗号就是隔开一个单元格
    let str = `姓名,电话,邮箱\n`;
    //增加\t为了不让表格显示科学计数法或者其他格式
    for(let i = 0 ; i < jsonData.length ; i++ ){
      for(let item in jsonData[i]){
          str+=`${jsonData[i][item] + '\t'},`;     
      }
      str+='\n';
    }
    //encodeURIComponent解决中文乱码
    let uri = 'data:text/csv;charset=utf-8,\ufeff' + encodeURIComponent(str);
    //通过创建a标签实现
    var link = document.createElement("a");
    link.href = uri;
    //对下载的文件命名
    link.download =  "json数据表.csv";
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

</script>

将Table数据下载为Excel表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Table2Excel</title>
    <script type="text/javascript" src="table2excel.js"></script>
</head>
<body>
<table id="tableid" border="1">
    <tr><td>你好</td><td>12</td><td>12</td><td>12</td><td>12</td></tr>
    <tr><td></td><td>12</td><td>12</td><td>12</td><td>12</td></tr>
    <tr><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td></tr>
    <tr><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td></tr>
    <tr><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td></tr>
    <tr><td>12</td><td>12</td><td>12</td><td>12</td><td>12</td></tr>
</table>

<button onclick="toexcel()">下载Excel</button>
<script type="text/javascript">
    var tableId = document.getElementById('tableid');
    function toexcel() {
        methodtable2excel(tableId);
    }


    /* Table 生成 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 methodtable2excel(tableid) {//整个表格拷贝到EXCEL中
    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);
        }
    }
    else
    {
        tableToExcel(tableid);
    }
}
function Cleanup() {
    window.clearInterval(idTmr);
    CollectGarbage();
}
var tableToExcel = (function() {
    var uri = 'data:application/vnd.ms-excel;base64,',
    template = '<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"><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]--><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>
</body>
</html>

 

posted on 2021-08-30 18:01  一往无前!  阅读(303)  评论(0编辑  收藏  举报