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

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

背书包的甜瓜

3904人浏览 · 2019-08-20 15:47:52

背书包的甜瓜 · 2019-08-20 15:47:52 发布

思路：获取数据、重构数据、导出表格，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文件名称)*/
 },

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^