Vue實現(xiàn)下載文件而非瀏覽器直接打開的方法
問題背景
對于一個txt文本、圖片、視頻、音頻等瀏覽器可以直接使用瀏覽器進(jìn)行預(yù)覽的文件，使用傳統(tǒng)的a標(biāo)簽加download屬性進(jìn)行下載是行不通的，會在瀏覽器直接打開，因此需要搞一個新的方式進(jìn)行下載。
實現(xiàn)流程
實現(xiàn)思路
這里使用Vue自定義指令，對文件鏈接進(jìn)行處理，將鏈接轉(zhuǎn)化為blob進(jìn)行下載，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點擊進(jìn)行下載。
注冊指令
在Vue2寫法中，已經(jīng)使用Vue.directive注冊了指令，所以直接在main中引入自定義指令的腳本文件即可：
... import '@/directive/vdonw' ...
而在Vue3寫法中，定義指令的腳本中只是定義了指令的內(nèi)容而未注冊，所以需要在main中進(jìn)行注冊：
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)文章
這篇文章主要介紹了vue 驗證兩次輸入的密碼是否一致的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
本文主要介紹了vue v-on傳遞參數(shù)和事件修飾符的使用,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
spring-cloud-stream的手動消息確認(rèn)問題
這篇文章主要介紹了spring-cloud-stream的手動消息確認(rèn)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要為大家詳細(xì)介紹了Vue+ssh框架實現(xiàn)在線聊天，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-06-06
這篇文章主要介紹了vue進(jìn)入頁面時滾動條始終在底部，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了Vue計算屬性實現(xiàn)成績單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
利用Vue構(gòu)造器創(chuàng)建Form組件的通用解決方法
這篇文章主要給大家介紹了關(guān)于利用Vue構(gòu)造器創(chuàng)建Form組件的通用解決方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
這篇文章主要介紹了Vue實現(xiàn)tab切換的兩種方法,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-11-11
組件是什么？組件是用基礎(chǔ)的元素組成的復(fù)雜的、可以重復(fù)使用的代碼單元，就相當(dāng)于疊疊樂一樣的快件，可以將這些復(fù)用的代碼封裝其起來構(gòu)成的組件可需要的時候進(jìn)行調(diào)用2022-08-08
vue中使用iview自定義驗證關(guān)鍵詞輸入框問題及解決方法
這篇文章主要介紹了vue中使用iview自定義驗證關(guān)鍵詞輸入框問題及解決方法，本文通過實例結(jié)合代碼的形式給大家介紹解決方法,需要的朋友可以參考下2018-03-03