VUE、KOAインポートおよびエクスポートは、Excelファイル

まず、ノードXLSXの使用は、KOA-multerプラグNPMがインストールノードXLSX KOA-multer mockjs --save
  

二つは、ファイルのエクスポートをエクセル

  図1に示すように、要求されたデータのフロントエンドは、ブロブによってダウンロードに対応するデータファイルを解析する(BLOBコンテナのストレージオブジェクトは、バイナリデータとして見ることができます)

1  exportExcel(E){
 2     axios({
 3        の方法は、 "get"、
 4        URL: "/ API / exportexcel"、
 5        responseType: 'ブロブ'
 6     })。次に、(非同期(RES)=> {
 7は       = uploadExcelせ(filename)で=> {
 8              CONSTブロブ=新たなBLOB([RES]、{タイプ: 'アプリケーション/ vnd.openxmlformats-officedocument.spreadsheetml.sheet;のcharset = UTF-8'});
 9              CONSTのURL = URL.createObjectURL( BLOB);
 10              CONST ALINK =のdocument.createElement( 'A');
 11              aLink.setAttribute( 'ダウンロード'は、ファイル名);
 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 }

 

   図2に示すように、ノードXLSX処理によって後端とストリームバッファデータを返します

1 CONST = NXlSX( "ノードXLSX"必要);
 2 CONST =ザは、( "mockjs"必要モック。3 router.get( '/ API / exportexcel'、非同期(CTX)=> {
 4。     // ヘッダ
5。      CONST _headers = [ '数'、 '名前'、 '年齢'、 '地方'、 "都市"、 "ゾーン" ];
 6個の     // 表形式のデータを
7      constの_data = [... Mock.mock({「ARR | 30 -30 " :[{
 8。          " ID | + +1しました":1 9          名:" @cname " 10          "年齢| 18-34 ":23である11。          "州":"@province」 12          "都市": "@city" 13          "郡": "@county"
 14        。}]})ARR]。
15は      =データを聞かせて[]。
16      のために i = 0; I <_data.length; iは++ ){
 17        LETのARR = [];
18        のためにキー{[I] _data)
 19          arr.push(_data [I] [キー])
 20        }
 21        data.push(ARR)。
22      }
 23      data.unshift(_headers)。  
24     // 数据格式为[[ "こんにちは"、 "223"]、[ "22"、 "23"]。
25      LET= NXlSX.build緩衝液([{名: "SHEETNAME" データ:データ}]);
 26である     // 戻り流遠位バッファ
27      = ctx.body バッファ
 28 });

三つは、ファイルのインポートエクセル、返された後部先端を解析します

  1、入力[ファイル]ファイルの後端部を通過することにより、フロントエンド

1  importExcel(E){ 3      LETファイル= e.currentTarget.files [0 ]。
4      FILEDIRは=せfile.name。
5      FORMDATAは=ましょう新しい)いるFormData(;
6      formData.append( 'ファイル' 、ファイル)。
7      せコンフィグ= {
 8つの        ヘッダー:{
 9            'のContent-Type': 'マルチパート/フォームデータ'
 10         }
 11      }
 12      axios.post( "/ API / importexcel"、FORMDATA、コンフィグ).then((RES)= > {
 13           にconsole.log(RES);
 14           // 处理数据
15 
16     })
 17 }   

  次に2、バックエンド・ストレージ・ファイル、プロセスデータ、およびファイルを削除

。1のconst = multerインクルードが( 'KOA-multer'を必要と);
 2のconst = NXlSX( "ノードXLSX"が必要です);
 3。 LET =ストレージmulter.diskStorage({
 4。     // ファイルパス
5。      あなたがしたいですか:機能(REQ、ファイル、 CB){
 6        CB(NULL、 './server/data' 。7      }、
 8      //は、ファイル名を変更
9。      ファイル名:関数(REQ、ファイル、CB){
 10        のvar FILEFORMAT =(file.originalname).split( " 。 " );
 11        CB(NULL、Date.now()+ "" + FILEFORMAT [fileFormat.length - 1 ])。
12      }
 13    })
 14  // 加载配置
15 LETアップロード= multer({ストレージ:ストレージ})
 16 router.post( '/ API / importexcel'、upload.single( 'ファイル')、非同期(CTX)=> {
 17      LETファイル= ctx.req.file.filename;
 18      CONST xlsxfile = "./server/data/" + ファイル;
 19      非同期関数readExcel(){
 20        リターン 新しいプロミス((決意、リジェクト)=> {
 21          のlet OBJ = NXlSX.parse(xlsxfile);
 22         (OBJ)を解決。
23        });
24      }
 25      非同期関数のgetData(V){
 26        ctx.body = V [0 ] .DATA。
27        fs.unlinkSync(xlsxfile)。
28      }
 29は      dataObjは=せ)(readExcelを待ちます。
30      のgetData(dataObj)を待ちます。
31 });

 

 

 

おすすめ

転載: www.cnblogs.com/laixihongblog/p/11208756.html