vue 文件下载

news2024/11/26 10:23:38

1.返回路径下载

注: 针对一些浏览器无法识别的文件格式(如pdf、xls、ppt)。可以直接在地址栏上输入URL即可触发浏览器的下载功能。

情况1

 //地址栏输入文件URL
 window.location.href = URL
 window.open(URL)

注:该方式将下载逻辑放在后端处理,后端给出固定的url,前端使用window.location.herf下载
路径可以是相对路径也可以是绝对路径

情况2

注:直接下载 (使用a标签download属性)

<a  :href="scope.row.vPath" :download="scope.row.vName" class="downloadBtn">
      <el-button type="text">下载</el-button>
</a>

2.OSS存储方式的文件地址

注:这种方式的文件地址被访问时,访问文件路径默认是下载还是预览跟后端设置的服务器配置有关。

如果访问oss地址的文件只能预览,那么这种文件要下载的解决方式:

1.

  • 改为请求接口得到流的方式下载(可能面临大文件时接口请求时间非常长的问题)
  • 直接访问文件地址,在地址后添加参数 ?response-content-type=application%2Foctet-stream

链接如

https://XXX.XX.XXX:5443/alibaba/16583.pdf

<a href="http://xxxx/octet-stream" target="_blank" download="" ></a>

3.通过后端反回流,前端进行下载

代码详:<<vue Blob流及文件流下载>>篇:

平台返回二进制流格式如图

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

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

相关文章

Learning Discriminative Representations for Skeleton Based Action Recognition

标题&#xff1a;基于骨架的动作识别的学习判别性表示 原文链接&#xff1a;Learning Discriminative Representations for Skeleton Based Action Recognition (thecvf.com) 源码链接&#xff1a;https://github.com/zhysora/FR-Head 发表&#xff1a;CVPR 摘要 最近&…

后端返还二进制excl表格数据时候,如何实现在前端下载表格功能及出现表格打开失败的异常处理。

背景&#xff1a; 后端返还一个二进制流的excl表格数据&#xff0c;前端需要对其解析&#xff0c;然后可提供给客户进行下载。 思路&#xff1a;把二进制流数据转换给blob对象&#xff0c;然后利用a标签进行前端下载。 代码&#xff1a; 后端返还 类似如下的数据 前端代码…

OpenHarmony实战:Hilog组件在交互时应用指南

一、OpenHarmony hilog 组件工具概述 hilog 是 OpenHarmony 日志系统&#xff0c;提供给系统框架、服务、以及应用打印日志&#xff0c;记录用户操作、系统运行状态等。适用于 OpenHarmony 应用、硬件开发及测试人员,是每个开发人员的必备、入门工具。 hilog 日志查看命令行工…

3.28号系统移植

系统移植就是给开发板搭建一个linux操作系统 1. 安装tftp服务器 tftp服务器作用&#xff1a;将ubuntu中指定的文件下载到开发板中 安装步骤 1. 首先需要保证ubuntu组网成功 2. 安装tftp服务器安装包 3. 在家目录下&#xff0c;创建tftpboot文件夹&#xff0c;并且添加最高…

5.11 Vue配置Element UI框架

Vue配置Element UI框架 目录一、 概要二、 开发前准备1. 搭建Vue框架 三、 安装 Element UI1. 引入 Element UI 依赖2. 在 main.js 中引入 Element UI 和相关样式&#xff1a;3. 按需引入(非必须, 可忽略)4. 简单构建一个主页面 目录 一、 概要 Element UI 是一个基于 Vue.js …

【算法】01背包问题(代码+详解+练习题)

题目&#xff1a; 有 N 件物品和一个容量是 V 的背包。每件物品只能使用一次。 第 i 件物品的体积是 vi&#xff0c;价值是 wi。 求解将哪些物品装入背包&#xff0c;可使这些物品的总体积不超过背包容量&#xff0c;且总价值最大。 输出最大价值。 输入格式 第一行两个整…

代码随想录算法训练营第二十七天|131.分割回文串、93.复原IP地址

文档链接&#xff1a;https://programmercarl.com/ LeetCode131.分割回文串 题目链接&#xff1a;https://leetcode.cn/problems/palindrome-partitioning/ 思路&#xff1a;把回溯的树画出来就好很多。startIndex用来控制切割的位置 例如对于字符串abcdef&#xff1a; 组…

【T5模型源码】深入T5模型:源码解析与实现细节

【T5模型源码】深入T5模型&#xff1a;源码解析与实现细节 文章脉络 模型结构图 类关系分析 简单类的源码 T5LayerNorm T5DenseActDense T5DenseGatedActDense T5LayerFF 复杂类的源码 常见参数介绍 最难的T5Attention源码 常见面试提问 总结 我们在日常业务中可能…

上传本地项目到gitee仓库(简单快速)

目录 前提准备 1.已经下载好git Bash 2.已经注册好gitee账号 3.在gitee上新建一个仓库 上传项目到gitee 1.找到本地需要传的文件目录 2.在本页面右键空白处&#xff0c;点击Git Bash Here 3.检查gitee账号是否存在或是否正确 4.若不正确或不存在则配置用户名和邮箱 5…

Matlab|【核心复现】同时考虑考虑孤岛与重构的配电网故障恢复运行策略

目录 主要内容 基本知识 1.问题引出 2.可控负荷 3.网络拓扑约束 4.算法流程 结果一览 1.原文结果 2.程序运行结果 下载链接 主要内容 该模型复现文章《同时考虑考虑孤岛与重构的配电网故障恢复运行策略》&#xff0c;以IEEE33配电网为分析对象&#xff0c;…

OceanMind海睿思数据工程2.0重磅发布,赋能企业“韧性”成长!

近日&#xff0c;由江苏省工业和信息化厅指导&#xff0c;江苏省企业信息化协会主办的 2024制造业数字化转型南京高峰论坛 圆满落幕。 中新赛克海睿思 作为长三角地区数字化转型优秀厂商代表受邀参会&#xff0c;并发布全新数据工程系列产品。中新赛克副总兼大数据产品线总经理…

python print用法

1.输出字符串换行 输出结果会换行&#xff0c;默认自带换行 print(111) print(0) 2.末尾插入字符串或去除换行 末尾只能插入字符串&#xff0c;不能是其他类型 print(111,end0) print(0) 3.变量&#xff0c;字符串混合输入 没有必要什么都学&#xff0c;好用的常用的学一…

设计定时任务实现数据同步的最佳实践

✨✨ 祝屏幕前的您天天开心&#xff0c;每天都有好运相伴。我们一起加油&#xff01;✨✨ &#x1f388;&#x1f388;作者主页&#xff1a; 喔的嘛呀&#x1f388;&#x1f388; 目录 引言 一、选择合适的定时任务框架 Quartz Spring 的 TaskScheduler JDK 的 ScheduledE…

记录何凯明在MIT的第一堂课:神经网络发展史

https://www.youtube.com/watch?vZ5qJ9IxSuKo 目录 表征学习 主要特点&#xff1a; 方法和技术&#xff1a; LeNet 全连接层​ 主要特点&#xff1a; 主要特点&#xff1a; 网络结构&#xff1a; AlexNet 主要特点&#xff1a; 网络结构&#xff1a; Sigmoid Re…

SDWebImage源码解析---疑难问题解答

SDWebImage的简单流程图&#xff1a; 上图大致流程是对的&#xff0c;有几个没写到的地方&#xff1a; 加载沙盒中对应的图片后&#xff0c;不仅要显示&#xff0c;而且要把图片缓存到内存中下载完毕后&#xff0c;有一个异步解码的过程&#xff0c;没体现出来 网上有大佬做了…

【JAVASE】学习数组的定义与使用

✅作者简介&#xff1a;大家好&#xff0c;我是橘橙黄又青&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a; 再无B&#xff5e;U&#xff5e;G-CSDN博客 目标&#xff1a; 1. 理解数组基本概念 2. 掌握数组的基本用法…

腾讯云函数计算技术:云原生架构下的Serverless与微服务新篇章

作者&#xff1a;哈哥撩编程&#xff08;视频号、公众号、抖音同名&#xff09; 新星计划全栈领域优秀创作者博客专家全国博客之星第四名超级个体COC上海社区主理人特约讲师谷歌亚马逊演讲嘉宾科技博主极星会首批签约作者 文章目录 前言全面上云之首战&#xff1a;春保&#…

探索DAPP生态:代币预售、系统开发、NFT质押分红和代币质押技术

随着区块链技术的迅速发展&#xff0c;去中心化应用程序&#xff08;DAPPs&#xff09;生态系统已经成为了数字经济的一部分&#xff0c;并在不断壮大和发展。DAPP生态系统的繁荣离不开代币预售、系统开发、NFT质押分红和代币质押技术等关键要素的支持和推动。本文将深入探讨这…

热门IT【视频教程】-华为/思科/红帽/oracle

华为认证 网络工程师-入门基础课&#xff1a;华为HCIA认证课程介绍-CSDN博客 网络工程师进阶课&#xff1a;华为HCIP认证课程介绍-CSDN博客 职场进阶&#xff0c;踏上高峰——HCIE-Datacom认证-CSDN博客 华为HCIA试听课程 &#xff1a; 超级实用&#xff0c;华为VRP系统文件…

算法——距离计算

距离计算常用的算法包括欧氏距离、曼哈顿距离、切比雪夫距离、闵可夫斯基距离、余弦相似度等。这些算法在数据挖掘、机器学习和模式识别等领域中被广泛应用。 1.欧氏距离 欧式距离也称欧几里得距离&#xff0c;是最常见的距离度量&#xff0c;衡量的是多维空间中两个点之间的…