fondo del problema
Para un texto txt, imagen, video, audio y otros archivos que el navegador puede usar directamente para obtener una vista previa, no es
factible usar la etiqueta a tradicional más el atributo de descarga para descargar, y se abrirá directamente en el navegador. , por lo que se requiere una nueva forma de descargar.
Proceso de implementación
Ideas de implementación
Aquí, las instrucciones personalizadas de Vue se utilizan para procesar el enlace del archivo y convertir el enlace en un blob para descargar.Vue2 y Vue3 son diferentes en escritura.
definir directiva
En el directorio src, cree una nueva directiva de directorio que almacene todas las instrucciones personalizadas, luego cree un nuevo vdown.js y escriba las instrucciones:
- Método de escritura Vue2:
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()
})
})
}
})
- Método de escritura Vue3:
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
En la instrucción, se usa fetch para obtener el contenido del archivo, convertirlo en un blob y luego descargarlo simulando un clic a través de la etiqueta A construida.
orden de registro
En el método de escritura de Vue2, Vue.directivese ha utilizado el comando registrado, por lo que el archivo de script del comando personalizado se puede introducir directamente en el principal:
...
import '@/directive/vdonw'
...
En el método de escritura de Vue3, el script que define el comando solo define el contenido del comando sin registrarse, por lo que debe registrarse en main:
- Método de escritura Vue3:
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')
instrucciones de uso
En el archivo Vue, defina directamente el botón de descarga, agregue el comando v-down y pase la URL para descargar, y la descarga se puede completar:
...
<a v-down="'http://127.0.0.1:8888/file.txt'">下载文件</a>
...
problemas entre dominios
Si encuentra problemas entre dominios, puede configurar el proxy proxy para resolverlo. Agregue el siguiente contenido a vue.config.js:
module.exports = {
devServer: {
proxy: {
'/serverfile': {
target: 'http://www.xxx.com',//这里后台的地址模拟的;应该填写你们真实的后台接口
ws: true,
changOrigin: true,//允许跨域
pathRewrite: {
'^/serverfile': '/'//请求的时候使用这个api就可以
}
}
}
}
}
Modificar el enlace en el botón de descarga:
...
<a v-down="'/serverfile/file.txt'">下载文件</a>
...
Luego haga clic en descargar para descargar con éxito:
