Vue 项目下载文件最佳解决方案
前端Q
共 6233字,需浏览 13分钟
· 2022-03-04
点击上方 前端Q,关注公众号
回复加群,加入前端Q技术交流群
开发中经常遇到这样的功能,用户将文件或附件上传到服务器,后端将文件放到ftp或是其他位置,在前端页面内有下载的入口,有时候,后端返回的是blob,这种情况当然是最好的,但是为了方便,后端也可能返回文件所在位置的url,这时,对前端来说,可能遇到一些问题,比如,下载文件时候浏览器可能会出现闪动,下载图片,json文件等浏览器支持的文件时候,不会下载,而是直接在浏览器内打开这类文件,下面的方法可以完美解决此类问题
解决方案:
-
封装自定义指令 -
将url转成bold,在创建a标签下载blob
代码实现
-
在src 下面的 directive 文件夹下新建目录 downLoadUrl
-
downLoadUrl / index.js文件
/*
* 后端返回文件的url,前端创建a标签来下载
*
* 1. 解决了若文件为图片或浏览器支持的格式类型,点击下载会直接打开文件的问题,
* 2. 下载文件时,浏览器会有闪动的问题
*
* 页面内使用
* 1. 引入指令 import downLoad from '@/directive/down-load-url'
* 2. 注册指令 directives:{downLoad}
* 3. 使用,在要下载按钮上以指令的形式使用 例如: <el-button v-downLoad="url">下载</el-button>
*/
import downLoad from './downLoad'
const install = function(Vue) {
Vue.directive('downLoadUrl', downLoad)
}
downLoad.install = install
export default downLoad
复制代码
-
downLoadUrl / downLoad.js文件
export default {
bind(el, binding) {
if (binding.value.url) {
el.addEventListener('click', () => {
const a = document.createElement('a')
// let url = baseUrl + binding.value // 若是不完整的url则需要拼接baseURL
const url = binding.value.url // 完整的url则直接使用
// 这里是将url转成blob地址,
fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址
a.href = URL.createObjectURL(blob)
console.log(a.href)
a.download = binding.value.name || '' // 下载文件的名字
// a.download = url.split('/')[url.split('/').length -1] // // 下载文件的名字
document.body.appendChild(a)
a.click()
//在资源下载完成后 清除 占用的缓存资源
window.URL.revokeObjectURL(a.href);
document.body.removeChild(a);
})
})
}
}
}
复制代码
-
在 main.js
注册自定义指令
使用
返回一个对象{ url: '', name: ''}
注意
1、若是文件的url存在跨域的情况,则可能会下载失败,因为fetch请求连接后,由于跨域,拿不到资源,也就无法执行后续的操作,此时是失败的。
2、也可以设置浏览器,对于一下像pdf,图片等资源不直接打开,直接下载,然后简单的创建a标签下载即可。
插件 file-saver 链接地址:blog.csdn.net/qq\_30671099…[1]
关于本文
作者:远航_
https://juejin.cn/post/7062888582465191944
往期推荐
最后
欢迎加我微信,拉你进技术群,长期交流学习...
欢迎关注「前端Q」,认真学前端,做个专业的技术人...
评论
多人同时导出 Excel 干崩服务器!新来的阿里大佬给出的解决方案太优雅了!
点击关注公众号,Java 干货及时推送↓推荐阅读:面试辅导,我们出大成果了!来源:juejin.cn/post/7259249904777838629前言 业务诉求:考虑到数据库数据日渐增多,导出会有全量数据的导出,多人同时导出可以会对服务性能造成影响,导出涉及到mysql查询的io操作,
Java技术栈
1
IT 运维整体解决方案(PPT)
本文作为一个IT运维整体解决方案PPT,包括了步骤规划、平台设计、事件处理流程、监控、各设备及系统管理、工作流引擎等各个要素,对撰写运维方案具有参考价值,部分内容可作为模板借鉴。(*因成文时间所限,文中举例的部分产品技术可能过时,但产品技术并非本文重点。)图片点击可放大原题:IT运维整体解决方案,点
数据中心运维管理
0
大量 Java 开源项目停更...
点击关注公众号,Java 干货及时推送↓推荐阅读:投了 100 多份简历后…出品 | OSC开源社区(ID:oschina2013)Sonatype 发布了最新的一份《软件供应链状况》报告,深入探讨了如何在充满选择的世界中定义更好的软件,并探讨人工智能 (AI) 对软件开发的深远
Java技术栈
0
一站式解决方案:基于 Arthas 实现服务发现和权限控制
来源:juejin.cn/post/7281849496983994383👉 欢迎加入小哈的星球 ,你将获得: 专属的项目实战 / Java 学习路线 / 一对一提问 / 学习打卡 / 赠书福利全栈前后端分离博客项目 2.0 版本完结啦, 演示链接
小哈学Java
0
Java项目实战——打造一款股票区间交易盯盘系统
点击上方“Java进阶学习交流”,进行关注后台回复“Java”即可获赠Java学习资料今日鸡汤身无彩凤双飞翼,心有灵犀一点通。一、简介大家好,我是Snowball。今天给大家分享的内容是基于Java编程,实现股票交易相关功能开发,如果读者对股票或金融衍生物交易不太了解,又比较感兴趣的话可自行查询相关
Java进阶学习交流
0
超赞!这个ChatGPT提问教程,PDF免费下载
你好,我是郭震AI来袭,我们该如何学习?今天先分享给大家一份超好的GPT提问指南。教程的详细介绍参考下面视频:这个PDF资料旨在教我们更好的给GPT发送指令,让GPT更准确的回答我们的提问。一共有30页,内容包括7个小章节,按照逻辑展开。分别介绍文本回答,代码辅助,结构化结果输出,非结构化结构输出,
Python与算法社区
3
5G RedCap贯通行动政策文件发布,这些关键词值得关注
作者:赵小飞物联网智库 原创近日,工信部发布了《关于开展2024年度5G轻量化(RedCap)贯通行动的通知》,从标准、网络、芯片模组、终端、应用、安全、保障7大方面采取具体措施,并给出明确目标,在政策层面对5G RedCap进一步发展提供保障。RedCap承担着5G物联网连接数增长的重要任务,但同
物联网智库
0
python读取一个文件里面几百个csv数据集然后按照列名合并一个数据集
点击上方“Python爬虫与数据挖掘”,进行关注回复“书籍”即可获赠Python从入门到进阶共10本电子书今日鸡汤但使龙城飞将在,不教胡马度阴山。大家好,我是Python进阶者。一、前言前几天在Python最强王者交流群【FiNε_】问了一个Python自动化办公,问题如下:python 读取一个文
Python爬虫与数据挖掘
3