位置: 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 本地引入)

  • 华为nova9pro屏幕触控采样率是多少(华为nova9pro屏幕分辨率)

    华为nova9pro屏幕触控采样率是多少(华为nova9pro屏幕分辨率)

  • 怎么设置siri一喊就说我在(怎么设置siri一喊就说我在说话)

    怎么设置siri一喊就说我在(怎么设置siri一喊就说我在说话)

  • 抖音直播标题在哪里设置(抖音直播标题在哪里写)

    抖音直播标题在哪里设置(抖音直播标题在哪里写)

  • 任务管理器已被系统管理员停用怎么办(任务管理器已被系统管理员禁用w10)

    任务管理器已被系统管理员停用怎么办(任务管理器已被系统管理员禁用w10)

  • 华为手机屏幕休眠怎么设置(华为手机屏幕休眠是什么意思)

    华为手机屏幕休眠怎么设置(华为手机屏幕休眠是什么意思)

  • 上传照片格式不对怎么办(上传照片格式不符合要求怎么办)

    上传照片格式不对怎么办(上传照片格式不符合要求怎么办)

  • iphone7为什么卡屏(为什么苹果7手机卡的要死)

    iphone7为什么卡屏(为什么苹果7手机卡的要死)

  • 什么手机支持红外线(什么手机支持红外遥控功能)

    什么手机支持红外线(什么手机支持红外遥控功能)

  • 电脑硬盘oem分区什么意思(电脑硬盘oem分区在哪里)

    电脑硬盘oem分区什么意思(电脑硬盘oem分区在哪里)

  • 高斯投影是等角投影吗(高斯投影是等角竖轴椭圆柱投影)

    高斯投影是等角投影吗(高斯投影是等角竖轴椭圆柱投影)

  • 联想e52进入bios设置(联想E52进入BIOS)

    联想e52进入bios设置(联想E52进入BIOS)

  • 删除的照片怎么找回来(删除的照片怎么找回来免费的软件)

    删除的照片怎么找回来(删除的照片怎么找回来免费的软件)

  • 怎么删除抖音里的作品(怎么删除抖音里的收藏)

    怎么删除抖音里的作品(怎么删除抖音里的收藏)

  • 存单忘记密码怎么取钱(存单忘记密码怎么找回)

    存单忘记密码怎么取钱(存单忘记密码怎么找回)

  • 快手直播怎么开(快手直播怎么开通直播)

    快手直播怎么开(快手直播怎么开通直播)

  • 网线明线遇到门怎么走(网线从门缝过会断吗?)

    网线明线遇到门怎么走(网线从门缝过会断吗?)

  • 11n无线路由器几兆(路由器11n和11bgn)

    11n无线路由器几兆(路由器11n和11bgn)

  • 交易猫怎么接代打单子(交易猫接代打)

    交易猫怎么接代打单子(交易猫接代打)

  • 三星a70防水吗(三星a71防水等级)

    三星a70防水吗(三星a71防水等级)

  • 苹果8p能升5g吗(iphone 8p可以升级256内存吗)

    苹果8p能升5g吗(iphone 8p可以升级256内存吗)

  • 保存到手机的图片在哪(保存到手机的图片画质变差)

    保存到手机的图片在哪(保存到手机的图片画质变差)

  • KB5000802补丁怎么卸载?Win10强制卸载补丁KB5000802的四种方法(kb5001028补丁)

    KB5000802补丁怎么卸载?Win10强制卸载补丁KB5000802的四种方法(kb5001028补丁)

  • 出现在马萨诸塞州海岸附近的座头鲸 (© Eric Kulin/plainpicture)(马萨诸塞 下架)

    出现在马萨诸塞州海岸附近的座头鲸 (© Eric Kulin/plainpicture)(马萨诸塞 下架)

  • 【Node.js实战】一文带你开发博客项目之登录(前置知识)(node js教程)

    【Node.js实战】一文带你开发博客项目之登录(前置知识)(node js教程)

  • 一般纳税人出租不动产增值税税率
  • 办税员可以购票吗?
  • 做账报税简单吗
  • 资产减值损失影响利润吗
  • 年度财务报表怎么作废
  • 退还押金怎么做账
  • 物业公司外包保安死亡
  • 茶叶自产自销成本核算
  • 增值税一般纳税人资格登记表
  • 电子承兑汇票如何贴现网银操作
  • 一般存款账户的主要用途
  • 附加税印花税个税申报实训心得
  • 什么是增值税差额征税政策
  • 事业单位利息收入
  • 委托加工模具的费用计入什么科目?
  • 非营利机构收到专用发票
  • 开了负数发票印花税减掉吗?
  • 个人独资企业免税销售额
  • 发票上的备注怎么填写步骤
  • 金税盘是固定资产还是无形资产
  • 增值普通发票税率怎么算
  • 临时业务开票
  • 小规模纳税人 行业
  • 对境外支付佣金的规定
  • 企业所得税清算报备是什么意思
  • 材料票可以直接在税务局开吗
  • win7怎么转移桌面到d盘
  • 穿越火线真人版宣传片
  • 实收资本怎么用
  • 为离职员工代缴社保 如何规避法律责任
  • 代理公司可以开服务费发票吗
  • macOS Catalina10.15.2值得升级吗 macOS Catalina10.15.2更新了什么
  • php数组函数输出《咏雪》里有多少"片"字
  • linux 临时修改环境变量
  • 企业支付银行的贷款利息可以税前扣除吗为什么
  • php实现验证码功能
  • php做
  • PHP:iconv_strpos()的用法_iconv函数
  • 专项应付款费用化
  • 微信小程序和web端的交互
  • 工程建设的项目的划分?
  • php生成随机数不重复
  • 贝尔纳贝
  • php屏蔽ip
  • php框架自动加载
  • named命令
  • 银行存款向灾区捐款
  • opengl加阴影
  • python中datetime.datetime
  • mongodb win7
  • 织梦怎么用
  • 可以现金结算的业务
  • mysql三种安装方式
  • 存在弃置费用的固定资产由于技术进步
  • 单位收风险金违法吗
  • 内账应付账款怎么做账
  • 销售退货成本如何计算
  • 转账支票遗失声明
  • 分公司往子公司投资如何做税务处理?
  • 办理分公司的流程样本
  • 在window7
  • win8.1电脑设置在哪里
  • mse windows defender
  • window7qq登录失败
  • 系统安装驱动卡住了
  • schedul2.exe - schedul2是什么进程 有什么用
  • win7 c盘打不开
  • Android开源ui框架
  • 批处理文件就是将若干文件集中起来
  • python多进程模块
  • jQuery ajax分页插件实例代码
  • 使用SQLite本地数据库
  • 如何使用jquery
  • 产品税务编号查询系统官网
  • 河南医疗保险网上怎么缴费截止时间
  • 已代扣代缴个人所得税,他人还需要缴纳个人所得税吗?
  • 蒲河大集是什么多少号沈阳大集各个大集多少号
  • 进出口货物的报关时限
  • 钢结构税收政策
  • 甘肃税务局电子税务局官网电子发票怎么查询
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设