位置: IT常识 - 正文

Vue实现下载文件而非浏览器直接打开(vue中下载文件)

编辑:rootadmin
Vue实现下载文件而非浏览器直接打开 问题背景

推荐整理分享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 vdownVue实现下载文件而非浏览器直接打开(vue中下载文件)

指令中使用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>...

然后点击下载即可成功下载:

本文链接地址:https://www.jiuchutong.com/zhishi/290843.html 转载请保留说明!

上一篇:四川成都熊猫基地的小熊猫 (© Biosphoto/Alamy)(四川成都熊猫基地介绍)

下一篇:vue3.0本地引入vue.js(vue.min.js 本地引入)

  • 微信如何恢复聊天记录(微信如何恢复聊天记录图片)

    微信如何恢复聊天记录(微信如何恢复聊天记录图片)

  • 苹果xr怎么设置动态壁纸(苹果xr怎么设置密码锁屏)

    苹果xr怎么设置动态壁纸(苹果xr怎么设置密码锁屏)

  • xsmax如何设置电池百分比(xsmax如何设置电量比)

    xsmax如何设置电池百分比(xsmax如何设置电量比)

  • 抖音开通商品橱窗要钱吗(抖音开通商品橱窗怎么上架商品)

    抖音开通商品橱窗要钱吗(抖音开通商品橱窗怎么上架商品)

  • i3 3240 cpu哪一年的(i3 3240什么时候出的)

    i3 3240 cpu哪一年的(i3 3240什么时候出的)

  • 微信怎么弄绿码(微信绿码在哪里申请)

    微信怎么弄绿码(微信绿码在哪里申请)

  • 乐视手机刷机界面死机(乐视手机刷机最全面最详细的一站式指导)

    乐视手机刷机界面死机(乐视手机刷机最全面最详细的一站式指导)

  • 相机干燥箱湿度多少合适(相机干燥箱湿度设置)

    相机干燥箱湿度多少合适(相机干燥箱湿度设置)

  • 腾讯会议300人可以扩容吗(腾讯会议300人可以开会吗)

    腾讯会议300人可以扩容吗(腾讯会议300人可以开会吗)

  • 户户通出t02解决方法(户户通t02解决方案)

    户户通出t02解决方法(户户通t02解决方案)

  • 为啥淘宝会出现帮买(为什么会出现淘宝)

    为啥淘宝会出现帮买(为什么会出现淘宝)

  • 平板电池能否更换(平板电池能否更换多少钱)

    平板电池能否更换(平板电池能否更换多少钱)

  • 苹果手机频繁断无信号(苹果手机频繁断流)

    苹果手机频繁断无信号(苹果手机频繁断流)

  • plc的输出形式分别是哪三种(plc的输出形式分为哪几种)

    plc的输出形式分别是哪三种(plc的输出形式分为哪几种)

  • 为什么抖音拍出来是反的(为什么抖音拍出来那么好看)

    为什么抖音拍出来是反的(为什么抖音拍出来那么好看)

  • 电池优化可以全部关闭吗(电池优化全部设置允许)

    电池优化可以全部关闭吗(电池优化全部设置允许)

  • 华为手机测距仪使用方法(华为手机测距仪在哪里)

    华为手机测距仪使用方法(华为手机测距仪在哪里)

  • 华为yal一al50是什么型号(华为yal一al50是荣耀几)

    华为yal一al50是什么型号(华为yal一al50是荣耀几)

  • 快手私密作品删了怎么恢复(快手私密作品删掉了怎么恢复)

    快手私密作品删了怎么恢复(快手私密作品删掉了怎么恢复)

  • mt762ch是什么版本(mt762ch a)

    mt762ch是什么版本(mt762ch a)

  • 安卓wps怎么分享文件(手机上的wps软件怎么分享给别人)

    安卓wps怎么分享文件(手机上的wps软件怎么分享给别人)

  • 荣耀v20取消虚拟按键(荣耀手机虚拟)

    荣耀v20取消虚拟按键(荣耀手机虚拟)

  • 华为mate30pro是5g手机吗(华为mate30pro属于5g手机吗)

    华为mate30pro是5g手机吗(华为mate30pro属于5g手机吗)

  • 苹果原彩显示怎么设置(苹果原彩显示怎么没有了)

    苹果原彩显示怎么设置(苹果原彩显示怎么没有了)

  • 快手长图封面两张照片怎么做(快手长图封面怎么弄两张照片)

    快手长图封面两张照片怎么做(快手长图封面怎么弄两张照片)

  • 大理石峡谷中横跨科罗拉多河的纳瓦霍桥,美国亚利桑那州北部  (© trekandshoot/Alamy)(大理石横切面)

    大理石峡谷中横跨科罗拉多河的纳瓦霍桥,美国亚利桑那州北部 (© trekandshoot/Alamy)(大理石横切面)

  • 利用openpose提取自建数据集骨骼点训练st-gcn,复现st-gcn(openpose的输出)

    利用openpose提取自建数据集骨骼点训练st-gcn,复现st-gcn(openpose的输出)

  • 论文学习——Tune-A-Video(论文如何学)

    论文学习——Tune-A-Video(论文如何学)

  • 允许税前扣除的项目
  • 增值税发票丢失最新处理办法
  • 非税收入票据可以手写吗
  • 小卖部的货源怎样提供的
  • 工会经费计税依据是应发还是实发
  • 所得税申报表填写样本
  • 零申报小微企业注销有影响吗
  • 向金融企业借款利息支出可以税前扣除吗
  • 逾期不缴纳税款责令限改期限内改正的
  • 总公司可以给分公司买车吗
  • 代扣公积金会计怎么做账
  • 火灾造成的存货损失进项税额如何处理
  • 停工损失会计科目
  • 增值税专用发票和普通发票的区别
  • 附加税是当月计提当月缴纳吗
  • 反倾销税税率查询
  • 商家拒开发票的五大借口
  • 哪些津贴免征个税
  • 经营用的固定资产
  • 不抵扣发票如何勾选
  • 公司向个人转账分录
  • linux 如何查看网卡信息
  • 设备维保费计算标准
  • 社会保险费的征收程序
  • 收据大写后面的数字
  • macOS Catalina10.15.2值得升级吗 macOS Catalina10.15.2更新了什么
  • php 字符串函数
  • 未分配利润转增股本 母公司会计分录
  • 克卢恩国家公园在哪里
  • 羊肚菌的功效和价格
  • 埃热泽尔斯湖面上的波纹,拉脱维亚拉特加尔地区 (© Eaglewood Films/Nimia)
  • 广告公司的设计服务费计入什么科目
  • PHP:jdtojewish()的用法_日历函数
  • 领取养老金后每年会增加多少
  • php显示错误报告方式
  • php判断useragent
  • yolov3训练自己的数据超详细
  • 计算机视觉项目论文
  • php应用实例
  • java同步操作
  • 持有至到期投资属于什么科目
  • 关闭论坛
  • 应税货物销售额含税吗
  • sql2008数据库维护计划
  • 以前年度多计管理费用怎么调整
  • 建筑业挂靠企业所得税如何收取?
  • 个体户怎么开对公账户
  • 进项票未认证就申报抵扣
  • 工程项目劳务分包招投标要多久
  • 公司水电费分摊怎么算
  • 活动经费要发到每个员工
  • 利润相关计算公式是什么
  • 买卖股票手续费怎么算
  • 企业银行贷款保证金多少
  • 一般纳税人企业所得税税率
  • 长期股权投资两种核算方法的区别
  • 企业支付宝收款码是进公账吗
  • 应付账款与应付票据结合的原则
  • 办理分公司的流程样本
  • 建筑施工企业会计分录大全
  • 防火墙监视模式
  • win7键盘没反应是怎么回事
  • linux常用命令chown
  • win7系统如何设置息屏
  • Linux系统SCSI磁盘扫描机制解析及命令详细介绍
  • centos删除vg
  • win8取消自动更新
  • 基于android的app
  • unity3d Human skin real time rendering plus 真实模拟人皮实时渲染 plus篇
  • javascript要怎么学
  • windows2003服务器管理器在哪里
  • 细说javascript
  • javascript面向对象编程
  • 电脑有网为什么不能用
  • 税控盘抵税申报表怎么填
  • 购买税控盘怎么抵扣
  • 河南省纳税服务平台
  • 汽车装潢业务是干什么的
  • 苏州市区公司可以在园区买社保吗
  • 重庆市大足区迪涛中学那几个是尖子班
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设