一般情況下，我們根據url下載文件時可以有以下兩種方案：

1. window.open(url)2. <a :href='http://m.4tl426be.cn/bcjs/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 @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文件

/* * 后端返回文件的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 = 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下載非同源文件的文章就介紹到這了,更多相關vue url下載文件內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！