微信小程序-知曉雲等雲產品導出excle

參考鏈接:https://blog.csdn.net/qq_18837459/article/details/86985748#commentsedit

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


 前言

我們團隊的小程序開發用知曉雲作爲後臺(知曉雲、雲開發、bmob雲之類,不需要後臺開發接口只需要用後端雲api操作雲上的數據庫),接到了一個需要在小程序端導出excle文件的項目。
導出excle,在後端開發的時候是很簡單的一個接口,但在雲端的後臺,沒有現成的API,需要調用第三方庫,但云函數所依賴的雲端nodejs沒有辦法直接引入第三方庫,所以問題如下:

1. 使用exceljs庫函數生成excel

2. 引入exceljs庫需要安裝相關依賴(npm)

3. 安裝相關依賴,導致不能在任意一個雲產品的後臺直接編寫(本地編寫代碼)

4. 在本地寫好之後,使用命令行工具,將代碼包以及相關依賴上傳至後臺

雲開發或者其他雲後臺的雲函數,都是使用nodejs開發。

思路

1. 小程序端調用雲函數(生成excel的雲函數),傳參

2. 雲函數接收參數,並生成excel文件,上傳到雲端後臺,返回excel文件的url

3. 在小程序通過下載文件API下載需要導出的excel文件

開發步驟

1. 安裝node.js

網上有很多教程,自行百度

2. 小程序編寫

3. 按照知曉雲註冊指引完成操作,鏈接 

4. 安裝npm工具

npm install -g mincloud

5.  創建工作目錄(隨便哪個地方都可以)

    進入工作目錄(我是在桌面建了一個ifanrFunc的文件夾)

cd C:\Users\Administrator\Desktop\ifanrFunc

6. 本地登錄知曉雲後臺

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

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

7. 創建雲函數

mincloud new exportExcle
cd exportExcle

 

可以看出創建雲函數就是創建一個文件夾 ,此時文件家中只有一個index.js文件夾

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

npm init

 輸入命令出現這個界面,一路回車就好。

成功後如下圖:

9. 在第 7 步創建的exportExcle文件夾中,新建 src 文件夾,用來存放源碼(第13步的index.js)。

接下來會使用 webpack 將 src 裏的代碼  打包並保存到 exportExcle 目錄下的 index.js

打包可以理解爲編譯,將第三方庫的函數替換爲nodejs支持的函數

 

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

11. 安裝 webpack

npm install -D webpack webpack-cli

安裝過程: 

安裝完:

 

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

webpack.config.js

module.exports = {
  output: {
    path: __dirname,
    filename: 'index.js',
    library: 'exports.main',
    libraryTarget: 'assign',
  },
  target: 'node',
}

 

 package.json

  "scripts": {
    "build": "webpack --mode production",
    "deploy": "mincloud deploy xxxxx ../"
  },

13. 創建文件

在exportExcle目錄下的src文件夾創建 index.js 文件

src下的index.js是工作目錄,就是你自己編寫代碼的地方

exportExcle下的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

安裝成功之後,可以看到 package.json中多了一個依賴

15. 打包

npm run build

這個就是編譯替換過程

16. 部署

npm run deploy

部署有點耗時間,耐心等待

17. 測試雲函數

æµè¯äºå½æ°å¾ä¾

18. 使用小程序下載excel文件

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

下面是我第一次玩時候操作過程的截圖:可自行參考

 

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