Vue實現(xiàn)下載文件而非瀏覽器直接打開的方法
問題背景
對于一個txt文本、圖片、視頻、音頻等瀏覽器可以直接使用瀏覽器進行預(yù)覽的文件，使用傳統(tǒng)的a標(biāo)簽加download屬性進行下載是行不通的，會在瀏覽器直接打開，因此需要搞一個新的方式進行下載。
實現(xiàn)流程
實現(xiàn)思路
這里使用Vue自定義指令，對文件鏈接進行處理，將鏈接轉(zhuǎn)化為blob進行下載，Vue2和Vue3在寫法上有所區(qū)別。
定義指令
在src目錄中，新建存放所有自定義指令的目錄directive，然后新建vdown.js并編寫指令：
Vue2寫法：
import Vue from "vue";
Vue.directive('down', {
inserted: (el, binding) => {
el.addEventListener('click', () => {
let link = document.createElement('a')
let url = binding.value
// 這里是將url轉(zhuǎn)成blob地址，
fetch(url).then(res => res.blob()).then(blob => { // 將鏈接地址字符內(nèi)容轉(zhuǎn)變成blob地址
link.href = URL.createObjectURL(blob)
console.log(link.href)
link.download = ''
document.body.appendChild(link)
link.click()
})
})
}
})Vue3寫法：
let vdown = {
mounted: (el, binding) => {
el.addEventListener('click', () => {
console.log(binding.value)
let link = document.createElement('a')
let url = binding.value
// 這里是將url轉(zhuǎn)成blob地址，
console.log(url)
fetch(url).then(res => res.blob()).then(blob => { // 將鏈接地址字符內(nèi)容轉(zhuǎn)變成blob地址
link.href = URL.createObjectURL(blob)
console.log(link.href)
link.download = ''
document.body.appendChild(link)
link.click()
})
})
}
}
export default vdown指令中使用fetch獲取文件內(nèi)容，并轉(zhuǎn)換為blob，然后通過構(gòu)造的A標(biāo)簽?zāi)M點擊進行下載。
注冊指令
在Vue2寫法中，已經(jīng)使用Vue.directive注冊了指令，所以直接在main中引入自定義指令的腳本文件即可：
... import '@/directive/vdonw' ...
而在Vue3寫法中，定義指令的腳本中只是定義了指令的內(nèi)容而未注冊，所以需要在main中進行注冊：
Vue3寫法：
import { createApp } from 'vue'
import App from './App.vue'
var app = createApp(App)
// 注冊指令
import vdown from '@/directive/vdown'
app.directive('down', vdown)
// 注冊結(jié)束
app.mount('#app')使用指令
在Vue文件中，直接定義下載按鈕，添加v-down指令并傳遞要下載的URL，即可完成下載：
... <a v-down="'http://127.0.0.1:8888/file.txt'">下載文件</a> ...
跨域問題
若遇到跨域問題，配置proxy代理解決即可，在vue.config.js中添加如下內(nèi)容：
module.exports = {
devServer: {
proxy: {
'/serverfile': {
target: 'http://www.xxx.com',//這里后臺的地址模擬的;應(yīng)該填寫你們真實的后臺接口
ws: true,
changOrigin: true,//允許跨域
pathRewrite: {
'^/serverfile': '/'//請求的時候使用這個api就可以
}
}
}
}
}修改下載按鈕中的連接：
... <a v-down="'/serverfile/file.txt'">下載文件</a> ...
然后點擊下載即可成功下載：
總結(jié)
到此這篇關(guān)于Vue實現(xiàn)下載文件而非瀏覽器直接打開的文章就介紹到這了,更多相關(guān)Vue下載文件非瀏覽器打開內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了element-ui中按需引入的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
這篇文章主要介紹了vue如何在項目中調(diào)用騰訊云的滑動驗證碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-07-07
這篇文章主要介紹了Vue繪制雙Y軸折線柱狀圖實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
vue3使用ref和reactive定義數(shù)據(jù)詳解
文章主要介紹了在Vue 3中使用`ref`和`reactive`來定義和操作數(shù)據(jù)的區(qū)別,`ref`適用于基本數(shù)據(jù)類型和部分引用數(shù)據(jù)類型,操作時需要通過`.value`訪問和修改,`reactive`主要用于對象類型的引用數(shù)據(jù),操作時可以直接訪問和修改屬性,但在模板中使用時需要通過定義時的變量來訪問2025-10-10
這篇文章主要介紹了axios簡單實現(xiàn)小程序延時loading指示，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
最近在項目開發(fā)中碰到一個需求是在頁面中展示pdf預(yù)覽功能,下面這篇文章主要給大家介紹了關(guān)于Vue3項目中預(yù)覽并打印PDF的兩種方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-05-05
本篇文章主要介紹了淺談mvvm-simple雙向綁定簡單實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
vue3 ElementUI 日期禁選當(dāng)日前當(dāng)日后三天后的實現(xiàn)代碼
這篇文章主要介紹了vue3 ElementUI 日期禁選當(dāng)日前當(dāng)日后三天后的實現(xiàn)代碼,本文通過示例代碼給大家介紹的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-05-05
vue3 el-upload單張圖片回顯、編輯、刪除功能實現(xiàn)
這篇文章主要介紹了vue3 el-upload單張圖片回顯、編輯、刪除功能實現(xiàn),圖片回顯時隱藏上傳區(qū)域,鼠標(biāo)懸浮顯示遮罩層進行編輯、刪除操作,刪除圖片后顯示上傳區(qū)域,本文通過實例代碼分享實現(xiàn)方法,感興趣的朋友一起看看吧2023-12-12
vue實現(xiàn)Excel文件的上傳與下載功能的兩種方式
這篇文章主要介紹了vue實現(xiàn)Excel文件的上傳與下載功能，本文通過兩種方式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06