vue内点击url下载⽂件最佳解决⽅案
开发中经常遇到这样的功能,⽤户将⽂件或附件上传到服务器，后端将⽂件放到ftp或是其他位置，在前端页⾯内有下载的⼊⼝，有时候，后端返回的是blob，这种情况当然是最好的，但是为了⽅便，后端也可能返回⽂件所在位置的url，这时，对前端来说，可能遇到⼀些问题,⽐如，下载⽂件时候浏览器可能会出现闪动，下载图⽚,json⽂件等浏览器⽀持的⽂件时候，不会下载,⽽是直接在浏览器内打开这类⽂件，下⾯的⽅法可以完美解决此类问题
解决⽅案:
封装⾃定义指令
将url转成bold，在创建a标签下载blob
代码实现
在src 下⾯的 directive ⽂件夹下新建⽬录 down-load-url
down-load-url / index.js⽂件
fetch最佳用法
/*
* 后端返回⽂件的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 = ateElement('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 = ateObjectURL(blob)
console.log(a.href)
a.download = ''// 下载⽂件的名字
// a.download = url.split('/')[url.split('/').length -1] //// 下载⽂件的名字
document.body.appendChild(a)
a.click()
})
})
}
}

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。