小程序開發-知曉雲導出excle

原文鏈接:https://blog.csdn.net/qq_18837459/article/details/86985748#commentsedit


我是參考這篇文章做的,可以實現導出靜態的excle,如果有更多的需求可以在此基礎上自行拓展。

我在此只是轉載,並補充一下我在操作過程中的問題以及細節。


 前言

前階段用後端雲(知曉雲 bmob雲之類,不需要後臺開發接口只需要用後端雲api操作雲上的數據庫)接到了個需求,就是導出excle文件。
導出excle在有後端開發的時候是很簡單的一個接口,但是在使用後端雲的時候就麻煩了,沒有現成的api方法。
因此研究了下雲函數,使用nodejs開發。
大概思路是:

  1. 前端發送需要導出excle的數組
  2. 雲函數接口參數,並生成excle文件,上傳到後端雲,返回excle文件的url
  3. 在小程序通過下載文件api下載需要導出的excle文件

     git地址

開發步驟

  1. node.js

  2. 小程序

  3. 知曉雲賬號,綁定小程序 balabala的 註冊後按照提示操作即可

  4. 安裝命令行工具

    npm install -g mincloud

     

  5. 進入工作目錄(自己創建一個目錄即可)

     cd /Users/ifanr/demo

     

  6. 登錄

    mincloud login d2****************83 6a************************************22

    請到 知曉雲控制檯 查看 client_id 和 client_secret;如果登錄失敗,請檢查 client_id 和 client_secret 是否已經改變。

  7. 創建雲函數

    mincloud new exportExcle
    cd exportExcle

     

  8. 初始化 package,生成 package.json 文件(如果這一步只能創建文件夾,需要給這個文件夾設置寫入權限,具體操作自行百度)

    npm init

     

  9. 在第七步創建的目錄exportExcle,新建 src 文件夾,用來存放源碼(第13步的index.js)。 接下來會使用 webpack 將 src 裏的代碼,打包並保存到 exportExcle 目錄下的 index.js

  10. 在exportExcle目錄新建 webpack.config.js 文件(先放空,內容在12步)。

  11. 安裝 webpack

    npm install -D webpack webpack-cli

     

  12. 修改webpack.config.js和package.json script 配置

    module.exports = {
      output: {
        path: __dirname,
        filename: 'index.js',
        library: 'exports.main',
        libraryTarget: 'assign',
      },
      target: 'node',
    }
      "scripts": {
        "build": "webpack --mode production",
        "deploy": "mincloud deploy xxxxx ../"
      },

     

  13. 創建文件src/index.js

    var Excel = require('exceljs');
    module.exports = function (event, callback) {
    	
    
    //cell style
    var fills = {
        solid: {type: "pattern", pattern:"solid", fgColor:{argb:"FFFFAAAA"}}
    };
    //create a workbook
    var workbook = new Excel.Workbook();
    
    //add header
    var ws1 = workbook.addWorksheet("測試一");
    ws1.addRow(["地址","地面"]);
    ws1.addRow(["總人口", "不可計數"]);
    ws1.addRow(["類型", "動物", "非動物"]);
    ws1.addRow(["統計日期", "1111-11-11 11:11:11"]);
    ws1.addRow();
    
    //A6:E6
    ws1.addRow(["你", "在", "說些", "神馬", "呢?"]);
    ws1.getCell("A6").fill = fills.solid;
    ws1.getCell("B6").fill = fills.solid;
    ws1.getCell("C6").fill = fills.solid;
    ws1.getCell("D6").fill = fills.solid;
    ws1.getCell("E6").fill = fills.solid;
    
    //7 - 13(A7:A13) - 7
    ws1.addRow(["什麼跟神馬", 10, 1, "凡人修仙傳", 7]);
    ws1.addRow(["","","","一號遺蹟", 2]);
    ws1.addRow(["","","","六號遺蹟", 0]);
    ws1.addRow(["","","","古國一號", 0]);
    ws1.addRow(["","","","鍛體期", 0]);
    ws1.addRow(["","","","合體期", 0]);
    ws1.addRow(["","","","沒資質", 1]);
    
    
    ws1.mergeCells("A7:A13")
    ws1.mergeCells("B7:B13")
    ws1.mergeCells("C7:C13")
    
    //a6-e13 a b c d e
    //ws1.getCell('A7').alignment = { vertical: 'middle', horizontal: 'center' };
    
    rowCenter(ws1, 6, 13); 
    colWidth(ws1, [1,2,3,4,5], 20);
    
    var ws2 = workbook.addWorksheet("測試二");
    
    
    var ws3 = workbook.addWorksheet("測試三");
    
    //設置 start-end 行單元格水平垂直居中/添加邊框
    function rowCenter(arg_ws, arg_start, arg_end) {
        for(i = arg_start; i <= arg_end; i++) {
            arg_ws.findRow(i).alignment = { vertical: 'middle', horizontal: 'center' };
            //循環 row 中的 cell,給每個 cell添加邊框
            arg_ws.findRow(i).eachCell(function (cell, index) {
                cell.border = {
                    top: {style:'thin'},
                    left: {style:'thin'},
                    bottom: {style:'thin'},
                    right: {style:'thin'}
                };
            })
    
        }
    }
    
    //設置 start-end 列的寬度
    function colWidth(arg_ws, arg_cols, arg_width) {
        for(i in arg_cols) {
            arg_ws.getColumn(arg_cols[i]).width = arg_width;
        }
    }
    
    workbook.xlsx.writeFile('/var/log/test2.xlsx')
        .then(function(){
        	//生成excle文件後,通過知曉雲api上傳到知曉雲
    		let MyFile = new BaaS.File()
    		MyFile.upload('/var/log/test2.xlsx').then(function(a, b, c) {
    			console.log(a,b,c);
    			console.log('生成 xlsx');
    			callback(null, "生成 xlsx")
    		})
        });
    }

     

  14. 安裝exceljs

    npm install exceljs

     

  15. 打包

    npm run build

     

  16. 部署

    npm run deploy

     

  17. 回到上級目錄,並部署到雲函數

    cd ..
    mincloud deploy exportExcle

     

  18. 測試雲函數æµè¯äºå½æ°å¾ä¾

  19. 使用小程序下載excle文件

    wx.downloadFile({
      url: 'https://cloud-minapp-24278.cloud.ifanrusercontent.com/1gt1FlTKm39G6dug.xlsx', // 僅爲示例,並非真實的資源
      success(res) {
        // 只要服務器有響應數據,就會把響應內容寫入文件並進入 success 回調,業務需要自行判斷是否下載到了想要的內容
        if (res.statusCode === 200) {
          // res.tempFilePath 
        }
      }
    })

     

    下面是我操作過程中的截圖:可自行參考

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章