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

先说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语言类型
Int8 1 8位带符号整数 signed char
Uint8 1 8位不带符号整数 unsigned char
Uint8C 1 8位不带符号整数(自动过滤溢出) unsigned char
Int16 2 16位带符号整数 short
Uint16 2 16位不带符号整数 unsigned short
Int32 4 32位带符号整数 int
Uint32 4 32位不带符号的整数 unsigned int
Float32 4 32位浮点数 float
Float64 8 64位浮点数 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)) {

itemfields\[i] = itemi;

}

delete itemi; //删除原先的对象属性

}

})

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) viewi = s.charCodeAt(i) & 0xff

return buf

} else {

buf = new Array(s.length);

for (var i = 0; i != s.length; ++i) bufi = 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.SheetsfileName = 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前端不经常使用,但是还是需要了解一下的,希望大家共同进步

相关推荐
学传打活6 天前
【边打字.边学昆仑正义文化】_进阶篇5 宇宙星系的运转(续3)
微信公众平台·1024程序员节·汉字·昆仑正义文化
学传打活11 天前
【边打字.边学昆仑正义文化】_进阶篇5 宇宙星系的运转(续1)
微信公众平台·1024程序员节·汉字·昆仑正义文化
fangzhanpeng16819 天前
快速掌握C#语言基础知识点(1.基础数据类型)
开发语言·c#·1024程序员节
无己心21 天前
面向多平台 AI 搜索引擎的适配层架构设计
前端·人工智能·搜索引擎·ai·1024程序员节
u0103055271 个月前
AI驱动的安卓UI自动生成功能实现
人工智能·1024程序员节
u0103055271 个月前
长株潭智能体赋能腾讯元器链接共享
1024程序员节
云贝贝贝1 个月前
OceanBase认证体系介绍与备考指南
运维·服务器·oceanbase·1024程序员节
u0103055271 个月前
Java图像处理实战指南
人工智能·1024程序员节
u0103055271 个月前
Java AWT鼠标事件全解析
人工智能·1024程序员节
u0103055271 个月前
Java实用类应用精讲
人工智能·1024程序员节