原文鏈接:https://blog.csdn.net/qq_18837459/article/details/86985748#commentsedit
我是參考這篇文章做的,可以實現導出靜態的excle,如果有更多的需求可以在此基礎上自行拓展。
我在此只是轉載,並補充一下我在操作過程中的問題以及細節。
前言
前階段用後端雲(知曉雲 bmob雲之類,不需要後臺開發接口只需要用後端雲api操作雲上的數據庫)接到了個需求,就是導出excle文件。
導出excle在有後端開發的時候是很簡單的一個接口,但是在使用後端雲的時候就麻煩了,沒有現成的api方法。
因此研究了下雲函數,使用nodejs開發。
大概思路是:
- 前端發送需要導出excle的數組
- 雲函數接口參數,並生成excle文件,上傳到後端雲,返回excle文件的url
- 在小程序通過下載文件api下載需要導出的excle文件
開發步驟
-
node.js
-
小程序
-
知曉雲賬號,綁定小程序 balabala的 註冊後按照提示操作即可
-
安裝命令行工具
npm install -g mincloud
-
進入工作目錄(自己創建一個目錄即可)
cd /Users/ifanr/demo
-
登錄
mincloud login d2****************83 6a************************************22
請到 知曉雲控制檯 查看 client_id 和 client_secret;如果登錄失敗,請檢查 client_id 和 client_secret 是否已經改變。
-
創建雲函數
mincloud new exportExcle cd exportExcle
-
初始化 package,生成 package.json 文件(如果這一步只能創建文件夾,需要給這個文件夾設置寫入權限,具體操作自行百度)
npm init
-
在第七步創建的目錄exportExcle,新建 src 文件夾,用來存放源碼(第13步的index.js)。 接下來會使用 webpack 將 src 裏的代碼,打包並保存到 exportExcle 目錄下的 index.js
-
在exportExcle目錄新建 webpack.config.js 文件(先放空,內容在12步)。
-
安裝 webpack
npm install -D webpack webpack-cli
-
修改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 ../" },
-
創建文件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") }) }); }
-
安裝exceljs
npm install exceljs
-
打包
npm run build
-
部署
npm run deploy
-
回到上級目錄,並部署到雲函數
cd .. mincloud deploy exportExcle
-
測試雲函數
-
使用小程序下載excle文件
wx.downloadFile({ url: 'https://cloud-minapp-24278.cloud.ifanrusercontent.com/1gt1FlTKm39G6dug.xlsx', // 僅爲示例,並非真實的資源 success(res) { // 只要服務器有響應數據,就會把響應內容寫入文件並進入 success 回調,業務需要自行判斷是否下載到了想要的內容 if (res.statusCode === 200) { // res.tempFilePath } } })