评论

小程序纯前端将数据导出为excel表格

如何在小程序使用纯前端技术将以获取到的数据导出为excel表格

网上有许多文章是讲述小程序将数据导出为excel表格的,但大多需要经过请求服务端,再加上云存储。那一套逻辑之前做后端的时候就玩过了。很多时候,我们浏览页面时数据已经从服务端获取到本地了,直接将之导出即可,再走服务端,实为多此一举。为了减轻服务端压力,于是便有了这篇文章。本文章介绍如何在小程序使用纯前端技术将以获取到的数据导出为excel表格。文末有代码片段

xlsx插件文档
sheetjs插件文档

const XLSX = require('../utils/excel.js')

Page({
  data: {

  },
  onLoad() {

  },
  exportData() {
    // 数据源
    const data = [{
      code: 1,
      name: 'A',
    }, {
      code: 2,
      name: 'B',
    }, {
      code: 3,
      name: 'C',
    }, {
      code: 4,
      name: 'D',
    }]

    // 构建一个表的数据
    let sheet = []
    let title = ['序号', '姓名']
    sheet.push(title)
    data.forEach(item => {
      let rowcontent = []
      rowcontent.push(item.code)
      rowcontent.push(item.name)
      sheet.push(rowcontent)
    })

    // XLSX插件使用
    var ws = XLSX.utils.aoa_to_sheet(sheet);
    var wb = XLSX.utils.book_new();
    XLSX.utils.book_append_sheet(wb, ws, "用户表");
    var fileData = XLSX.write(wb, {
      bookType: "xlsx",
      type: 'base64'
    });

    let filePath = `${wx.env.USER_DATA_PATH}/用户表.xlsx`

    // 写文件
    const fs = wx.getFileSystemManager()
    fs.writeFile({
      filePath: filePath,
      data: fileData,
      encoding: 'base64',
      bookSST: true,
      success(res) {
        console.log(res)
        const sysInfo = wx.getSystemInfoSync()
        // 导出
        if (sysInfo.platform.toLowerCase().indexOf('windows') >= 0) {
          // 电脑PC端导出
          wx.saveFileToDisk({
            filePath: filePath,
            success(res) {
              console.log(res)
            },
            fail(res) {
              console.error(res)
              util.tips("导出失败")
            }
          })
        } else {
          // 手机端导出
          // 打开文档
          wx.openDocument({
            filePath: filePath,
            showMenu: true,
            success: function (res) {
              console.log('打开文档成功')
            },
            fail: console.error
          })
        }

      },
      fail(res) {

        console.error(res)
        if (res.errMsg.indexOf('locked')) {
          wx.showModal({
            title: '提示',
            content: '文档已打开,请先关闭',
          })
        }

      }
    })
  }
})

导出效果如下,如需高级设置请参照xlsx插件文档 sheetjs插件文档

代码片段
-完-

最后一次编辑于  2023-08-11  
点赞 14
收藏
评论

16 个评论

  • 心悦有你
    心悦有你
    2023-11-29

    你好作者可以分享一下这个js文件吗

    2023-11-29
    赞同
    回复 1
    • 收割机
      收割机
      2023-11-29
      代码片段里面有
      2023-11-29
      1
      回复
  • 欧业
    欧业
    2023-01-17

    请问作者可以分享一下那个exceljs文件嘛,感谢感谢

    2023-01-17
    赞同
    回复 1
    • 收割机
      收割机
      2023-02-02
      代码片段里面有
      2023-02-02
      1
      回复
  • 欧业
    欧业
    2023-01-17

    请问作者可以分享一下 excel.js 文件嘛

    

    2023-01-17
    赞同
    回复
  • 邕有我
    邕有我
    2022-07-22

    能不能自定义xlsx模板?

    2022-07-22
    赞同
    回复
  • 佳佳果
    佳佳果
    2022-04-25

    大佬,能请教您个问题吗,小程序纯前端将数据导出为excel表格这篇文章里可以把本地图片也导出到excel表格里吗?格式怎么写,如能回答,将不胜感激!!!

    2022-04-25
    赞同
    回复 2
    • 收割机
      收割机
      2022-07-20
      没尝试过哦,可以看看xlsx插件文档
      2022-07-20
      回复
    • Teddy Ursus
      Teddy Ursus
      2023-01-26
      姐妹,你成功了吗?!我也想知道wwww
      2023-01-26
      回复
  • 白云·聚散
    白云·聚散
    2021-09-03

    请问为什么导出的文件打不开啊?

    2021-09-03
    赞同
    回复 3
    • 收割机
      收割机
      2021-09-04
      电脑端导出需要配合另外一个小程序的接口使用才行。手机端导出需要QQ浏览器的支持
      2021-09-04
      回复
    • 收割机
      收割机
      2021-09-04
      wx.saveFileToDisk接口
      2021-09-04
      回复
    • Louis J
      Louis J
      2022-04-15
      是需要这个接口吗?wx.saveFileToDisk接口
      2022-04-15
      回复

正在加载...

登录 后发表内容