微信小程序导出Excel文件并转发给好友
需求:
小程序的列表页面增加导出功能,点击“批量导出”按钮,则自动生成导出文件,然后自动调起微信好友列表,然后可以将文件发送给微信好友
解决方案:
由于列表数据是分页加载,所以导出直接由后端同学进行生成并返回url,则我们前端同学只负责下载wx.downloadFile
并转发wx.shareFileMessage
,官方文档
//template
<button @tap="exportData">批量导出</button>
//js
exportData(){
const { tempFilePath } = await wx.downloadFile({
url: URL, // 下载url
})
// 下载完成后转发
await wx.shareFileMessage({
filePath: res.tempFilePath,
})
}
wx.shareFileMessage
在PC端提示不支持,可使用wx.saveFileToDisk
保存文件(wx.saveFileToDisk仅PC端支持)
exportData(){
const { tempFilePath } = await wx.downloadFile({
url: URL, // 下载url
})
const sysInfo = wx.getSystemInfoSync()
if (sysInfo.platform.toLowerCase().indexOf('windows') >= 0) {
// 保存文件系统的文件到用户磁盘,仅在 PC 端支持
wx.saveFileToDisk({
filePath: tempFilePath,
success(res) {
console.log(res)
},
fail(res) {
console.error(res)
}
})
}else{
await wx.shareFileMessage({
filePath: tempFilePath,
})
}
}
关于导出
如果数据是一次全部拉取的,那么导出功能可能也行大概需要前端自己实现。
解决方案:sheetjs 官网
- 安装
npm i --save https://cdn.sheetjs.com/xlsx-0.20.1/xlsx-0.20.1.tgz
- 使用
import { utils, write } from 'xlsx';
getExcel(){
// 构建一个表的数据
let sheet = []
let title = ['昵称', '手机号', '创建时间']
sheet.push(title)
this.list.forEach(item => {
sheet.push([item.nickName, item.phone, item.createTime])
})
// 自定义列宽
const colWidth = [
{ wch: 15 },
{ wch: 15 },
{ wch: 20 }
]
let worksheet = utils.aoa_to_sheet(sheet); //创建工作表,将二维数组转化为工作簿
worksheet['!cols'] = colWidth
let workbook = utils.book_new(); // 创建工作簿
utils.book_append_sheet(workbook, worksheet, "报名名单"); // 将工作表添加到工作簿集合中
let fileData = write(workbook, {
bookType: "xlsx",
type: 'base64'
});
return fileData
},
async exportData(){
let fileData = await this.getExcel()
// 写文件
let filePath = `${wx.env.USER_DATA_PATH}/报名名单.xlsx`
const fs = wx.getFileSystemManager()
await fs.writeFile({
filePath: filePath,
data: fileData,
encoding: 'base64',
bookSST: true,
success(res) {
console.log(res)
},
fail(res) {
console.error(res)
if (res.errMsg.indexOf('locked')) {
wx.showModal({
title: '提示',
content: '文档已打开,请先关闭',
})
}
}
})
const sysInfo = wx.getSystemInfoSync()
if(!wx.canIUse('shareFileMessage')){
if (sysInfo.platform.toLowerCase().indexOf('windows') >= 0) {
// 保存文件系统的文件到用户磁盘,仅在 PC 端支持
wx.saveFileToDisk({
filePath: filePath,
success(res) {
console.log(res)
},
fail(res) {
console.error(res)
}
})
}else{
wx.showModal({
title: '提示',
content: '当前微信版本不支持,请先更新微信',
showCancel: false
})
}
}else{
wx.shareFileMessage({
filePath: filePath,
success() {},
fail: console.error,
})
}
}
以上代码是基于MPvue框架实现的,其他框架自行参考官网Demo
(别问为啥还用这mpvue,问就是历史遗留项目)