前端导入导出

1、将后端excel二进制文件导出excel下载

import { read, utils, writeFileXLSX } from "xlsx";const useExportExcel = (excelData: string, fileName: string) => {const wb = read(excelData);const ws = wb.Sheets[wb.SheetNames[0]];// 从工作表生成数据行const data = utils.sheet_to_json(ws);// 从对象数组创建工作表const worksheet = utils.json_to_sheet(data);// 创建新工作簿const workbook = utils.book_new();// 工作表加到工作簿utils.book_append_sheet(workbook, worksheet);writeFileXLSX(workbook, fileName);
};

import { saveAs } from ‘file-saver’; // 适合下图片、文件、压缩包等(就是处理后端返回点击等功能)

const onDownload = async (fileName: string) => {const res = await udfDownload(fileName);const name = fileName.slice(0, fileName.lastIndexOf('-'));saveAs(new Blob([res]), name);
};

下载常用的封装

const downloadFun = (url: string, downloadFileName: string) => {const uint8Array = new Uint8Array(res?.result); // 需要看是否需要处理Uint8Arrayconst zipBlob = new Blob([uint8Array], { type: 'application/zip' });const url = URL.createObjectURL(zipBlob);const downloadLink = document.createElement("a");downloadLink.style.display = "none";downloadLink.download = downloadFileName;downloadLink.href = url;document.body.appendChild(downloadLink);downloadLink.click();document.body.removeChild(downloadLink);window.URL.revokeObjectURL(url);
};

https://blog.csdn.net/Zhuangvi/article/details/121063203(Vue 之 利用new Blob() 对后端返回文件流 或 base64字符串下载导出文件时不同文件类型的 type 值整理及函数封装调用示例)
import JSZip from ‘jszip’; 处理zip文件

function downloadFile(hrefUrl, fileName){let a = document.createElement('a')a.href = hrefUrla.download = fileName // 下载后文件名document.body.appendChild(a)a.click() // 点击下载document.body.removeChild(a) // 下载完成移除元素
}
// 封装blob对象
function dataURLToBlob(base64Str, mimeTypeStr) {let bstr = window.atob(base64Str); // 解码 base-64 编码的字符串,base-64 编码使用方法是 btoa()let length = bstr.length;let u8arr = new Uint8Array(length); // 创建初始化为0的,包含length个元素的无符号整型数组while (length--) {u8arr[length] = bstr.charCodeAt(length); // 返回在指定的位置的字符的 Unicode 编码}return new Blob([u8arr], { type: mimeTypeStr }); // 返回一个blob对象
}
// 后端返回base64公共导出
function downloadFileByBase64(base64Str, mimeTypeStr, fileName){let myBlob = dataURLToBlob(base64Str, mimeTypeStr)let myUrl = window.URL.createObjectURL(myBlob)downloadFile(myUrl, fileName)
}
// 后端返回文件流公共导出
function downloadFileByFileFlow(blobData, mimeTypeStr, fileName) {let blob = new Blob([blobData], { type: mimeTypeStr })let hrefUrl = window.URL.createObjectURL(blob) // 创建下载的链接downloadFile(hrefUrl, fileName);
}

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

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

相关文章

Android 将图片网址url转化为bitmap

1. 图片网址url转化为bitmap 1.1. 方法一 通过 HttpURLConnection 请求 要使用一个线程去访问,因为是网络请求,这是一个一步请求,不能直接返回获取,要不然永远为null,在这里得到BitMap之后记得使用Hanlder或者EventBu…

React之useState hook

实现useState js实现一个useState,简单的原理就是赋值然后更新渲染,大概伪代码如下: function useState(initValue) {let value initValue;function setValue(v) {if (typeof v "function") {value v(initValue);} else {value…

StarRocks实战——首汽约车实时数仓实践

目录 前言 一、引入背景 二、OLAP引擎选型 三、架构演进 四、实时数仓构建 五、业务实践价值未来规划 原文大佬的这篇首汽约车实时数仓实践有借鉴意义,这里摘抄下来用作学习和知识沉淀。 前言 首汽约车(以下简称“首约”)是首汽集团打造…

物体检测-系列教程20:YOLOV5 源码解析10 (Model类前向传播、forward_once函数、_initialize_biases函数)

😎😎😎物体检测-系列教程 总目录 有任何问题欢迎在下面留言 本篇文章的代码运行界面均在Pycharm中进行 本篇文章配套的代码资源已经上传 点我下载源码 14、Model类 14.2 前向传播 def forward(self, x, augmentFalse, profileFalse):if augm…

MySQL 8.0 架构 之错误日志文件(Error Log)(2)

文章目录 MySQL 8.0 架构 之错误日志文件(Error Log)(2)MySQL错误日志文件(Error Log)错误日志相关参数log_errorlog_error_services过滤器(Filter Error Log Components)写入/接收器…

Vue+SpringBoot打造大学计算机课程管理平台

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 实验课程档案模块2.2 实验资源模块2.3 学生实验模块 三、系统设计3.1 用例设计3.2 数据库设计3.2.1 实验课程档案表3.2.2 实验资源表3.2.3 学生实验表 四、系统展示五、核心代码5.1 一键生成实验5.2 提交实验5.3 批阅实…

131. 分割回文串(力扣LeetCode)

文章目录 131. 分割回文串题目描述回溯代码 131. 分割回文串 题目描述 给你一个字符串 s,请你将 s 分割成一些子串,使每个子串都是 回文串 。返回 s 所有可能的分割方案。 回文串 是正着读和反着读都一样的字符串。 示例 1: 输入&#xf…

Android 架构MVI、MVVM、MVC、MVP

目录 一、MVC(Model-View-Controller) 二、 MVP(Model-View-Presenter) 三. MVVM(Model-View-ViewModel) 四. MVI(Model-View-Intent) 五.MVI简单实现 先简单了解一下MVC、MVP和…

索引使用规则6——单列索引联合索引

1、单列索引 单列索引:即一个索引只包含单个列 举个例子 1.1、给phone和那么建立索引 create index index_name on tb_qianzhui(name); create index index_phone on tb_qianzhui(phone);1.2、查询发现可能的索引有好几个,但是最终选择了phone的索引…

软考 系统分析师系列知识点之详细调查(2)

接前一篇文章:软考 系统分析师系列知识点之详细调查(1) 所属章节: 第10章. 系统分析 第2节. 详细调查 在系统规划阶段,通过初步调查,系统分析师已经对企业的组织结构、系统功能等有了大致的了解。但是&…

萝卜大杂烩 | 提高数据科学工作效率的 8 个 Python 库

本文来源公众号“萝卜大杂烩”,仅用于学术分享,侵权删,干货满满。 原文链接:提高数据科学工作效率的 8 个 Python 库 在进行数据科学时,可能会浪费大量时间编码并等待计算机运行某些东西。所以我选择了一些 Python 库…

Vue3中的Hooks详解

vue3带来了Composition API,其中Hooks是其重要组成部分。之前我写过一篇关于vue3 hooks的文章比较简单 Vue3从入门到删库 第十一章(自定义hooks) 所以本文将深入探讨Vue3中Hooks,帮助你在Vue3开发中更加得心应手。 一、Vue3 Hoo…

贪吃蛇(C语言)步骤讲解

一:文章大概 使用C语言在windows环境的控制台中模拟实现经典小游戏 实现基本功能: 1.贪吃蛇地图绘制 2.蛇吃食物的功能(上,下,左,右方向控制蛇的动作) 3.蛇撞墙死亡 4.计算得分 5.蛇身加…

[C语言]——C语言常见概念(1)

目录 一.C语言是什么、 二.C语言的历史和辉煌 三.编译器的选择(VS2022为例) 1.编译和链接 2.编译器的对比 3.VS2022 的优缺点 四.VS项目和源文件、头文件介绍 五.第⼀个C语言程序 ​​​​​​​ 一.C语言是什么、 ⼈和⼈交流使⽤的是⾃然语⾔&…

【python】爬取链家二手房数据做数据分析【附源码】

一、前言、 在数据分析和挖掘领域中,网络爬虫是一种常见的工具,用于从网页上收集数据。本文将介绍如何使用 Python 编写简单的网络爬虫程序,从链家网上海二手房页面获取房屋信息,并将数据保存到 Excel 文件中。 二、效果图&#…

【JS】解构赋值注意点,解构赋值报错

报错代码 const 小明 { email: 6, pwd: 66 } const 小刚 { email: 9, pwd: 99 }const { email } 小明 const { email } 小刚 报错图 原因 2个常量重复,重复在同一个作用域内是不能重复的,例如大括号内{const a 1; const a 2} 小伙伴A提问 问&…

Redis-基础篇

Redis是一个开源、高性能、内存键值存储数据库,由 Salvatore Sanfilippo(网名antirez)创建,并在BSD许可下发布。它不仅可以用作缓存系统来加速数据访问,还可以作为持久化的主数据存储系统或消息中间件使用。Redis因其数…

leetcode:37.解数独

题目理解:本题中棋盘的每一个位置都要放一个数字(而N皇后是一行只放一个皇后),并检查数字是否合法,解数独的树形结构要比N皇后更宽更深。 代码实现:

SpringBoot+Redis 解决海量重复提交问题,yyds!

在实际的开发项目中,一个对外暴露的接口往往会面临很多次请求,我们来解释一下幂等的概念:任意多次执行所产生的影响均与一次执行的影响相同。按照这个含义,最终的含义就是 对数据库的影响只能是一次性的,不能重复处理。如何保证其…

⾃动类型转换、强制类型转换

为何short s1 1;是对的,而float f3.4;是错的? 整数直接量,默认是int型。所以int a 4L; 会报错,但是long l 4; 这样不会,因为这样会形成一个自动类型的转换,int类型自动转换为long类型 小数直接量&#…