vue中,使用file-saver导出文件,下载Excel文件、下载图片、下载文本

vue中,使用file-saver导出文件,下载Excel文件、下载图片、下载文本
1、基本介绍

npm地址:file-saver - npm

 2、安装
# Basic Node.JS installation
npm install file-saver --save
bower install file-saver# Additional typescript definitions
npm install @types/file-saver --save-dev
3、示例

使用保存文字 require()

let FileSaver = require('file-saver');
let blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

储存文字 

let blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(blob, "hello world.txt");

保存网址 

FileSaver.saveAs("https://httpbin.org/image", "image.jpg");

在相同来源内使用URL只会使用a[download]。否则,它将首先检查它是否支持带有同步头请求的cors标头。如果是这样,它将下载数据并使用Blob URL保存。如果没有,它将尝试使用下载它a[download]。

保存画布

let canvas = document.getElementById("my-canvas");
canvas.toBlob(function(blob) {saveAs(blob, "pretty image.png");
});

 注意:标准HTML5 canvas.toBlob()方法并非在所有浏览器中都可用。 canvas-toBlob.js是一个跨浏览器canvas.toBlob(),可以对此进行填充。

保存文件

// Note: Ie and Edge don't support the new File constructor,
// so it's better to construct blobs and use saveAs(blob, filename)
let file = new File(["Hello, world!"], "hello world.txt", {type: "text/plain;charset=utf-8"});
FileSaver.saveAs(file);
 实例1

在文件exportFile.js中封装方法:

import FileSaver from "file-saver";
export default class fileSave {/*** 导出Excel文件* @param {*} res   文件流* @param {*} name  文件名*/static getExcel(res, name) {let blob = new Blob([res], {type: "application/vnd.ms-excel"});FileSaver.saveAs(blob, name + ".xlsx");}/*** 导出CSV文件* @param {*} res   文件流* @param {*} name  文件名*/static getCsv(res, name) {let blob = new Blob([res], {type: "application/vnd.ms-excel"});FileSaver.saveAs(blob, name + ".csv");}/*** 导出图片1* @param {*} url 图片地址* @param {*} name  文件名*/static getImgURLs(url, name) {let last = url.substring(url.lastIndexOf("."), url.length);FileSaver.saveAs(url, `${name}${last}`);}/*** 导出图片2* @param {*} res 文件流* @param {*} name  文件名*/static downLoadImg(res, filename) {let blob = new Blob([res], {type: "image/jpeg"});FileSaver.saveAs(blob, `${filename}.jpg`);}
}

使用:

import exportFile from '@/utils/exportFile' // 导入exportFile.getExcel(res.data, '下载文件名称')  // 使用
实例2
npm install file-saver --save
# 如使用TS开发,可安装file-saver的TypeScript类型定义
npm install @types/file-saver --save-dev

使用

import { saveAs } from 'file-saver'  // 导入 saveAs
// 1、保存文本
const blob = new Blob(['Hello, world!'])
saveAs(blob, 'hello world.txt')// 2、预览图片--打开新窗口预览文件(pdf、img)
saveAs('https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png')// 3、保存文件
const blob = new Blob([fileStream])		// fileStream 是文件流,一般从后台获取
saveAs(blob, fileName)					// fileName 保存文件的名称,需要带后缀
下载本地文件
	// file.js 封装下载本地文件方法import axios from 'axios'import { saveAs } from 'file-saver'/*** @params {string} localFileName 本地文件名称* @params {string} saveFileName 下载的文件名称* @retuen {promise}*/export const downloadLocalFile = (localFileName, saveFileName) => {return new Promise((resolve, reject) => {axios({url: `/file/${localFileName}`,	// 本地文件夹路径+本地文件名称(若资源在服务器,且是具体的路径,这里可改成该资源路径,此时封装的方法需要微调,入参的localFileName改成资源路径resource)method: 'get',					responseType: 'blob',			//	arraybuffer	也可}).then(res => {const blob = new Blob([res.data])if (navigator.msSaveBlob) {			// 兼容IEnavigator.msSaveBlob(blob, saveFileName)} else {const url = window.URL.createObjectURL(blob)saveAs(url, saveFileName)}resolve()}).catch(err => {// 这里可以统一处理错误,比如"未找到相关文件","下载失败"等if (err.message === 'Request failed with status code 404') {// 提示or弹框:未找到相关文件} else {// 提示or弹框:下载失败}reject(err)})})}// 使用(注意文件格式的后缀名)downloadLocalFile('excelFile.xlsx', 'newExcelFile.xlsx').then(res => {// 下载成功后的操作console.log('下载成功!')})
下载服务器文件(服务器返回文件流)
import { saveAs } from 'file-saver'
import axios from 'axios'
import { Message } from 'element-ui'
/*** @params {stream} fileStream 服务器返回的文件流* @params {string} saveFileName 下载的文件名称* @retuen {promise}*/
export const downloadFile = (fileStream, saveFileName) => {return new Promise((resolve, reject) => {const blob = new Blob([fileStream], {type: fileStream.type})if (navigator.msSaveBlob) { // 兼容IEnavigator.msSaveBlob(blob, saveFileName)} else {const url = window.URL.createObjectURL(blob)saveAs(url, saveFileName)}resolve()})
}
/**** @param {*} url 下载地址*/
export const downFile = (url) => {const str1 = url.substr(0, 1)let pathN = ''if (str1 === '/') {pathN = url} else {pathN = '/' + url}const strs = pathN.split('/')let filename = '' // 下载文件名for (let i = 0; i < strs.length; i++) {if (i === strs.length - 1) {filename = strs[i]}}axios({url,method: 'get',responseType: 'blob'}).then((res) => {downloadFile(res.data, filename)Message({message: '下载成功',type: 'success',duration: 5 * 1000})}).catch(err => {// 这里可以统一处理错误,比如"未找到相关文件","下载失败"等if (err.message === 'Request failed with status code 404') {// 提示or弹框:未找到相关文件Message({// message: error.message,message: '未找到相关文件',type: 'error',duration: 5 * 1000})} else {// 提示or弹框:下载失败Message({// message: error.message,message: '下载失败',type: 'error',duration: 5 * 1000})}})
}

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

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

相关文章

IS-IS:04 DIS

IS-IS 协议只支持两种网络类型&#xff0c;即广播网络和点到点网络。与 OSPF 协议相同&#xff0c; IS-IS 协议在广播网络中会将网络视为一个伪节点 &#xff08; Pesudonde&#xff0c;简称 PSN&#xff09;&#xff0c;并选举出一台DIS &#xff08;Designated IS&#xff09…

C++核心编程:函数提高 笔记

3.1 函数默认参数 在C中&#xff0c;函数的形参列表中的形参是可以有默认值的语法&#xff1a;返回值类型 函数名(参数 默认值)注意事项 1.如果某个位置参数有默认值&#xff0c;那么从这个位置往后&#xff0c;从左向右&#xff0c;必须都要有默认值2.如果函数声明有默认值&…

ASP.NET Core 7 Web 使用Session

ASP.NET Core 好像不能像20年前那样直接使用Session函数&#xff0c;我使用如下方法 1、在NuGet安装以下2个包 2、在Program.cs注册 //注册Session builder.Services.AddSession(options > {options.IdleTimeout TimeSpan.FromMinutes(60);options.Cookie.HttpOnly fals…

动态路由的使用

登录页面login.vue <template><div><button click"initRouter">登录</button></div> </template><script setup lang"ts"> import { login } from "/api/login"; import { useRouter } from "v…

用OpenSSL生成哈希密钥

在提权过程中&#xff0c;如果可以对/etc/passwd文件进行写入&#xff0c;则可以通过ssl在本地生成哈希密钥&#xff0c;将其作为新root用户的密钥写入/etc/passwd ssl用md5生成哈希密钥指令&#xff1a; openssl passwd -1 -salt mypassword mypassword openssl: 这是调用 O…

CAN相关寄存器

1. CAN_ MCR&#xff1a;CAN主控制寄存器。主要负责CAN工作模式的配置。 CAN_BTR&#xff1a;位时序寄存器。用来设置分频/TBs1/TBs2/Tsw等参数&#xff0c;设置测试模式。 CAN_(T/R)IxR&#xff1a;标识符寄存器。存放&#xff08;待发送/接收)的报文ID、扩展ID、IDE位及RTR…

如何快速搭建实用的爬虫管理平台

目录 一、前言 二、选择合适的爬虫框架 三、搭建数据库 步骤1 步骤2 步骤3 四、搭建Web服务器 步骤1 步骤2 步骤3 步骤4 五、管理爬虫 六、总结 一、前言 爬虫是互联网数据采集的关键工具&#xff0c;但是随着数据量的增加和需求的多样化&#xff0c;手动运行和管…

SIFT图像特征表述

SIFT&#xff08;尺度不变特征变换&#xff09;是一种用于图像处理和计算机视觉领域的特征提取算法。其目的是检测和描述图像中的局部特征。SIFT特征对旋转、尺度缩放、亮度变化保持不变性&#xff0c;对视角变化、仿射变换、噪声也具有一定的稳健性。下面是SIFT特征提取的基本…

mysql小知识

什么是sql语句的子查询 SQL语句的子查询是指在一个SQL语句中嵌套另一个SQL语句。子查询可以嵌套在主查询的FROM子句、WHERE子句、HAVING子句、SELECT子句或INSERT语句中。 子查询可以返回一个结果集&#xff0c;这个结果集可以被主查询使用。子查询通常用于获取需要在主查询中使…

【Java 设计模式】行为型之中介者模式

文章目录 1. 定义2. 应用场景3. 代码实现结语 中介者模式&#xff08;Mediator Pattern&#xff09;是一种行为型设计模式&#xff0c;用于通过一个中介对象来集中管理多个对象之间的交互关系&#xff0c;从而降低对象之间的耦合度。中介者模式通过将对象之间的通信委托给中介者…

(每日持续更新)信息系统项目管理(第四版)(高级项目管理)考试重点整理第8章 项目整合管理(七)

博主2023年11月通过了信息系统项目管理的考试&#xff0c;考试过程中发现考试的内容全部是教材中的内容&#xff0c;非常符合我学习的思路&#xff0c;因此博主想通过该平台把自己学习过程中的经验和教材博主认为重要的知识点分享给大家&#xff0c;希望更多的人能够通过考试&a…

计算机网络体系架构认知--网络协议栈

文章目录 一.计算机网络分层架构各协议层和计算机系统的联系从整体上理解计算机网络通信计算机网络通信的本质 二.Mac地址,IP地址和进程端口号三.局域网通信与跨局域网通信局域网通信跨局域网通信全球互联的通信脉络 四.网络编程概述 一.计算机网络分层架构 实现计算机长距离网…

12.Golang中类的表示与封装

目录 概述类的表示代码结果 类的封装代码结果 结束 概述 Golang中类的表示与封装 类的表示 代码 注释掉的代码&#xff0c;并不能拿来当赋值或获取值来使用。 package mainimport "fmt"// 类大写则代表&#xff0c;可以被其它包使用 type Hero struct {// 属性方法大…

RHCE作业

1.写一个脚本&#xff0c;完成如下功能 传递一个参数给脚本&#xff0c;此参数为gzip、bzip2或者xz三者之一 (1) 如果参数1的值为gzip&#xff0c;则使用tar和gzip归档压缩/etc目录至/backups目录中&#xff0c;并命名为/backups/etc-20160613.tar.gz&#xff1b; (2) 如果参…

临紧光五行护盾

临紧光五行护盾基础名词解释 粒子系统仿真&#xff0c;离散事件系统设计临紧光五行护盾&#xff08;云藏山鹰临近光五行散射&#xff09;V-ATPase道装&#xff0c;意气实体过程光效集聚模拟器荀况数论云藏山鹰类型物粒子系统导引云藏山鹰类型物与冯诺依曼爆炸学物品分类表杨米尔…

【华为 ICT HCIA eNSP 习题汇总】——题目集10

1、以下哪个动态路由协议不能应用在 IPv6 网络中&#xff1f; A、IS-IS B、RIPng C、BGP4 D、OSPFv3 考点&#xff1a;路由技术原理 解析&#xff1a;&#xff08;A&#xff09; IS-ISv6 是在 IPv6 环境下&#xff0c;IS-IS 协议进行了相应的扩展和改进&#xff0c;以适应 IPv6…

Spring Retry 和 Guava Retrying重试机制的使用详解

点击下载《Spring Retry 和 Guava Retrying重试机制的使用详解》 1. Spring-Retry优雅地实现重试机制 在现代的分布式系统中&#xff0c;由于网络不稳定、服务短暂不可用或资源争用等原因&#xff0c;调用远程服务时偶尔会遇到失败。为了增强系统的健壮性&#xff0c;我们通常…

机器学习--基础概念(二)

1.分类算法 分类算法是有监督学习的一个核心问题&#xff0c;他从数据中学习一个分类决策函数或分类模型&#xff0c;对新的输入进行预测&#xff0c;输出变量取有限个离散值。 以下是一些常见的分类算法&#xff1a; 逻辑回归 (Logistic Regression): 用于二分类问题&#x…

项目风采展示【TRDa】

桌面功能介绍&#xff1a; 1&#xff1a;支持本地音乐、三方音乐控制播放展示功能&#xff1b; 2&#xff1a;支持陀螺仪 3&#xff1a;支持蓝牙列表显示。

STM32单片机的基本原理与应用(二)

单片机外部中断的基本原理 STM32 的每个 IO 都可以作为外部中断的中断输入口&#xff0c;这点也是 STM32 的强大之处。那么其中断是怎样实现的呢&#xff1f;其原理就是由GPIO口产生触发信号&#xff0c;通过NVIC中断控制器和EXTI外部中断控制器完成中断响应。使用外部中断可以…