百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术教程 > 正文

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

csdh11 2024-12-28 12:01 20 浏览

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


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


javascrip注意注意:
  • 在上面的代码中,Base64.fromUint8Array 是 base64-js 库提供的方法,用于将 Uint8Array 转换为 Base64 字符串。
  • fs.writeFile 方法在这里使用了异步形式,并传递了一个对象作为参数,这与之前的同步方法 writeFileSync 不同。这样做可以避免阻塞线程。
  • 确保你的 base64-js 和 xlsx.core.min.js 文件路径正确无误。
  • 导出功能可能会因为小程序的安全策略或文件大小限制而失败。在实际应用中,你可能需要处理这些潜在的错误情况。

相关推荐

Github霸榜的SpringBoot全套学习教程,从入门到实战,内容超详细

前言...

SpringBoot+LayUI后台管理系统开发脚手架

源码获取方式:关注,转发之后私信回复【源码】即可免费获取到!项目简介本项目本着避免重复造轮子的原则,建立一套快速开发JavaWEB项目(springboot-mini),能满足大部分后台管理系统基础开...

Spring Boot+Vue全栈开发实战,中文版高清PDF资源

SpringBoot+Vue全栈开发实战,中文高清PDF资源,需要的可以私我:)SpringBoot致力于简化开发配置并为企业级开发提供一系列非业务性功能,而Vue则采用数据驱动视图的方式将程序...

2021年超详细的java学习路线总结—纯干货分享

本文整理了java开发的学习路线和相关的学习资源,非常适合零基础入门java的同学,希望大家在学习的时候,能够节省时间。纯干货,良心推荐!第一阶段:Java基础...

探秘Spring Cache:让Java应用飞起来的秘密武器

探秘SpringCache:让Java应用飞起来的秘密武器在当今快节奏的软件开发环境中,性能优化显得尤为重要。SpringCache作为Spring框架的一部分,为我们提供了强大的缓存管理能力,让...

3,从零开始搭建SSHM开发框架(集成Spring MVC)

目录本专题博客已共享在(这个可能会更新的稍微一些)https://code.csdn.net/yangwei19680827/maven_sshm_blog...

Spring Boot中如何使用缓存?超简单

SpringBoot中的缓存可以减少从数据库重复获取数据或执行昂贵计算的需要,从而显著提高应用程序的性能。SpringBoot提供了与各种缓存提供程序的集成,您可以在应用程序中轻松配置和使用缓...

我敢保证,全网没有再比这更详细的Java知识点总结了,送你啊

接下来你看到的将是全网最详细的Java知识点总结,全文分为三大部分:Java基础、Java框架、Java+云数据小编将为大家仔细讲解每大部分里面的详细知识点,别眨眼,从小白到大佬、零基础到精通,你绝...

1,从零开始搭建SSHM开发框架(环境准备)

目录本专题博客已共享在https://code.csdn.net/yangwei19680827/maven_sshm_blog1,从零开始搭建SSHM开发框架(环境准备)...

做一个适合二次开发的低代码平台,把程序员从curd中解脱出来-1

干程序员也有好长时间了,大多数时间都是在做curd。现在想做一个通用的curd平台直接将我们解放出来;把核心放在业务处理中。用过代码生成器,在数据表设计好之后使用它就可以生成需要的controller...

设计一个高性能Java Web框架(java做网站的框架)

设计一个高性能JavaWeb框架在当今互联网高速发展的时代,构建高性能的JavaWeb框架对于提升用户体验至关重要。本文将从多个角度探讨如何设计这样一个框架,让我们一起进入这段充满挑战和乐趣的旅程...

【推荐】强&牛!一款开源免费的功能强大的代码生成器系统!

今天,给大家推荐一个代码生成器系统项目,这个项目目前收获了5.3KStar,个人觉得不错,值得拿出来和大家分享下。这是我目前见过最好的代码生成器系统项目。功能完整,代码结构清晰。...

Java面试题及答案总结(2025版持续更新)

大家好,我是Java面试分享最近很多小伙伴在忙着找工作,给大家整理了一份非常全面的Java面试场景题及答案。...

Java开发网站架构演变过程-从单体应用到微服务架构详解

Java开发网站架构演变过程,到目前为止,大致分为5个阶段,分别为单体架构、集群架构、分布式架构、SOA架构和微服务架构。下面玄武老师来给大家详细介绍下这5种架构模式的发展背景、各自优缺点以及涉及到的...

本地缓存GuavaCache(一)(guava本地缓存原理)

在并发量、吞吐量越来越大的情况下往往是离不开缓存的,使用缓存能减轻数据库的压力,临时存储数据。根据不同的场景选择不同的缓存,分布式缓存有Redis,Memcached、Tair、EVCache、Aer...