【蓝牙小程序】小程序将数据导出为excel表格(纯前端方式,无服务器、不使用云开发)

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

在微信小程序中将蓝牙收集的传感器数据导出为Excel表格,可以通过以下步骤实现:

基本实现方案

  1. 收集和存储数据

    • 在蓝牙接收回调函数中保存传感器数据到数组或对象中

    • 建议使用小程序的存储API(wx.setStorage)暂存数据

  2. 生成Excel文件

  3. 导出文件

      使用const fs = wx.getFileSystemManager(); fs.writeFile() API保存文件。

注意:有些AI生成版本调用了wx.saveFileToDisk() 函数,其在手机端真机调试时可能失败。

wx.saveFileToDisk({
        filePath,
        success: () => {
          wx.showToast({title: '导出成功'});
        },
        fail: (err) => {
          console.error('保存失败', err);
        }
      });

实现步骤

①数据准备

// 0. 数据准备
//A. json 数组格式的数据案例1
const sensorData = [
  {time: '2023-01-01 10:00', temperature: 25.6, humidity: 60},
  {time: '2023-01-01 10:01', temperature: 25.7, humidity: 59},
  // 更多数据...
];

//B. json 数组格式的数据案例2
    const data = [{
      code: 1,
      name: 'A',
    }, {
      code: 2,
      name: 'B',
    }, {
      code: 3,
      name: 'C',
    }, {
      code: 4,
      name: 'D',
    }]

②库引入

// 1. 安装xlsx库(需支持小程序环境)
// 通常需要下载xlsx.core.min.js放到小程序项目中

// 2. 在页面中引入
const XLSX = require('../../utils/xlsx.core.min.js');

在小程序路径下打开终端,npm install xlsx,然后将下载到的xlsx.core.min.js放到小程序项目/utils 目录下。

 ③调用库

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);//新建工作表单,表单数据来源为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: '文档已打开,请先关闭',
          })
        }

      }
    })
  }
})

注意:有些AI生成版本调用了wx.saveFileToDisk() 函数,其在手机端真机调试时可能失败。

wx.saveFileToDisk({
        filePath,
        success: () => {
          wx.showToast({title: '导出成功'});
        },
        fail: (err) => {
          console.error('保存失败', err);
        }
      });

权限问题:确保在小程序配置文件(app. json)中声明了文件相关权限

//app.json
{
   ....
  "permission": {
    "scope.writePhotosAlbum": {
      "desc": "用于保存导出文件"
    }
  }
}

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

 

进阶方案

对于更复杂的需求,可以考虑:

  1. 使用云开发功能将数据先上传到云端再导出

  2. 实现定期自动导出功能

  3. 添加数据筛选和自定义导出范围功能

  4. 支持多种导出格式(Excel/CSV/PDF等)

 

参考文章:

1. 

https://developers.weixin.qq.com/community/develop/article/doc/0000ce405ac73014bdac7387759c13

转载自上述链接,如有侵权联系必删。

2. 

https://blog.csdn.net/gao511147456/article/details/132009965

 

posted @ 2025-05-12 17:48  FBshark  阅读(88)  评论(0)    收藏  举报