将后端返回的json数据导出为excel表格，前端打印excel表格

1.因为工作需求 需要将后端接口回来的json数据打印出 excel表格给用户观看

我也是再网上找了很多版本,都没有找到适合的

很多的情况是  只能导出静态的死数据 不能导出动态的活数据

在我翻了翻几十篇博客的情况下 终于找到了合适的 但也不能直接拿来使用 经过我得修改的终于可以了

废话不说直接上核心代码 

<script src="js/JsonExportExcel.min.js"></script> //这个是个插件库
<script src="https://cdn.bootcss.com/axios/0.19.0/axios.min.js"></script>//我是使用axios 请求后台数据
<script src="./js/pub.js"></script> //这里是封装的axios  

axios 是这边封装好的一个 js请求文件

function getData(){
                pub._InitAxios({     //封装再pub.js中axios 请求方法  这里是采用post请求的
                _url:pub._url,//公共接口   
                ur:pub._DetailApi.getPart,//详细的接口
                data:{   //请求携带的参数
                      "column_id":9201911221311140,
                      "pageNum":1,
                      "pageSize":30,  
                  },
                    cbk:(res)=>{
                           // console.log(res.page.list)      //请求回来的数据
                           var newArr=[];   //定义一个空的数组  用来接受过滤的数据
                           for(var value of res.page.list){
                               var obj={};  //定义一个空的对象
                               obj.id=value.article_id;   //从后台回来的数据中 选出有用的数据
                               obj.name=value.article_name;
                               newArr.push(obj);   //push到数组中
                           }
                           console.log(newArr);
                           getExcel(newArr);  //调用导出excel的方法
                    }
                  })
            }

//导出 函数   

function getExcel(data){
                var option={};
                option.fileName = 'excel'
                option.datas=[
                    {
                        sheetData:data,   //data就是传入的后台数据 作为的参数
                        sheetHeader:['编号','名字']//自定义表头
                    },
                ]
                var toExcel=new ExportJsonExcel(option);
                toExcel.saveExcel();
            }

最后页面上加入一个按钮调用方法即可

<button οnclick="getData()">点击我下载表格</button>

完整的源码下载地址是:https://github.com/zhaoyunchong/jsonToExcel.git 

 

一年之后再来更新了下   关注我 持续更新前端知识