位置: IT常识 - 正文

【vue】vue中下载文件的方法(vue下载安装)

编辑:rootadmin
【vue】vue中下载文件的方法 文章目录1. 下载后端返回文件1.1 后端为post请求返回二进制流文件URL.createObjectURLFileReader1.2 后端直接返回get请求文件2. 下载本地文件1. 下载后端返回文件1.1 后端为post请求返回二进制流文件

推荐整理分享【vue】vue中下载文件的方法(vue下载安装),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue 下载功能,vue下载方法,vue下载安装,vue下载方法,vue下载方法,vue 下载,vue 下载,vue 下载,内容如对您有帮助,希望把文章链接给更多的朋友!

Blob

Blob对象标识一个不可变、原始数据的类文件对象。Blob表示的不一定是JavaScript原生格式的数据

responseType

responseType它表示服务器响应的数据类型,由于后台返回来的是二进制数据,所以要把它设为‘blob’

【vue】vue中下载文件的方法(vue下载安装)

通过设置responseType为blob,可以直接拿到二进制文件转化为Blob,两种使用 Blob 实现文件下载的方式

URL.createObjectURL

在浏览器端,实现直接下载文件,就是使用a标签来只想文件的下载地址。window.location.href的本质也是这样,因此在拿到二进制文件对应的Blob对象后,需要为这个Blob对象创建一个指向它的下载地址的URL

URL.createObjectURL 方法则可以实现接收 File 或 Blob 对象,创建一个 DOMString,包含了对应的 URL,指向 Blob 或 File 对象,它看起来会是这样:

“blob:http://localhost:8080/a48aa254-866e-4c66-ba79-ae71cf5c1cb3”

完整使用:

export const downloadFile = (fileStream, name, extension, type = "") => { const blob = new Blob([fileStream], {type}); const fileName = `${name}.${extension}`; if ("download" in document.createElement("a")) { const elink = document.createElement("a"); elink.download = fileName; elink.style.display = "none"; elink.href = URL.createObjectURL(blob); document.body.appendChild(elink); elink.click(); URL.revokeObjectURL(elink.href); document.body.removeChild(elink); } else { navigator.msSaveBlob(blob, fileName); }};FileReader

FileReader 对象也可以使得我们对 Blob 对象生成一个下载地址 URL,它和 URL.createObject 一样可以接收 File 或 Blob 对象。 这个过程,主要由两个函数完成readAsDataURL和onload,前者用于将Blob或File对象转为对应的URL,后者用于接收前者完成后的URL,它会在e.target.result上 完整使用:

const readBlob2Url = (blob, type) =>{ return new Promise(resolve => { const reader = new FileReader() reader.onload = (e) => { resolve(e.target.result) } reader.readAsDataURL(blob) })}1.2 后端直接返回get请求文件

<a href=‘get请求返回的地址’></a>

2. 下载本地文件

前端项目中下载某个地址的文件模块,文件不想放到后端去下载,在文件大小不太大的情况下,可以把文件放在前端项目中,无论开发环境还是生产环境,都能在同样路径下找到那个文件 1.在vue-cli3.x的版本中,将需要下载的文件放到public文件夹中 2.下载文件

<script>downloadUrl: `${process.env.BASE_URL}file/xxx_template.xlsx`, // 模板下载文件地址</script><template><a :href="downloadUrl">点击下载</a></template>

参考: 详解,从后端导出文件到前端(Blob)下载过程

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

上一篇:使用c++onnxruntime部署yolov5模型并使用CUDA加速(超详细)(使用二氧化碳灭火器时人应该站在什么位置)

下一篇:YOLO_V8训练自己的数据集(yolov8训练自己的数据)

  • winrar是免费的嘛(winrar收费标准)

    winrar是免费的嘛(winrar收费标准)

  • 华为荣耀20i照相能放大多少倍(华为荣耀20i拍照)

    华为荣耀20i照相能放大多少倍(华为荣耀20i拍照)

  • 华为nova5和荣耀20区别(华为nova5和荣耀20i哪个好)

    华为nova5和荣耀20区别(华为nova5和荣耀20i哪个好)

  • 华为mate30pro的充电器型号(华为mate30pro的充电线型号)

    华为mate30pro的充电器型号(华为mate30pro的充电线型号)

  • 苹果动态壁纸怎么下载(苹果动态壁纸怎么没有声音)

    苹果动态壁纸怎么下载(苹果动态壁纸怎么没有声音)

  • 红米note5是什么显示屏里

    红米note5是什么显示屏里

  • 快手粉丝团怎么升三级(快手粉丝团怎么创建)

    快手粉丝团怎么升三级(快手粉丝团怎么创建)

  • 爱奇艺金币有啥用(爱奇艺金币有啥用处)

    爱奇艺金币有啥用(爱奇艺金币有啥用处)

  • 华为P20录音在哪里(华为p20录音机在哪)

    华为P20录音在哪里(华为p20录音机在哪)

  • oppok3为什么停产(oppok3为什么买不到了)

    oppok3为什么停产(oppok3为什么买不到了)

  • trt-al00a是什么型号(trt al00a什么型号)

    trt-al00a是什么型号(trt al00a什么型号)

  • 摄像机休眠什么意思(摄像机休眠状态耗电吗)

    摄像机休眠什么意思(摄像机休眠状态耗电吗)

  • 手机已用空间包括哪些内容(手机已用空间包括那些软件)

    手机已用空间包括哪些内容(手机已用空间包括那些软件)

  • 淘宝免费取退什么意思(淘宝免费退款)

    淘宝免费取退什么意思(淘宝免费退款)

  • 狐狸视频播放器是什么(yy直播)

    狐狸视频播放器是什么(yy直播)

  • 惠普打印机打印出来出现横条怎么办(惠普打印机打印不了怎么回事)

    惠普打印机打印出来出现横条怎么办(惠普打印机打印不了怎么回事)

  • 全网通手机忘记锁屏密码怎么办(全网通手机忘记开机密码怎么办?)

    全网通手机忘记锁屏密码怎么办(全网通手机忘记开机密码怎么办?)

  • oppopbcm10是啥型号(oppopbcm10多少钱)

    oppopbcm10是啥型号(oppopbcm10多少钱)

  • i39100核显相当于什么显卡(i39100核显相当于什么独显)

    i39100核显相当于什么显卡(i39100核显相当于什么独显)

  • LTE打开有什么坏处吗(开启lte对手机有影响吗)

    LTE打开有什么坏处吗(开启lte对手机有影响吗)

  • 手机关机怎么定位找回(手机关机怎么定位到准确位置吗)

    手机关机怎么定位找回(手机关机怎么定位到准确位置吗)

  • 荣耀畅玩5x可以插电信卡吗(荣耀畅玩5x可以换电池吗)

    荣耀畅玩5x可以插电信卡吗(荣耀畅玩5x可以换电池吗)

  • 怎么开启微信视频美颜功能(怎么开启微信视频号的评论)

    怎么开启微信视频美颜功能(怎么开启微信视频号的评论)

  • 苹果11怎么设置24小时时间(苹果11怎么设置2个面容)

    苹果11怎么设置24小时时间(苹果11怎么设置2个面容)

  • 苹果手机有防丢功能吗(苹果手机防丢失定位怎么设置)

    苹果手机有防丢功能吗(苹果手机防丢失定位怎么设置)

  • 淘宝双11什么时候开始抢红包(淘宝双11什么时候结束)

    淘宝双11什么时候开始抢红包(淘宝双11什么时候结束)

  • 苹果18w充电器怎么辨别真假(苹果18W充电器怎么降到5W)

    苹果18w充电器怎么辨别真假(苹果18W充电器怎么降到5W)

  • 手机被植入病毒的表现(怎么知道手机被植入病毒)

    手机被植入病毒的表现(怎么知道手机被植入病毒)

  • Win10系统重置能达到重装系统效果吗?(win10重置后能恢复吗)

    Win10系统重置能达到重装系统效果吗?(win10重置后能恢复吗)

  • 所得税费用调增分录
  • 报税申报不了
  • 个体工商户怎么申请开普票
  • 营业收入比销售商品收到的现金少
  • 分公司是否可以参与投标招标
  • 小微企业免税计入什么科目
  • 新个税聘用退休后怎么算
  • 企业所得税应税所得率
  • 年初未分配利润借方增加还是减少
  • 红冲暂估原材料如何做会计分录
  • 没有抵扣怎么办
  • 税法上的营业收入与会计差异
  • 非营利组织对外捐赠
  • 摊销房租账务处理
  • 如何算清楚公司的账
  • 三方协议是先签先干活
  • 矿产资源税是多少
  • 向银行贷款资产包括哪些
  • 赔偿款和罚款是一样的吗
  • 企业的主营业务收入
  • 通行费进项税额抵扣金额填在哪里?
  • 广告费预付后收条怎么写
  • 审计报告报备流程
  • 利润表中的销售收入
  • 非居民企业间接转让中国应税财产
  • 基本户和一般户的区别和用途
  • 怎么利用腾讯手机号找人
  • 会计上金融资产包括哪些
  • 税款申报成功但没有缴款怎么办
  • 新办企业税务服务
  • ∧oc电脑bios
  • 采用账龄分析法计提坏账准备
  • 公司购买的大型安装设备什么时候转入固定资产
  • php自定义函数的关键字是什么
  • antdesign vue pro
  • 加工劳务费会计分录
  • phpcms建站流程
  • python 动态
  • 收入调节方式有哪三种
  • 织梦使用手册
  • 用专项资金支付项目滞纳金合规么
  • inner join用法示例
  • 准则对()、()和()等作出基本规定
  • 免税不能抵扣
  • 定额的个体户怎么交税
  • 税款所属期止是怎么写
  • access里面也暗含了sql
  • 收货和入库的区别
  • 应付账款的账务处理
  • 交易性金融资产的入账价值
  • 收到注册资本金什么时候交印花税
  • 事业单位之间
  • 应税销售行为如何处理
  • 个税基数和社保有关系吗
  • 金税三期网络设置
  • 营业成本如何设一级科目
  • 数据库left joins
  • sql2005和2000区别
  • Win10 Mobile 10549 预览版新功能上手体验视频
  • iis支持什么后端语言
  • linux防火墙设置firewalld
  • macos的磁盘
  • windows2008无法识别usb
  • linux从一个命令获取数据到另一个命令
  • javascript date函数
  • jquery刷新局部页面
  • shell脚本命令行参数
  • Node.js中的什么模块是用于处理文件和目录的
  • 完美解决mac环境异常
  • shell 循环 for
  • 修改cmdline
  • javascript definitive guide
  • jQuery 判断复选框是否选中
  • imagelearning
  • android 自定义
  • ActivityManager: Warning: Activity not started, its current task has been brought to the front 的的问题
  • 国税局征管科
  • 利润报表怎么填写
  • 租房减免税收
  • 两江新区两江大道航空航天产业园
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设