评论

小程序纯前端将数据导出为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  
点赞 13
收藏
评论

16 个评论

  • L.3.6
    L.3.6
    2022-11-03

    ws['A1‘].s = {

                alignment: {

                  horizontal: 'center',

                  vertical: 'center',

                  wrapText: true,

                },

    设置无效该咋办 有知道的嘛


    2022-11-03
    赞同 2
    回复
  • 『孔司令』
    『孔司令』
    2022-03-26

    手机端可以打开,电脑端打不开,大佬能说一下怎么解决吗?


    2022-03-26
    赞同 2
    回复
  • 牛远明
    牛远明
    2023-12-19

    请问大佬,这个excel确实打开了,但是在手机的哪个位置呢?我想发送出去?感谢各位大佬,在线等

    2023-12-19
    赞同 1
    回复 1
  • 有海在没意外
    有海在没意外
    2023-11-27

    非常感谢 解决了困扰我很久的问题,请问可以转载吗?


    2023-11-27
    赞同 1
    回复
  • 2023-08-23

    你好,问下安卓手机打开excel出现空白有遇到吗

    2023-08-23
    赞同 1
    回复 2
    • 向日葵🌻
      向日葵🌻
      2023-08-24
      我今天也遇到了,空白的,之前是好的
      2023-08-24
      1
      回复
    • 瑶池
      瑶池
      2023-09-06
      解决了吗
      2023-09-06
      回复
  • 飞鱼
    飞鱼
    2023-05-08

    作者有没有完整的源码

    2023-05-08
    赞同 1
    回复
  • 苏子佳
    苏子佳
    2022-07-20

    这个插件能在小程序导入excel 解析数据吗?


    2022-07-20
    赞同 1
    回复 1
    • 收割机
      收割机
      2022-07-20
      手机小程序导出还需要QQ浏览器的支持
      2022-07-20
      回复
  • Louis J
    Louis J
    2022-04-15

    同问这个问题,现在最新的情况 能查看表格了,但是不能下载 不能编辑。

    2022-04-15
    赞同 1
    回复 1
    • 收割机
      收割机
      2022-07-20
      不能下载不能编辑是受小程序的限制,需要QQ浏览器的支持
      2022-07-20
      回复
  • 步行途中
    步行途中
    05-27

    有搞成功的吗,有偿求教

    05-27
    赞同
    回复
  • 光头强
    光头强
    05-26

    谢谢

    05-26
    赞同
    回复

正在加载...

登录 后发表内容