位置: IT常识 - 正文
Vue实现下载文件而非浏览器直接打开(vue中下载文件)
编辑：rootadmin推荐整理分享Vue实现下载文件而非浏览器直接打开(vue中下载文件)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue下载文件到指定路径,vue实现下载文件进度条,vue实现下载文件进度条,vue 实现文件下载,vue下载文件到指定路径,vue实现下载文件进度条,vue实现下载文件IE浏览器会把路径弄进去嘛,vue实现下载文件到本地,内容如对您有帮助，希望把文章链接给更多的朋友！
对于一个txt文本、图片、视频、音频等浏览器可以直接使用浏览器进行预览的文件， 使用传统的a标签加download属性进行下载是行不通的，会在浏览器直接打开，因此需要搞一个新的方式进行下载。
实现流程实现思路这里使用Vue自定义指令，对文件链接进行处理，将链接转化为blob进行下载，Vue2和Vue3在写法上有所区别。
定义指令在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转成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写法：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
指令中使用fetch获取文件内容，并转换为blob，然后通过构造的A标签模拟点击进行下载。
注册指令在Vue2写法中，已经使用Vue.directive注册了指令，所以直接在main中引入自定义指令的脚本文件即可：
...import '@/directive/vdonw'...而在Vue3写法中，定义指令的脚本中只是定义了指令的内容而未注册，所以需要在main中进行注册：
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')使用指令在Vue文件中，直接定义下载按钮，添加v-down指令并传递要下载的URL，即可完成下载：
...<a v-down="'http://127.0.0.1:8888/file.txt'">下载文件</a>...跨域问题若遇到跨域问题，配置proxy代理解决即可，在vue.config.js中添加如下内容：
module.exports = { devServer: { proxy: { '/serverfile': { target: 'http://www.xxx.com',//这里后台的地址模拟的;应该填写你们真实的后台接口 ws: true, changOrigin: true,//允许跨域 pathRewrite: { '^/serverfile': '/'//请求的时候使用这个api就可以 } } } }}修改下载按钮中的连接：
...<a v-down="'/serverfile/file.txt'">下载文件</a>...然后点击下载即可成功下载：
上一篇：四川成都熊猫基地的小熊猫 (© Biosphoto/Alamy)(四川成都熊猫基地介绍)
下一篇：vue3.0本地引入vue.js(vue.min.js 本地引入)
