微信小程式匯出Excel檔案並轉發給好友

十一是假期啊發表於2024-05-09
微信小程式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,問就是歷史遺留專案）

相關文章