vue、koa 導入導出excel文件

1、使用node-xlsx、koa-multer插件
　　npm install node-xlsx koa-multer mockjs --save

2、excel 文件導出

　　一、前端請求數據，經過blob（Blob對象能夠看作是存放二進制數據的容器）解析數據，下載對應的文件

 1 exportExcel(e){
 2    axios({
 3       method : "get",
 4       url : "/api/exportexcel",
 5       responseType: 'blob'
 6    }).then(async (res) => {
 7       let uploadExcel = (fileName) => {
 8             const blob = new Blob([res], {type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=utf-8'});
 9             const url = URL.createObjectURL(blob);
10             const aLink = document.createElement('a');
11             aLink.setAttribute('download',fileName);
12             aLink.setAttribute('href',url);
13             document.body.appendChild(aLink)
14             aLink.click()
15             document.body.removeChild(aLink)
16             URL.revokeObjectURL(blob);
17       }
18       uploadExcel ( 'mySheetName.xlsx');
19   })
20}

 

　　　二、後端經過node-xlsx處理，返回buffer流數據

 1 const NXlSX = require("node-xlsx");
 2 const Mock = require("mockjs");
 3 router.get('/api/exportexcel',async (ctx) => {
 4     //表頭
 5     const _headers = ['序號', '姓名', '年齡', '省',"市","區"];
 6     //表格數據
 7     const _data = [...Mock.mock({"arr|30-30": [{
 8         "id|+1": 1,
 9         name: "@cname",
10         "age|18-34": 23,
11         "province" : "@province",
12         "city" : "@city",
13         "county" : "@county"
14       }]}).arr];
15     let data = [];
16     for (let i =0 ; i < _data.length; i++){
17       let arr = [];
18       for(let key in _data[i]){
19         arr.push(_data[i][key])
20       }
21       data.push(arr);
22     }
23     data.unshift(_headers);  
24    // 數據格式爲[["hello","223"],["22","23"]];
25     let buffer = NXlSX.build([{name: "sheetName", data: data}]);
26     // 返回buffer流到前端
27     ctx.body = buffer
28 });

3、excel 文件文件導入，後端解析返回前端

　　一、前端經過input[file] 件文件傳給後端

 1 importExcel(e){ 3     let file = e.currentTarget.files[0];
 4     let fileDir = file.name;
 5     let formData = new FormData();
 6     formData.append('file',file);
 7     let config = {
 8        headers: {
 9           'Content-Type': 'multipart/form-data'
10        }
11     }
12     axios.post("/api/importexcel",formData,config).then((res) => {
13          console.log(res);
14          // 處理數據
15
16     })
17 }   

　　二、後端存儲文件，處理數據，再刪除文件

 1 const multer = require('koa-multer');
 2 const NXlSX = require("node-xlsx");
 3 let storage = multer.diskStorage({
 4     //文件保存路徑
 5     destination: function (req, file, cb) {
 6       cb(null, './server/data')
 7     },
 8     //修改文件名稱
 9     filename: function (req, file, cb) {
10       var fileFormat = (file.originalname).split(".");
11       cb(null,Date.now() + "." + fileFormat[fileFormat.length - 1]);
12     }
13   })
14 //加載配置
15 let upload = multer({ storage: storage })
16 router.post('/api/importexcel',upload.single('file'),async (ctx) => {
17     let file =ctx.req.file.filename;
18     const xlsxfile = "./server/data/" + file;
19     async function readExcel() {
20       return new Promise((resolve,reject)=>{
21         let obj = NXlSX.parse(xlsxfile);
22         resolve(obj);
23       });
24     }
25     async function getData(v) {
26       ctx.body = v[0].data;
27       fs.unlinkSync(xlsxfile);
28     }
29     let dataObj =await readExcel();
30     await getData(dataObj);
31 });