problem background
For a txt text, picture, video, audio and other files that the browser can directly use the browser to preview, it is not
feasible to use the traditional a tag plus the download attribute to download, and it will be opened directly in the browser, so a new one is required way to download.
Implementation process
Implementation ideas
Here, Vue custom instructions are used to process the file link and convert the link into a blob for download. Vue2 and Vue3 are different in writing.
define directive
In the src directory, create a new directory directive that stores all custom instructions, then create a new vdown.js and write instructions:
- Vue2 writing method:
import Vue from "vue";
Vue.directive('down', {
inserted: (el, binding) => {
el.addEventListener('click', () => {
let link = document.createElement('a')
let url = binding.value
// 这里是将url转成blob地址，
fetch(url).then(res => res.blob()).then(blob => {
// 将链接地址字符内容转变成blob地址
link.href = URL.createObjectURL(blob)
console.log(link.href)
link.download = ''
document.body.appendChild(link)
link.click()
})
})
}
})
- Vue3 writing method:
let vdown = {
mounted: (el, binding) => {
el.addEventListener('click', () => {
console.log(binding.value)
let link = document.createElement('a')
let url = binding.value
// 这里是将url转成blob地址，
console.log(url)
fetch(url).then(res => res.blob()).then(blob => {
// 将链接地址字符内容转变成blob地址
link.href = URL.createObjectURL(blob)
console.log(link.href)
link.download = ''
document.body.appendChild(link)
link.click()
})
})
}
}
export default vdown
In the instruction, fetch is used to obtain the file content, convert it into a blob, and then download it by simulating a click through the constructed A tag.
registration order
In the Vue2 writing method, Vue.directivethe registered command has been used, so the script file of the custom command can be directly introduced into the main:
...
import '@/directive/vdonw'
...
In the Vue3 writing method, the script that defines the command only defines the content of the command without registering, so it needs to be registered in main:
- Vue3 writing method:
import {
createApp } from 'vue'
import App from './App.vue'
var app = createApp(App)
// 注册指令
import vdown from '@/directive/vdown'
app.directive('down', vdown)
// 注册结束
app.mount('#app')
use instructions
In the Vue file, directly define the download button, add the v-down command and pass the URL to be downloaded, and the download can be completed:
...
<a v-down="'http://127.0.0.1:8888/file.txt'">下载文件</a>
...
cross-domain issues
If you encounter cross-domain problems, you can configure the proxy proxy to solve it. Add the following content to vue.config.js:
module.exports = {
devServer: {
proxy: {
'/serverfile': {
target: 'http://www.xxx.com',//这里后台的地址模拟的;应该填写你们真实的后台接口
ws: true,
changOrigin: true,//允许跨域
pathRewrite: {
'^/serverfile': '/'//请求的时候使用这个api就可以
}
}
}
}
}
Modify the link in the download button:
...
<a v-down="'/serverfile/file.txt'">下载文件</a>
...
Then click download to download successfully:
