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

embedded/2024/11/19 4:43:12/

需求是这样的,在答题活动结束后,主办方想要导出排行榜成绩到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 并编写导出逻辑:


// 假设你已经将 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.fromUint8Array 是 base64-js 库提供的方法,用于将 Uint8Array 转换为 Base64 字符串。

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

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

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

图片


http://www.ppmy.cn/embedded/138693.html

相关文章

React Native 全栈开发实战班 - 图片加载与优化

在移动应用中,图片加载与优化 是提升用户体验和减少资源消耗的重要环节。图片加载不当可能导致应用卡顿、内存泄漏甚至崩溃。本章节将介绍 React Native 中常用的图片加载方法,包括 Image 组件的使用、第三方图片加载库(如 react-native-fast…

java 读取 有时需要sc.nextLine();读取换行符 有时不需要sc.nextLine();读取换行符 详解

在 Java 中,使用 Scanner 类读取输入时,换行符的处理行为取决于所用的读取方法。不同方法的工作原理会影响是否需要额外调用 sc.nextLine() 来清理缓冲区中的换行符。 核心问题 根本原因:Scanner 是基于输入流工作的,而换行符&am…

wordcloud库基本介绍

文章目录 wordcloud库概述wordcloud库的安装 wordcloud库使用说明配置对象参数 wordcloud应用实例实例: 政府工作报告词云 wordcloud库概述 wordcloud是优秀的词云展示第三方库 词云以词语为基本单位,更加直观和艺术地展示文本 wordcloud库的安装 (cmd命令行) pip install …

《InsCode AI IDE:编程新时代的引领者》

《InsCode AI IDE:编程新时代的引领者》 一、InsCode AI IDE 的诞生与亮相二、独特功能与优势(一)智能编程体验(二)多语言支持与功能迭代 三、实际应用与案例(一)游戏开发案例(二&am…

Linux 进程不同的地方可以调用同一个函数是如何实现的

函数的存储和链接方式 在编译过程中,函数的代码会被转换为机器语言指令,并存储在目标文件的代码段中。当程序被链接时,这些目标文件会组合在一起形成可执行文件或者共享库。对于静态链接,函数的代码会被直接复制到最终的可执行文件…

3步实现贪吃蛇

方法很简单,打开页面,复制,粘贴 一.整体思维架构 我们根据游戏的开始,运行,结束,将整个游戏划分成三个部分。在每个部分下面又划分出多个功能,接下来我们就根据模块一一实现功能。 二.Gamesta…

实用教程:如何无损修改MP4视频时长

如何在UltraEdit中搜索MP4文件中的“mvhd”关键字 引言 在视频编辑和分析领域,有时我们需要深入到视频文件的底层结构中去。UltraEdit(UE)和UEStudio作为强大的文本编辑器,允许我们以十六进制模式打开和搜索MP4文件。本文将指导…

PCL 三维重建 a-shape曲面重建算法

目录 一、概述 1.1原理 1.2实现步骤 1.3应用场景 二、代码实现 2.1关键函数 2.1.1 Concave Hull重建 2.1.2 可视化曲面重建结果 2.2完整代码 三、实现效果 PCL点云算法汇总及实战案例汇总的目录地址链接: PCL点云算法与项目实战案例汇总(长期更新) 一、概述 …