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