网站首页 > 技术文章 正文
需求是这样的,在答题活动结束后,主办方想要导出排行榜成绩到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 文件的示例:
- 安装 base64-js 库:
由于小程序不支持 npm,你需要手动下载 base64-js 的源代码,并将其添加到你的小程序项目中。 - 引入 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);
},
});
},
// ... 其他页面方法
});
javascrip注意注意:
- 在上面的代码中,Base64.fromUint8Array 是 base64-js 库提供的方法,用于将 Uint8Array 转换为 Base64 字符串。
- fs.writeFile 方法在这里使用了异步形式,并传递了一个对象作为参数,这与之前的同步方法 writeFileSync 不同。这样做可以避免阻塞线程。
- 确保你的 base64-js 和 xlsx.core.min.js 文件路径正确无误。
- 导出功能可能会因为小程序的安全策略或文件大小限制而失败。在实际应用中,你可能需要处理这些潜在的错误情况。
- 上一篇: Excel+Access制作工艺流程管理系统5.0
- 下一篇: 前端新工具—vite从入门到实践
猜你喜欢
- 2024-12-08 公司大佬对excel导入、导出的封装,那叫一个秒啊
- 2024-12-08 如何将 “在线Excel” 嵌入你的开发系统中?
- 2024-12-08 产品说要让excel在线编辑,我是这样做的。
- 2024-12-08 SpringBoot+POI导出Excel表格
- 2024-12-08 asp.net mvc导入导出excel 使用Aspose.Cells好用到停不下来
- 2024-12-08 原来用hutool导入导出Excel这么丝滑!
- 2024-12-08 JAVA导出EXCEL表格
- 2024-12-08 Svelte框架结合SpreadJS实现纯前端类Excel在线填报
- 2024-12-08 前端必读榜——如何在React中用SpreadJS导入/导出Excel文件
- 2024-12-08 如何用Excel制作一张能在网上浏览的动态数据报表
你 发表评论:
欢迎- 07-07使用AI开发招聘网站(100天AI编程实验)
- 07-07Tailwindcss 入门(tailwindcss中文文档)
- 07-07CSS 单位指南(css计量单位)
- 07-07CSS 定位详解(css定位属性的运用)
- 07-07程序员可以作为终身职业吗?什么情况下程序员会开始考虑转行?
- 07-07云和学员有话说:国企转行前端开发,斩获13K高薪!
- 07-0791年转行前端开发,是不是不该转,有啥风险?
- 07-07计算机图形学:变换矩阵(图形学 矩阵变换)
- 595℃几个Oracle空值处理函数 oracle处理null值的函数
- 587℃Oracle分析函数之Lag和Lead()使用
- 575℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 572℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 568℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 561℃【数据统计分析】详解Oracle分组函数之CUBE
- 548℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 541℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端react (48)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端懒加载 (49)
- 前端获取当前时间 (50)
- Oracle RAC (73)
- oracle恢复 (76)
- oracle 删除表 (48)
- oracle 用户名 (74)
- oracle 工具 (55)
- oracle 内存 (50)
- oracle 导出表 (57)
- oracle 中文 (51)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)