微信小程序导出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,问就是历史遗留项目)

posted @ 2024-05-09 10:12  十一是假期啊  阅读(366)  评论(0编辑  收藏  举报