原生js实现下载导出Excel两种方式

最新推荐文章于 2024-05-22 11:08:31 发布

背书包的甜瓜

最新推荐文章于 2024-05-22 11:08:31 发布

阅读量3.8k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/dashanjv/article/details/99851551

版权

JavaScript 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

思路：获取数据、重构数据、导出表格，vue也可以使用，原理一样；

注：base64();方法不能忘

   function getUserList(){
        $.ajax({
            url:"",
            type:"",
            data:{},
            dataType:"json",
            contentType:"application/json; charset=utf-8",
            async:false,
            success:function(request){
                let arr = [];
                for (let k = 0; k < request.data.length; k++) {
                    arr.push([  //将需要导出的数据重新构造新数组
                        request.data[k].name,
                        request.data[k].sex,
                        request.data[k].phone,
                    ])
                }
                const jsonData = arr;
                let str = "<tr><td>姓名</td><td>性别</td><td>电话</td></tr>";
                //循环遍历，每行加入tr标签，每个单元格加td标签
                for(let i = 0 ; i < jsonData.length ; i++ ){
                    str+='<tr>';
                    for(let item in jsonData[i]){
                        if(jsonData[i][item] == null){
                        str+=`<td> </td>`;
                        }else{
                        //增加\t为了不让表格显示科学计数法或者其他格式
                        str+=`<td>${ jsonData[i][item] + '\t'}</td>`;
                        }
                    }
                    str+='</tr>';
                }
                //Worksheet名
                let worksheet = '列表'
                let uri = 'data:application/vnd.ms-excel;base64,';
            
                //下载的表格模板数据
                let 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]-->
                    </head><body><table>${str}</table></body></html>`;
                //下载模板
                window.location.href = uri + base64(template)
            }
        });
    }
    function base64(){
        return window.btoa(unescape(encodeURIComponent(s)))
    }

第二种：使用插件 xlsx.full.min.js

代码：

// 下载地址 https://github.com/SheetJS/js-xlsx/tree/master/dist
// 导入 xls插件  
// 构造导出数据
// 导出
setXlsData(ret){
   let now = new Date();
   let time = now.getFullYear() + "-" +((now.getMonth()+1)<10?"0":"")+(now.getMonth()+1)+"-"+((now.getDate()-1)<10?"0":"")+(now.getDate()-1);
   var arr = []
   for(var i = 0; i < ret.length; i++){
      arr.push({
          "产品":ret[i].pcode,
          "计划量":ret[i].pnum,
          "数量":ret[i].fnum,
      })
   }
   setTimeout(() => {
       this.setExcel(time,arr)
   }, 1000);
 },
 setExcel(date,arr){
    var ws = XLSX.utils.json_to_sheet(arr);/* 新建空workbook，然后加入worksheet */
    var wb = XLSX.utils.book_new();/*新建book*/
    XLSX.utils.book_append_sheet(wb, ws, "sheet1");/* 生成xlsx文件(book,sheet数据,sheet命名) */
    XLSX.writeFile(wb, date+"统计.xlsx");/*写文件(book,xlsx文件名称)*/
 },

背书包的甜瓜

关注

1
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
原生js实现下载导出Excel两种方式

思路：获取数据、重构数据、导出表格，vue也可以使用，原理一样；注：base64();方法不能忘 function getUserList(){ $.ajax({ url:"", type:"", data:{}, dataType:"json", ...
复制链接

扫一扫