vue使用xlsx以及file-saver进行下载xlsx文件以及Unit8Array、ArrayBuffer、charCodeAt的使用

news2025/1/12 15:44:32

先说Unit8Array、ArrayBuffer、charCodeAt的使用下面会用到这三个

Unit8Array:数组类型表示一个 8 位无符号整型数组,创建时内容被初始化为 0。创建完后,可以以对象的方式或使用数组下标索引的方式引用数组中的元素。

new Uint8Array(); // ES2017 最新语法
new Uint8Array(length); // 创建初始化为 0 的,包含 length 个元素的无符号整型数组
new Uint8Array(typedArray);
new Uint8Array(object);
new Uint8Array(buffer [, byteOffset [, length]]);

ArrayBuffer: 对象用来表示通用的原始二进制数据缓冲区。代表内存之中的一段二进制数据,可以通过“视图”进行操作。“视图”部署了数组接口,这意味着,可以用数组的方法操作内存;

它是一个字节数组,通常在其他语言中称为“byte array”。你不能直接操作 ArrayBuffer 中的内容;而是要通过类型化数组对象或 DataView 对象来操作,它们会将缓冲区中的数据表示为特定的格式,并通过这些格式来读写缓冲区的内容。

ArrayBuffer() 构造函数创建一个以字节为单位的给定长度的新 ArrayBuffer。你也可以从现有的数据(例如,从 Base64 字符串或者从本地文件)获取数组缓冲区。

ArrayBuffer特性
1.固定长度连续内存空间的引用;
2.对象代表存储一段二进制数据的内存;
3.不能直接读写,只能通过视图(Typed Array View | Data View)来读写

数据类型字节长度含义对应的C语言类型
Int818位带符号整数signed char
Uint818位不带符号整数unsigned char
Uint8C18位不带符号整数(自动过滤溢出)unsigned char
Int16216位带符号整数short
Uint16216位不带符号整数unsigned short
Int32432位带符号整数int
Uint32432位不带符号的整数unsigned int
Float32432位浮点数float
Float64864位浮点数double

charCodeAt:方法是 JavaScript 字符串对象的一个方法,它用于返回给定位置的字符的 Unicode 编码值(整数)。Unicode 编码是一个标识字符的数字,它包含了世界上几乎所有字符的映射,包括常见字符、特殊字符和表情符号。

string.charCodeAt(index)

  • string 是要从中获取字符的字符串。
  • index 是要获取字符的位置,它是从 0 开始的整数。

var str = "Hello, World!";
var charCode = str.charCodeAt(0); // 获取第一个字符 "H" 的 Unicode 编码值
console.log(charCode); // 输出 72

charCodeAt:方法通常用于处理字符串中的字符,以便执行各种文本操作,比如排序、查找、比较等。

接下来咱们开始说xlsx、file-saver下载xlsx文件

第一步下载xlsx、file-saver依赖

npm install xlsx

npm install file-saver

第二步导入xlsx以及file-saver

import FileSaver from 'file-saver'

import * as XLSX from 'xlsx';

定义一个公共方法:

export function fileBolbXlsx1(data, fields, fileName){

    data.forEach(item => {

        for (let i in item) {

          if (fields.hasOwnProperty(i)) {

            item[fields[i]] = item[i];

          }

          delete item[i]; //删除原先的对象属性

        }

      })

      var s2ab = s => {

        var buf;

        if (typeof ArrayBuffer !== 'undefined') {

          buf = new ArrayBuffer(s.length)

          var view = new Uint8Array(buf)

          for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xff

          return buf

        } else {

          buf = new Array(s.length);

          for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;

          return buf;

        }

      }

    const workbook = XLSX.utils.book_new();

    let ws = XLSX.utils.json_to_sheet(data, { header: Object.values(fields) })

    workbook.SheetNames.push(fileName)

    workbook.Sheets[fileName] = ws

    const wbout = XLSX.write(workbook, { bookType: 'xlsx', type: 'binary' });

    FileSaver.saveAs(new Blob([s2ab(wbout)], { type: 'application/octet-stream' }), fileName + '.xlsx');

}

在页面中使用

欢迎大家参与讨论,虽然Unit8Array、ArrayBuffer、charCodeAt前端不经常使用,但是还是需要了解一下的,希望大家共同进步

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2227200.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Python中的数据可视化:Matplotlib基础与高级技巧

Python中的数据可视化:Matplotlib基础与高级技巧 数据可视化是数据分析和数据科学中不可或缺的一部分。通过图表,我们可以更直观地观察数据的分布和趋势。Matplotlib作为Python最基础、也是最广泛使用的绘图库之一,不仅支持多种常用图表&…

Android Studio中Gradle一直在加载怎么解决(首次安装过程中)

目录 前言:遇到问题:已解决: 前言: Android Studio中Gradle一直在加载怎么解决(首次安装过程中),在安装Android Studio的过程中,我因为环境的问题,被困扰了一天&#xf…

合合信息发布智能文档处理“百宝箱”,助力文档应用开发

文档是知识传递的载体,无论是大模型应用发展,还是与产业数字化息息相关的高质量数据库的建立,都离不开对于文档数据的处理和分析。目前,越来越多的开发者开始关注文档数据处理背后的“文档解析”技术,用以实现自动化数…

python常见内置函数

介绍Python常见的内置函数。 1、abs 取一个数的绝对值 int_value -2 print(abs(int_value))2、all 若一个可迭代对象(可循环遍历的对象)中所有元素为真,结果为真 list_value1 [1,2,3,4,0] list_value2 [1,2,3,4] print(all(list_value1)) print(all(list_va…

【cmake实战六】如何使用编译的库(动态库dll)——windows系统

【cmake实战六】如何使用编译的库(动态库dll)——windows系统_make windows下生成库-CSDN博客 基于以上文章,遇到的一些问题: 一、首先我用vs code 新建了一个项目:TEST 新增文件:CMakeList.txt #…

Kafka 与传统 MQ 消息系统之间有三个关键区别?

大家好,我是锋哥。今天分享关于【Kafka 与传统 MQ 消息系统之间有三个关键区别?】面试题?希望对大家有帮助; Kafka 与传统 MQ 消息系统之间有三个关键区别? 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 …

微信小程序的日期区间选择组件的封装和使用

组件化开发是一种将大型软件系统分解为更小、更易于管理和复用的独立模块或组件的方法。这种方法在现代软件开发中越来越受到重视&#xff0c;尤其是在前端开发领域。微信小程序的日期区间选择组件的使用 wxml 代码 <view><view bind:tap"chooseData">…

flask自学教程(二)

文章目录 前言一、中型flask目录二、大型flask目录1.启动文件run.py定义2.实例创建文件定义&#xff08;app/__init__.py&#xff09;3.配置项config.py4. app/routes下的__init__.py5. 定义一个路由并写一个静态页面6. 模型文件7.static目录8.requirements.txt依赖 3.flask&am…

威胁 Windows 和 Linux 系统的新型跨平台勒索软件:Cicada3301

近年来&#xff0c;网络犯罪世界出现了新的、日益复杂的威胁&#xff0c;能够影响广泛的目标。 这一领域最令人担忧的新功能之一是Cicada3301勒索软件&#xff0c;最近由几位网络安全专家进行了分析。他们有机会采访了这一危险威胁背后的勒索软件团伙的成员。 Cicada3301的崛…

C/C++ 随机数生成方法

1. 使用 rand() 和 srand() - 库: <stdlib.h> 或 <cstdlib> - 特点: 伪随机数生成器&#xff0c;简单易用。 - 示例: #include <stdlib.h> #include <time.h> int main() { srand(time(NULL)); // 初始化随机数生成器 int random_nu…

openEuler 系统进程管理全攻略

openEuler 系统进程管理全攻略 一、前言 在 openEuler 操作系统中&#xff0c;进程管理是系统管理的重要组成部分。有效地管理进程可以提高系统的性能、稳定性和安全性。本文将详细介绍 openEuler 系统中与进程管理相关的操作、工具和命令&#xff0c;包括它们的应用场景和使…

Jenkins发布vue项目,版本不一致导致build错误

问题一 yarn.lock文件的存在导致在自动化的时候&#xff0c;频频失败问题二 仓库下载的资源与项目资源版本不一致 本地跑好久的一个项目&#xff0c;现在需要部署在Jenkins上面进行自动化打包部署&#xff1b;想着部署后今后可以省下好多时间&#xff0c;遂兴高采烈地去部署&am…

技术成神之路:设计模式(二十一)外观模式

相关文章&#xff1a;技术成神之路&#xff1a;二十三种设计模式(导航页) 介绍 外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它为子系统中的一组接口提供一个统一的接口。外观模式定义了一个高层接口&#xff0c;使得子系统更容易使用。 …

十六:Python学习笔记-- 爬虫(2)requests 模块详解

目录 安装 requests 模块 基本请求方法 GET 请求 POST 请求 PUT 请求 DELETE 请求 添加请求头&#xff1a; 处理查询参数&#xff1a; 文件上传&#xff1a; 常见响应状态码 访问超时 cookie的查询和设置 查询 Cookies 设置 Cookies 设置爬虫代理 小试牛刀 安装 …

QStringList 使用详解

QT开发之路 企业级开发系列文章&#xff0c;主要目标快速学习、完善、提升 相关技能 高效完成企业级项目开发 分享在企业中积累的实用技能和经验。 通过具体的编码过程、代码示例、步骤详解、核心内容和展示的方法解决遇到的实际问题。 转载请附上文章出处与本文链接。 QStrin…

尚硅谷 | Nginx | 学习笔记

尚硅谷 | Nginx | 学习笔记 尚硅谷Nginx教程由浅入深&#xff08;一套打通丨初学者也可掌握&#xff09;_哔哩哔哩_bilibili 文章目录 尚硅谷 | Nginx | 学习笔记一、Nginx相关概念1.Nginx是什么2.正向代理和反向代理正向代理反向代理 3.负载均衡和动静分离负载均衡动静分离 二…

AtCoder ABC376A-D题解

个人觉得 ABC 变得越来越难了/kk/kk/kk 比赛链接:ABC376 Problem A: Code #include <bits/stdc.h> using namespace std; int main(){int N,C;cin>>N>>C;for(int i1;i<N;i)cin>>T[i];int ans0,pre-1e5;for(int i1;i<N;i){if(T[i]-pre>C){…

后台管理系统的通用权限解决方案(五)SpringBoot整合hibernate-validator实现表单校验

1 hibernate-validator介绍 早期的网站&#xff0c;用户输入一个邮箱地址&#xff0c;需要将邮箱地址发送到服务端&#xff0c;服务端进行校验&#xff0c;校验成功后&#xff0c;给前端一个响应。 有了JavaScript后&#xff0c;校验工作可以放在前端去执行。那么为什么还需要…

【02基础】- RabbitMQ基础

目录 2- RabbitMQ2-1 介绍和安装安装 2-2 RabbitMQ 快速入门2-3 RabbitMQ 数据隔离 3- Java客户端3-1 快速入门AMQP快速入门&#x1f4d1;小结&#xff1a;SpringAMQP如何收发消息&#xff1f; 3-2 WorkQueues 任务模型案例-使用 WorkQueue 单队列绑定多消费者&#x1f4d1;小结…

uniapp开发【选择地址-省市区功能】,直接套用即可

一、效果展示 二、代码 <template><view><view class="user_info"><view class="item"