vueassets文件路径(vue如何根据url下载非同源文件)
类别:编程学习 浏览量:2984
时间:2021-10-18 11:48:44 vueassets文件路径
vue如何根据url下载非同源文件一般情况下,我们根据url下载文件时可以有以下两种方案:
1. window.open(url)
2. <a :href="url" rel="external nofollow" download="文件名称"/>
但是我们在开发过程中,有时会遇到后端返回的文件地址和我们的网站不是同源的情况下,使用以上两种方案下载图片、pdf等文件,浏览器会直接打开,而不是下载。下面这种方法就可以解决此类情况:
下载文件函数封装:(views/util/index.js)
import axios from "axios"; // 下载文件(可解决跨域下载问题) export async function downloadFile(fileUrl, fileName) { if (!fileUrl) return; let res = await axios({ method: "get", url: fileUrl, responseType: "blob" }); let newUrl = window.URL.createObjectURL(res.data); let a = document.createElement("a"); a.href = newUrl; a.download = fileName; a.click(); a.remove(); //在资源下载完成后 可以人工清除createObjectURL 占用的缓存资源 window.URL.revokeObjectURL(newUrl); }
使用
<template> <li> {{file.name}} <span class="file-download" @click="downloadFile(file.url, file.name)" >下载</span > </li> </template> <script> import { downloadFile } from "@/util/index.js"; export default { components: {}, data() { return { file:{ url:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb.zol-img.com.cn%2Fdesk%2Fbizhi%2Fimage%2F6%2F960x600%2F1426818724752.jpg&refer=http%3A%2F%2Fb.zol-img.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1627377638&t=662034e86ff9110854ca0316485e294b', name:'美景图' } }; }, created() {}, mounted() {}, methods: { downloadFile } }; </script> <style lang="scss" scoped> </style>
PS:vue内点击url下载文件最佳解决方案
开发中经常遇到这样的功能,用户将文件或附件上传到服务器,后端将文件放到ftp或是其他位置,在前端页面内有下载的入口,有时候,后端返回的是blob,这种情况当然是最好的,但是为了方便,后端也可能返回文件所在位置的url,这时,对前端来说,可能遇到一些问题,比如,下载文件时候浏览器可能会出现闪动,下载图片,json文件等浏览器支持的文件时候,不会下载,而是直接在浏览器内打开这类文件,下面的方法可以完美解决此类问题
解决方案:
- 封装自定义指令
- 将url转成bold,在创建a标签下载blob
代码实现
- 在src 下面的 directive 文件夹下新建目录 down-load-url
- down-load-url / 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 down-load-url / downLoad.js文件 export default { bind(el, binding) { el.addEventListener('click', () => { console.log(binding.value) // url const a = document.createElement('a') // let url = baseUrl + binding.value // 若是不完整的url则需要拼接baseURL const url = binding.value // 完整的url则直接使用 // 这里是将url转成blob地址, fetch(url).then(res => res.blob()).then(blob => { // 将链接地址字符内容转变成blob地址 a.href = URL.createObjectURL(blob) console.log(a.href) a.download = '' // 下载文件的名字 // a.download = url.split('/')[url.split('/').length -1] // // 下载文件的名字 document.body.appendChild(a) a.click() }) }) } }
到此这篇关于vue如何根据url下载非同源文件的文章就介绍到这了,更多相关vue url下载文件内容请搜索开心学习网以前的文章或继续浏览下面的相关文章希望大家以后多多支持开心学习网!
您可能感兴趣
- vueaxios使用教程交流(Vue使用axios图片上传遇到的问题)
- vue表单上传图片数据(vue-cropper插件实现图片截取上传组件封装)
- vue指令使用技巧(Vue指令工作原理实现方法)
- vue获取图片并展示(vue卡片式点击切换图片组件使用详解)
- vue 访问后台接口(vue轮询请求解决方案的完整实例)
- vue用于动态切换组件的内置组件(Vue 可拖拽组件Vue Smooth DnD的使用详解)
- vuex中action的值怎么接(vuex中Getter的用法详解)
- icon图标怎么引入vue(vue引入iconfont图标库的优雅实战记录)
- vue3 动态生成组件(如何在vue3.0+中使用tinymce及实现多图上传文件上传公式编辑功能)
- vue如何导入excel(Vue实现导入Excel功能步骤详解)
- vue中的watch属性(vue Watch和Computed的使用总结)
- vue实现pc聊天页面(vue实现web在线聊天功能)
- vue实现添加购物车小球(Vue实现简易购物车案例)
- vue函数中的默认参数(Vue3中SetUp函数的参数props、context详解)
- vue可以用vite打包吗(vite+vue3+element-plus项目搭建的方法步骤)
- vue中什么时候需要set属性(Vue.set和this.$set使用和区别)
- 手机QQ与小米路由器在一起 明天揭晓,敬请期待(手机QQ与小米路由器在一起)
- 小米音乐与 QQ 音乐合作,便捷迁移会员(小米音乐与QQ音乐合作)
- 小米推出米兔儿童电话手表奥特曼版,799 元,支持微信 QQ(小米推出米兔儿童电话手表奥特曼版)
- 贾怀胤唱《白龙马》 炸场 了 没想到京剧还能这么玩(贾怀胤唱白龙马)
- 白龙马的改编学生版,快来看看(白龙马的改编学生版)
- 萌娃唱《白龙马》走红,那生动的小表情,网友直呼 简直是戏精(萌娃唱白龙马走红)
热门推荐
- pythondjango后台管理(基于腾讯云服务器部署微信小程序后台服务Python+Django)
- 前端技术图解(前端水印的简单实现代码示例)
- docker容器基础入门认知网络篇(Docker 容器生命周期 架构 以及和VM之间的差异详解)
- 织梦cms文章页如何跳转(织梦CMS文档读取频道信息失败,无法进行后续操作!)
- 简单两步修改Win系统远程桌面端口3389(简单两步修改Win系统远程桌面端口3389)
- php如何定时执行某项(php解决crontab定时任务不能写入文件问题的方法分析)
- 如何清除mysql的binlog
- js中的内存机制(详解JS内存空间)
- vue组件方法里如何修改data(vue项目中使用rem替换px的实现示例)
- python将txt数据写入excel(Python将列表数据写入文件txt, csv,excel)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9