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

news/2024/11/16 3:36:04/

需求是这样的,在答题活动结束后,主办方想要导出排行榜成绩到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/news/1547335.html

相关文章

【机器学习】如何配置anaconda环境(无脑版)

马上就要上机器学习的实验,这里想写一下我配置机器学习的anaconda环境的二三事 一、首先,下载安装包: Download Now | Anaconda 二、打开安装包,一直点NEXT进行安装 这里要记住你要下载安装的路径在哪,后续配置环境…

【数学二】线性代数-二次型

考试要求 1、了解二次型的概念, 会用矩阵形式表示二次型,了解合同变换与合同矩阵的概念. 2、了解二次型的秩的概念,了解二次型的标准形、规范形等概念,了解惯性定理,会用正交变换和配方法化二次型为标准形。 3、理解正定二次型、正定矩阵的概念,并掌握其判别法. 二次型…

实现3D热力图

实现思路 首先是需要用canvas绘制一个2D的热力图,如果你还不会,请看json绘制热力图。使用Threejs中的canvas贴图,将贴图贴在PlaneGeometry平面上。使用着色器材质,更具json中的数据让平面模型 拔地而起。使用Threejs内置的TWEEN&…

ubuntu16.04配置网卡

安装ubuntu16.04到最后选择安装服务时通过空格勾选 rootubuntu:~# cat /etc/network/interfaces # This file describes the network interfaces available on your system # and how to activate them. For more information, see interfaces(5).source /etc/network/interfa…

使用 Regex 在 Java 中使用 Logstash LogBack 屏蔽日志

在当今数据驱动的世界中,数据安全至关重要。日志记录框架在应用程序监控和调试中起着至关重要的作用,但它们可能会无意中暴露本不应该暴露的敏感信息。日志掩码是一种可以有效地混淆日志消息中的敏感数据以保护机密信息的技术。 了解 Logback Logback …

outlook邮箱关闭垃圾邮件——PowerAutomate自动化任务

微软邮箱反垃圾已经很强大了非常敏感,自家的域名的邮件都能给扔到垃圾邮箱里,但还是在本地增加了一层垃圾邮箱功能,然后垃圾邮箱并没有提示,导致错过很多通知,本身并没有提供关闭的功能,但微软有个Microsof…

一篇Spring Boot 笔记

一、Spring Boot 简介 Spring Boot 是一个用于创建独立的、基于 Spring 的生产级应用程序的框架。它简化了 Spring 应用的初始搭建和开发过程,通过自动配置等功能,让开发者能够快速地构建应用,减少了大量的样板代码和复杂的配置。 二、核心特…

万字长文解读机器学习——感知机、MLP、SVM

🌺历史文章列表🌺 机器学习——损失函数、代价函数、KL散度机器学习——特征工程、正则化、强化学习机器学习——常见算法汇总机器学习——感知机、MLP、SVM机器学习——KNN机器学习——贝叶斯机器学习——决策树机器学习——随机森林、Bagging、Boostin…