vue如何根據(jù)url下載非同源文件
一般情況下,我們根據(jù)url下載文件時(shí)可以有以下兩種方案:
1. window.open(url)
2. <a :href="url" rel="external nofollow" download="文件名稱"/>
但是我們?cè)陂_發(fā)過程中,有時(shí)會(huì)遇到后端返回的文件地址和我們的網(wǎng)站不是同源的情況下,使用以上兩種方案下載圖片、pdf等文件,瀏覽器會(huì)直接打開,而不是下載。下面這種方法就可以解決此類情況:
下載文件函數(shù)封裝:(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內(nèi)點(diǎn)擊url下載文件最佳解決方案
開發(fā)中經(jīng)常遇到這樣的功能,用戶將文件或附件上傳到服務(wù)器,后端將文件放到ftp或是其他位置,在前端頁面內(nèi)有下載的入口,有時(shí)候,后端返回的是blob,這種情況當(dāng)然是最好的,但是為了方便,后端也可能返回文件所在位置的url,這時(shí),對(duì)前端來說,可能遇到一些問題,比如,下載文件時(shí)候?yàn)g覽器可能會(huì)出現(xiàn)閃動(dòng),下載圖片,json文件等瀏覽器支持的文件時(shí)候,不會(huì)下載,而是直接在瀏覽器內(nèi)打開這類文件,下面的方法可以完美解決此類問題
解決方案:
- 封裝自定義指令
- 將url轉(zhuǎn)成bold,在創(chuàng)建a標(biāo)簽下載blob
代碼實(shí)現(xiàn)
- 在src 下面的 directive 文件夾下新建目錄 down-load-url
- down-load-url / index.js文件
/* * 后端返回文件的url,前端創(chuàng)建a標(biāo)簽來下載 * * 1. 解決了若文件為圖片或?yàn)g覽器支持的格式類型,點(diǎn)擊下載會(huì)直接打開文件的問題, * 2. 下載文件時(shí),瀏覽器會(huì)有閃動(dòng)的問題 * * 頁面內(nèi)使用 * 1. 引入指令 import downLoad from '@/directive/down-load-url' * 2. 注冊(cè)指令 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轉(zhuǎn)成blob地址, fetch(url).then(res => res.blob()).then(blob => { // 將鏈接地址字符內(nèi)容轉(zhuǎn)變成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() }) }) } }
到此這篇關(guān)于vue如何根據(jù)url下載非同源文件的文章就介紹到這了,更多相關(guān)vue url下載文件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue?+?SpringBoot?實(shí)現(xiàn)文件的斷點(diǎn)上傳、秒傳存儲(chǔ)到Minio的操作方法
這篇文章主要介紹了Vue?+?SpringBoot?實(shí)現(xiàn)文件的斷點(diǎn)上傳、秒傳存儲(chǔ)到Minio的操作方法,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-06-06Vue 刷新當(dāng)前路由的實(shí)現(xiàn)代碼
這篇文章主要介紹了Vue 刷新當(dāng)前路由的實(shí)現(xiàn)代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09Vue實(shí)現(xiàn)Excel本地下載及上傳的方法詳解
相信大家在項(xiàng)目中經(jīng)常會(huì)遇到一些上傳下載文件的相關(guān)功能。這篇文章將為大家介紹一下Vue實(shí)現(xiàn)Excel本地下載及上傳的示例代碼,需要的可以參考一下2022-07-07Vue.js的動(dòng)態(tài)組件模板的實(shí)現(xiàn)
這篇文章主要介紹了Vue.js的動(dòng)態(tài)組件模板的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11TypeScript基本類型 typeof 和keyof案例詳解
這篇文章主要介紹了TypeScript基本類型 typeof 和keyof案例詳解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10vuejs 制作背景淡入淡出切換動(dòng)畫的實(shí)例
今天小編就為大家分享一篇vuejs 制作背景淡入淡出切換動(dòng)畫的實(shí)例,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09如何搭建一個(gè)完整的Vue3.0+ts的項(xiàng)目步驟
這篇文章主要介紹了如何搭建一個(gè)完整的Vue3.0+ts的項(xiàng)目步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10詳解VUE 定義全局變量的幾種實(shí)現(xiàn)方式
本篇文章主要介紹了VUE 全局變量的幾種實(shí)現(xiàn)方式,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-06-06wepy--用vantUI 實(shí)現(xiàn)上彈列表并選擇相應(yīng)的值操作
這篇文章主要介紹了wepy--用vantUI 實(shí)現(xiàn)上彈列表并選擇相應(yīng)的值操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-11-11