背景

在學習微信小程式的過程中，需要匯出excel檔案資料，可是卻沒有後臺伺服器，所以只能夠想著使用純前端去匯出excel

使用外掛：excel-export

匯出思想

將資料封裝成excel檔案

將excel檔案上傳到雲端儲存中

將雲端儲存的excel檔案以圖片的格式下載到本地

修改圖片檔案字尾為xlsx，成為excel檔案

操作

將資料封裝成excel檔案；將excel檔案上傳到雲端儲存中

建立雲函式（我的雲函式名稱:uploadexportfile），開啟雲函式終端，安裝excel-export外掛

// 雲函式入口檔案

const cloud = require('wx-server-sdk')

const nodeExcel = require('excel-export');

const path = require('path');

cloud.init()

// 雲函式入口函式

exports.main = async (event, context) => {

var tableMap = {

styleXmlFile:path.join(__dirname,"styles.xml"),

name: Date.now()+"-export",

cols: [],

rows: [],

}

var tableHead = ["編號", "名稱", "生日", "年齡"];

//新增表頭

for(var i=0;i<tableHead.length;i++){

tableMap.cols[tableMap.cols.length]={

caption:tableHead[i],

type:'string'

}

}

//表體：偽資料

const tableList = [

{編號:0,名稱:'張三',生日:'2019-5-1',年齡:20},

{編號:1,名稱:'李四',生日:'2019-5-1',年齡:45}

]

//新增每一行資料

for(var i=0;i<tableList.length;i++){

tableMap.rows[tableMap.rows.length]=[

tableList[i].編號,

tableList[i].名稱,

tableList[i].生日,

tableList[i].年齡

]

}

//儲存excelResult到相應位置

var excelResult = nodeExcel.execute(tableMap);

var filePath = "outputExcels";

var fileName = cloud.getWXContext().OPENID + "-" + Date.now()/1000 + '.xlsx';

//圖片上傳到雲端儲存

return await cloud.uploadFile({

cloudPath: path.join(filePath, fileName),

fileContent: new Buffer(excelResult,'binary')

}).then(res=>{

console.log(res.fileID);

return res;

}).catch(err=>{

});

}

DOWNLOAD

//匯出excel

function exportFile(dataHeader,dataList){

wx.showLoading({

title: '正在匯出',

});

console.log(dataHeader);

console.log(dataList);

wx.cloud.callFunction({

name:'uploadexportfile',

data:{

dataHeader:dataHeader,

dataList:dataList

}

}).then(res=>{

const fileID = res.result.fileID;

//下載檔案

wx.cloud.downloadFile({

fileID: fileID

}).then(res1 => {

this.saveFileToPhotosAlbum(res1);//儲存檔案到相簿

this.delCloudFile(fileID);//刪除雲端儲存檔案

}).catch(error => {

// handle error

})

}).catch(err1=>{

});

}

//儲存檔案到本地相簿

function saveFileToPhotosAlbum(res){

//授權

this.writePhotosAlbumAuth();

// 儲存檔案

var saveTempPath = wx.env.USER_DATA_PATH + "/exportFile"+new Date().getTime()+".jpg";

wx.saveFile({

tempFilePath: res.tempFilePath,

filePath: saveTempPath ,

success:res1=> {

//獲取了相簿的訪問許可權，使用 wx.saveImageToPhotosAlbum 將圖片儲存到相簿中

wx.saveImageToPhotosAlbum({

filePath: saveTempPath ,

success: res2 => {

//儲存成功彈出提示，告知一下使用者

wx.hideLoading();

wx.showModal({

title: '檔案已儲存到手機相簿',

content: '檔案位於tencent/MicroMsg/WeiXin下 \r\n將儲存的檔案重新命名改為[ .xlsx ]字尾即可正常開啟',

confirmColor: '#0bc183',

confirmText: '知道了',

showCancel: false

});

},

fail(err2) {

console.log(err2)

}

})

}

});

}

//刪除雲端儲存檔案

function delCloudFile(fileID){

const fileIDs=[];

fileIDs.push(fileID);

//刪除雲端儲存中的excel檔案

wx.cloud.deleteFile({

fileList: fileIDs,

success: res4 => {

// handle success

console.log(res.fileList);

},

fail: console.error

})

}

//上傳單個檔案

function uploadSingleFile(cloudPath,filePath){

wx.cloud.uploadFile({

cloudPath: cloudPath, // 上傳至雲端的路徑

filePath: filePath, // 小程式臨時檔案路徑

success: res => {

// 返回檔案 ID

console.log(res.fileID)

},

fail: console.error

})

}

//微信圖片儲存到本地相簿授權

function writePhotosAlbumAuth(){

wx.getSetting({

success(res) {

if (!res.authSetting['scope.writePhotosAlbum']) {

wx.authorize({

scope:'scope.writePhotosAlbum',

success() {

console.log('授權成功')

}

})

}

}

})

}

module.exports={

uploadSingleFile:uploadSingleFile,

exportFile:exportFile,

saveFileToPhotosAlbum:saveFileToPhotosAlbum,

delCloudFile:delCloudFile,

writePhotosAlbumAuth:writePhotosAlbumAuth

}