本篇内容主要讲解“vue怎么根据url下载非同源文件”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue怎么根据url下载非同源文件”吧!
一般情况下，我们根据url下载文件时可以有以下两种方案：
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> <div> {{file.name}} <span class="file-download" @click="downloadFile(file.url, file.name)" >下载</span > </div></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文件
import downLoad from './downLoad'const install = function(Vue) { Vue.directive('downLoadUrl', downLoad)}downLoad.install = installexport default downLoaddown-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下载非同源文件”有了更深的了解，不妨来实际操作一番吧！这里是编程网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
