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语言类型
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.rhkb.cn/news/458487.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Docker中如何控制服务启动顺序实现探讨

文章目录 一、Docker概述二、Docker三剑客1. Compose2. Machine3. Swarm 三、简要需求1. 样例工程2. 代码模块3. 调用方向4. 期望启动顺序 四、思路分析1.各走各路1.)docker-compose -f指定不同配置文件2.)docker-compose up -d service-name指定服务名3…

【CSS in Depth 2 精译_055】8.3 伪类 :is() 和 :where() 的正确打开方式

当前内容所在位置(可进入专栏查看其他译好的章节内容) 【第三部分 现代 CSS 代码组织】 ✔️【第八章 层叠图层及其嵌套】 ✔️ 8.1 用 layer 图层来操控层叠规则(上篇) 8.1.1 图层的定义(上篇)8.1.2 图层的…

巡飞单机多旋翼无人机技术详解

巡飞单机多旋翼无人机技术是一种集成了多种先进技术的无人机系统,它具备自主飞行、长续航、高精度控制以及多任务负载能力等特点。以下是对巡飞单机多旋翼无人机技术的详细解析: 一、机架与结构设计 1.材料选择:为了确保无人机能够承载足够…

cmake命令使用

有关cmake的入门简介可参见 CMake入门教程_cmake静态test.c编译-CSDN博客 本文是进一步对cmake常用命令做进一步详述 配置项目 cmake_minimum_required 作用 配置cmake最低版本 用法 cmake_minimum_required(VERSION 3.0) project 作用:设置预设变量 PROJEC…

深度学习(一)基础:神经网络、训练过程与激活函数(1/10)

深度学习基础:神经网络、训练过程与激活函数 引言: 深度学习作为机器学习的一个子领域,近年来在人工智能的发展中扮演了举足轻重的角色。它通过模仿人脑的神经网络结构,使得计算机能够从数据中学习复杂的模式和特征,…

dmsql日志分析工具部署与使用DM8/DM7

dmsql日志分析工具部署与使用DM8/DM7 1 环境介绍2 JAVA 环境变量配置2.1 Os Kylin 10 JAVA 环境变量配置2.2 Windos7 JAVA环境变量配置 3 数据库配置3.1 数据库初始化参数3.2 数据库创建表 4 配置DMLOG日志分析工具4.1 Kylin v10 配置DMLOG日志分析工具4.2 执行日志分析4.3 Win…

linux面试题复习

前言 现在只是初版,很多格式我还没有改好,会慢慢修改订正。 可能用到的网址:在线 EXCEL 到 MARKDOWN 转换器。 参考了很多网上的面试题和外网上的面试题: 参考文档: 程序员的50大Linux面试问题及答案 Top 60 Linux …

MySQL——test4(综合练习)

目录 建库建表(题目)处理表1. 修改student 表中年龄(sage)字段属性,数据类型由int 改变为smallint2. 为Course表中Cno 课程号字段设置索引,并查看索引3. 为SC表建立按学号(sno)和课程号(cno)组合的升序的主键索引,索引名为SC_INDE…

数据结构:“小猫钓鱼游戏”

一:题目 栈和队列的综合应用:“小猫钓鱼”的游戏规则是:将一副扑克牌平均分成两份,每人拿一份。玩家甲先拿出手中的第一张扑克牌放在桌上,然后玩家乙也拿出手中的第一张扑克牌,并放在玩家甲刚打出的扑克牌的…

前端算法:树(力扣144、94、145、100、104题)

目录 一、树(Tree) 1.介绍 2.特点 3.基本术语 4.种类 二、树之操作 1.遍历 前序遍历(Pre-order Traversal):访问根节点 -> 遍历左子树 -> 遍历右子树。 中序遍历(In-order Traversal&#xf…

STM32L476芯片在KEIL环境下BOOT跳转APP注意事项

BOOT工程 分配BOOT程序地址、设置参数地址、APP程序地址、下载缓冲区地址 #define BOOT_SECTOR_ADDR 0x08000000 #define BOOT_SECTOR_SIZE 0x0000A000 #define SETTING_SECTOR_ADDR 0x0800A000 #define SETTING_SECTOR_SIZE 0x00002000 #define APP_S…

R语言 | paletteer包:拥有2100多个调色板!

看到 PMID:39024031 文章的代码中&#xff0c;有颜色设置的语句&#xff1a; pal <- paletteer_d("ggsci::category20_d3")[c(1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18)]DimPlot(MM,reduction umap,group.by "sample",label F,pt.size 0.1,c…

从零开始机器学习——基于PyTorch构建你的第一个线性回归模型

随着人工智能技术的迅猛发展&#xff0c;机器学习成为了现代科技领域中最炙手可热的话题之一。然而&#xff0c;对于初学者来说&#xff0c;机器学习似乎总是充满了复杂的理论和难以理解的概念。本文将带你从零开始&#xff0c;使用PyTorch深度学习框架&#xff0c;构建一个最简…

【设计模式系列】代理模式(八)

一、什么是代理模式 代理模式&#xff08;Proxy Pattern&#xff09;是一种结构型设计模式&#xff0c;它为其他对象提供一种代理以控制对这个对象的访问。代理模式在不直接访问实际对象的情况下&#xff0c;提供了对目标对象的间接访问。通过引入一个代理对象来间接操作实际对…

layui扩展组件之----右键菜单

源码&#xff1a;rightmenu.js layui.define([element], function (exports) {let element layui.element;const $ layui.jquery;let MOD_NAME rightmenu;let RIGHTMENUMOD function () {this.v 1.0.0;this.author raowenjing;};String.prototype.format function () {…

检索引擎Elasticsearch

一.为什么要用Elasticsearch 由于我们在运行我们的项目的时候通常都是将数据存到mysql或者sql serve等数据库中&#xff0c;在进行数据搜索时使用sql 语句 like进行模糊匹配查询&#xff0c;其一&#xff1a;虽然可以查到数据&#xff0c;但是它模糊匹配查询速度较慢&#xff0…

世优科技“AI+空间计算”推动消费行业向智能化升级

人工智能的演进正从初期的技术探索阶段&#xff0c;转向技术应用阶段&#xff0c;在此趋势下&#xff0c;融合了多模态大模型、虚拟现实、空间计算等前沿技术的人工智能应用新方向&#xff0c;展现出了巨大的潜力和商业价值。 10月19日&#xff0c;2024北京朝阳国际灯光节全新…

[C++11] 右值引⽤与移动语义

文章目录 左值和右值左值&#xff08;Lvalue&#xff09;右值&#xff08;Rvalue&#xff09;区别 左值引⽤和右值引⽤左值引用&#xff08;Lvalue Reference&#xff09;右值引用&#xff08;Rvalue Reference&#xff09;右值引用的特点 右值引用延长生命周期右值引⽤和移动语…

数据结构——树、二叉树和森林间的转换

前言 介绍 &#x1f343;数据结构专区&#xff1a;数据结构 参考 该部分知识参考于《数据结构&#xff08;C语言版 第2版&#xff09;》129~130页 &#x1f308;每一个清晨&#xff0c;都是世界对你说的最温柔的早安&#xff1a;ૢ(≧▽≦)و✨ 目录 前言 1、基础知识 2…

Matlab 车牌识别技术

1.1设计内容及要求&#xff1a; 课题研究的主要内容是对数码相机拍摄的车牌&#xff0c;进行基于数字图像处理技术的车牌定位技术和车牌字符分割技术的研究与开发&#xff0c;涉及到图像预处理、车牌定位、倾斜校正、字符分割等方面的知识,总流程图如图1-1所示。 图1-1系统总…