将答题成绩排行榜数据通过前端生成excel的方式实现导出下载功能

需求是这样的,在答题活动结束后,主办方想要导出排行榜成绩到excel,并能够在小程序里面打开查看、转发或下载保存到本地的功能。

我的实现思路大概是这样,先把排行榜数据按照得分排名顺序,处理成对应的JSON数据结构,通过XLSX库生成生成 Excel 文件,使用文件系统管理器写入文件,再通过wx.openDocument打开文件。

通过查阅官方技术文档得知,从微信小程序基础库 2.4.0 开始,wx.arrayBufferToBase64 接口确实已经停止维护。因此,我们需要使用其他方式将 ArrayBuffer 转换为 Base64 编码的字符串。

在小程序中,我们可以通过先将 ArrayBuffer 转换为 TypedArrayArray(如 Uint8Array),然后使用 TextEncoder(但小程序原生不支持 TextEncoder,需要模拟或使用其他库)或手动遍历 TypedArrayArray 来将每个字节转换为对应的 Base64 字符。不过,更简便的方法是使用现有的第三方库,如 base64-js,它可以在小程序中正常运行。

以下是一个使用 base64-js 库将 ArrayBuffer 转换为 Base64 字符串,并导出 JSON 数据为 Excel 文件的示例:

  1. 安装 base64-js 库:

    由于小程序不支持 npm,你需要手动下载 base64-js 的源代码,并将其添加到你的小程序项目中。

  2. 引入 base64-js 并编写导出逻辑:

javascript 复制代码
// 假设你已经将 base64-js 的代码添加到你的项目中,并放在 libs/base64-js.js 文件中  
const Base64 = require('../../libs/base64-js.js');  
const XLSX = require('../../libs/xlsx.core.min.js'); // 确保你的 xlsx.core.min.js 路径正确  

Page({  
  // ... 其他页面逻辑  

  exportToExcel: function () {  
    // 排行榜 示例 JSON 数据  
    const jsonData = [  
      { name: '刘东旭-xx组', num: 3, score: 95, order: 1 },  
      { name: '王思思-xx组', bum: 2, score: 90, order: 2 },  
      // ... 其他考生数据  
    ];  

    // 将 JSON 数据转换为工作表  
    const worksheet = XLSX.utils.json_to_sheet(jsonData);  

    // 创建一个新的工作簿并将工作表添加到工作簿中  
    const workbook = XLSX.utils.book_new();  
    XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');  

    // 生成 Excel 文件的二进制内容  
    const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });  

    // 将 ArrayBuffer 转换为 Uint8Array  
    const uint8Array = new Uint8Array(wbout);  

    // 使用 base64-js 将 Uint8Array 转换为 Base64 字符串  
    const base64data = Base64.fromUint8Array(uint8Array);  

    // 创建一个临时文件路径  
    const tempFilePath = `${wx.env.USER_DATA_PATH}/export_${Date.now()}.xlsx`;  

    // 使用文件系统管理器写入文件  
    const fs = wx.getFileSystemManager();  
    fs.writeFile({  
      filePath: tempFilePath,  
      data: base64data,  
      encoding: 'base64',  
      success: () => {  
        // 打开文件  
        wx.openDocument({  
          filePath: tempFilePath,  
          fileType: 'xlsx',  
          success: () => {  
            console.log('文件打开成功');  
          },  
          fail: (err) => {  
            console.error('文件打开失败', err);  
          },  
        });  
      },  
      fail: (err) => {  
        console.error('文件写入失败', err);  
      },  
    });  
  },  

  // ... 其他页面方法  
});

注意:

  • 在上面的代码中,Base64.fromUint8Arraybase64-js 库提供的方法,用于将 Uint8Array 转换为 Base64 字符串。

  • fs.writeFile 方法在这里使用了异步形式,并传递了一个对象作为参数,这与之前的同步方法 writeFileSync 不同。这样做可以避免阻塞线程。

  • 确保你的 base64-jsxlsx.core.min.js 文件路径正确无误。

  • 导出功能可能会因为小程序的安全策略或文件大小限制而失败。在实际应用中,你可能需要处理这些潜在的错误情况。

相关推荐
PieroPc8 分钟前
Python 写的 智慧记 进销存 辅助 程序 导入导出 excel 可打印
开发语言·python·excel
hackeroink1 小时前
【2024版】最新推荐好用的XSS漏洞扫描利用工具_xss扫描工具
前端·xss
迷雾漫步者3 小时前
Flutter组件————FloatingActionButton
前端·flutter·dart
向前看-3 小时前
验证码机制
前端·后端
燃先生._.4 小时前
Day-03 Vue(生命周期、生命周期钩子八个函数、工程化开发和脚手架、组件化开发、根组件、局部注册和全局注册的步骤)
前端·javascript·vue.js
高山我梦口香糖5 小时前
[react]searchParams转普通对象
开发语言·前端·javascript
m0_748235245 小时前
前端实现获取后端返回的文件流并下载
前端·状态模式
m0_748240256 小时前
前端如何检测用户登录状态是否过期
前端
black^sugar6 小时前
纯前端实现更新检测
开发语言·前端·javascript