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)) {
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前端不经常使用，但是还是需要了解一下的，希望大家共同进步