vue下载文件流效果demo(整理)

news2024/11/18 17:52:05

在这里插入图片描述

在 Vue 项目中,你可以使用 FileSaver.js 库来方便地下载文件流。FileSaver.js 封装了不同浏览器的下载方式,使得下载文件更加简单和兼容。以下是一个完整的示例方法:

首先,安装 FileSaver.js 库:

<template>
  <button @click="downloadFile">下载文件</button>
</template>

<script>
import { saveAs } from 'file-saver';

export default {
  methods: {
    downloadFile() {
      axios({
        method: 'get',
        url: 'your_file_url',
        responseType: 'blob', // 指定响应数据类型为 blob
      }).then((response) => {
		
		//上面是接口
        const blob = new Blob([response.data]);
        const fileName = 'your_file_name';
        saveAs(blob, fileName);
      });
    },
  },
  	//方法一
	way(){
		// const blob = new Blob([res]);
		// const fileName = fileName;
		// saveAs(blob, fileName);
	},
	//方法二
	way1(){
		// 创建一个 <a> 标签并设置下载属性
		const downloadLink = document.createElement('a');
		downloadLink.href = URL.createObjectURL(res);
		downloadLink.download = fileName; // 下载文件的名称
		// 模拟用户点击下载链接
		downloadLink.click();
		// 清理临时对象
		URL.revokeObjectURL(downloadLink.href);
	},
	
};


</script>

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

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

相关文章

如何通过内网穿透实现公网访问Portainer管理监控Docker容器

文章目录 前言1. 部署Portainer2. 本地访问Portainer3. Linux 安装cpolar4. 配置Portainer 公网访问地址5. 公网远程访问Portainer6. 固定Portainer公网地址 正文开始前给大家推荐个网站&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风…

《如何制作类mnist的金融数据集》——1.数据集制作思路

1&#xff0e;数据集制作思路&#xff08;生成用于拟合金融趋势图像的分段线性函数&#xff09; 那么如何去制作这样的一个类minist的金融趋势曲线数据集呢&#xff1f; 还是如上图所示&#xff0c;为了使类别平均分布&#xff0c;因此可以选取三种“buy”的曲线、三种“sell”…

云渲染农场渲染和自己搭建农场渲染怎么选?哪个更划算?

&#xfeff;当我们面临繁重或紧急的渲染任务时&#xff0c;通常会选择云渲染的解决方案。可能很多人会问&#xff0c;我们是否能够自行建立一个小型的个人农场进行渲染呢&#xff1f;与云渲染农场相比&#xff0c;哪个更划算&#xff1f;更方便&#xff1f;接下来就带大家看看…

创意设计探索:8个推荐的高水平设计灵感网站

对于任何设计爱好者来说,浏览优质的设计网站无疑是激发创意、汲取灵感的重要途径之一。今天,小编精心为大家推荐了8个设计网站,无论你的设计方向是平面设计、包装设计、插画设计还是网页设计,这里都能帮你找到创作的灵感! 1.即时设计资源广场 即时设计是一款功能强大的云端设…

奈奎斯特-香农采样定理的理解(结合cos(8.5t)和傅里叶变换)

采样定理&#xff0c;通常被称为奈奎斯特-香农采样定理&#xff0c;是信号处理中的一个基本原则。它解释了如何从连续信号中采样以便在后续能完全重构原始信号。以下是该定理的核心要点&#xff1a; 采样定理的陈述&#xff1a;为了从其样本中无失真地重构一个连续时间信号&am…

Django框架完成读者浏览书籍,图书详情页,借阅管理

前情回顾&#xff1a; 使用Django框架实现简单的图书借阅系统——完成图书信息管理 文章目录 1.完成展示图书信息功能1.1django 静态资源管理问题1.2编写图书展示模板HTML 2.完成图书详情页功能2.1从后端获取图书详情信息2.2详情页面展示图书数据 3.完成借阅管理功能3.1管理员…

MIinW-W64交叉编译找不到‘mutex‘问题解决

问题 在linux下安装mingw-w64来交叉编译Windows的程序和库. 就像我之前的一篇博客提到的来进行mingw的交叉编译 这样默认安装的线程模型是win32模型.这个线程模型不支持mutex. 一般查找问题的过程: 线程模型通常包含互斥锁&#xff08;mutex&#xff09;作为线程同步的基本工…

开源对象存储服务器MinIO本地部署并结合内网穿透实现远程访问管理界面

文章目录 前言1. Docker 部署MinIO2. 本地访问MinIO3. Linux安装Cpolar4. 配置MinIO公网地址5. 远程访问MinIO管理界面6. 固定MinIO公网地址 前言 MinIO是一个开源的对象存储服务器&#xff0c;可以在各种环境中运行&#xff0c;例如本地、Docker容器、Kubernetes集群等。它兼…

网页测试遇到自动弹窗,Alert类无法处理?或许你该来学学这招了!

相信大家在使用selenium做网页自动化时&#xff0c;会遇到如下这样的一个场景&#xff1a; 在你使用get访问某一个网址时&#xff0c;会在页面中弹出如上图所示的弹出框。 首先想到是利用Alert类来处理它。 然而&#xff0c;很不幸&#xff0c;Alert类处理的结果就是没有结果…

C语言——小细节和小知识9

一、大小端字节序 1、介绍 在计算机系统中&#xff0c;大小端&#xff08;Endianness&#xff09;是指多字节数据的存储和读取顺序。它是数据在内存中如何排列的问题&#xff0c;特别是与字节顺序相关。C语言中的数据存储大小端字节序指的是在内存中存储的多字节数据类型&…

MyBatis-Plus 入门指南:安装与配置、代码生成、综合案例、主键生成策略、自动填充

目录 1.MyBatis-Plus介绍 1.1.简介 1.2.特性 1.3.结构 1.4.支持数据库 2.快速开始 3.安装与配置 4.代码生成 5.综合案例 5.1.主键生成策略 5.2.自动填充 1.MyBatis-Plus介绍 1.1.简介 MyBatis-Plus&#xff08;简称 MP&#xff09;是一个 MyBatis 的增强工具&…

fastadmin答题考试系统开源二次开发带拍照搜题版本

应用介绍 应用介绍 一款基于FastAdminThinkPHPUniapp开发的小程序答题考试系统&#xff0c;提供全部前后台无加密源代码&#xff0c;支持私有化部署 前端截图&#xff1a; 后台截图&#xff1a; 功能介绍&#xff1a;

多个搜索引擎跳转

<div align"center"> <select id"search_engine"> <option value"https://www.baidu.com/s?wd%s">百度</option> <option value"https://cn.bing.com/search?q%s">必应</option> <option va…

CentOS离线安装MongoDB

目录 1、下载 2、上传并解压 3、创建目录 4、新建配置文件 5、启动 6、验证 7、停止服务 7.1 快速停止 7.2 标准的关闭方法 1、下载 下载MongoDB对应的压缩包&#xff0c;本次使用的是4.0.10版本&#xff0c;点击下载 2、上传并解压 把压缩包上传到服务器&#xff0c…

大模型日报-20240115

即插即用&#xff0c;完美兼容&#xff1a;SD社区的图生视频插件I2V-Adapter来了 https://mp.weixin.qq.com/s/tlOWaMi0e6By__MUT414xA 图像到视频生成&#xff08;I2V&#xff09;任务旨在将静态图像转化为动态视频&#xff0c;这是计算机视觉领域的一大挑战。其难点在于从单…

Docker-Dockerfile构建镜像

Dockerfile 是一个文本格式的配置文件&#xff0c; 用户可以使用 Dockerfile 来快速创建自定义的镜像&#xff0c;另外&#xff0c;使用 Dockerfile 去构建镜像好比使用 pom 去构建 maven 项目一样&#xff0c;有异曲同工之妙 构建基础镜像 centos alpine 1. 空间大小差异…

Everything-一切尽在掌握之中

软件推荐&#xff0c;电脑文件繁多的时候&#xff0c;想要快速找到文件&#xff0c;少不了它 反应速度简直了&#xff0c;一秒响应 官网下载连接&#xff1a;下载 - voidtools

uni-forms表单校验有很多坑,uniapp项目,我的表单是写在tab切换页中的,

我的表单是写在tab切换页中的&#xff0c;这和一般写在最外层的表单不一样&#xff0c;当你点提交按钮时&#xff0c;返回的是一个数组&#xff0c;你有3个tab,就有3个数组&#xff0c;你需要通过下标拿到你表单所在的tab对应的数组 <view class"form-box"><…

geopandas 笔记:plot 的scheme

transbigdata 笔记&#xff1a;官方文档案例1&#xff08;出租车GPS数据处理&#xff09;-CSDN博客 3.3.1 节的内容的拓展&#xff0c;这里主要是比较各个scheme的效果 主代码为&#xff1a;修改的就是第二行scheme的内容 plt.figure(1,(16, 6), dpi300) schemebox_plot #图…

免费通配符SSL证书

通配符SSL证书&#xff0c;又名泛域名证书或Wildcard Certificates&#xff0c;是一种专门设计用于同时保护一个主域名以及该域名下所有同级子域名的加密证书。它采用先进的加密技术确保网络传输数据的私密性和完整性&#xff0c;防止中间人攻击和信息窃取。 通配符SSL证书的优…