位置: 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训练自己的数据)

  • js for循环(js for循环等待1秒)

    js for循环(js for循环等待1秒)

  • 漫步者耳机怎么配对(漫步者耳机怎么调节音量)

    漫步者耳机怎么配对(漫步者耳机怎么调节音量)

  • 博朗耳温枪背景灯不亮(博朗耳温枪背景灯不亮了)

    博朗耳温枪背景灯不亮(博朗耳温枪背景灯不亮了)

  • 拼多多推广晚上要关吗(拼多多推广晚上推好还是白天推好)

    拼多多推广晚上要关吗(拼多多推广晚上推好还是白天推好)

  • 抖音被限流如何快速恢复(抖音限流如何查看)

    抖音被限流如何快速恢复(抖音限流如何查看)

  • 打电话没有嘟声说正忙(打电话没有嘟声说正在通话中)

    打电话没有嘟声说正忙(打电话没有嘟声说正在通话中)

  • a1901是三网吗(a1921是三网吗)

    a1901是三网吗(a1921是三网吗)

  • 充电器绿灯一闪一闪的是什么原因(充电器红灯一闪一闪的是什么原因)

    充电器绿灯一闪一闪的是什么原因(充电器红灯一闪一闪的是什么原因)

  • 佳能相机怎么正确关机(佳能相机怎么调设置)

    佳能相机怎么正确关机(佳能相机怎么调设置)

  • i53350p性能(i53350p相当于几代i5)

    i53350p性能(i53350p相当于几代i5)

  • 怎么删qq自动回复内容(怎样删除qq自动回复)

    怎么删qq自动回复内容(怎样删除qq自动回复)

  • 苹果xsmax触屏不灵敏(xsmax 触屏不好使)

    苹果xsmax触屏不灵敏(xsmax 触屏不好使)

  • 为什么超过200m不能用流量下载(为什么超过200mb)

    为什么超过200m不能用流量下载(为什么超过200mb)

  • 一张照片怎么配音乐(一张照片怎么配音)

    一张照片怎么配音乐(一张照片怎么配音)

  • vivoz5线下有售吗(vivoz5实体店买得到吗)

    vivoz5线下有售吗(vivoz5实体店买得到吗)

  • 快手缴纳保证金能退吗(快手缴纳保证金是什么意思)

    快手缴纳保证金能退吗(快手缴纳保证金是什么意思)

  • a1822是ipad什么型号(a1822是ipad什么型号屏幕尺寸)

    a1822是ipad什么型号(a1822是ipad什么型号屏幕尺寸)

  • slaal10是华为什么型号(华为slaal100是什么型号)

    slaal10是华为什么型号(华为slaal100是什么型号)

  • qq电脑里的图片怎么打印(qq里的图片在电脑哪里)

    qq电脑里的图片怎么打印(qq里的图片在电脑哪里)

  • 华为nova5pro支持5g网络吗(华为nova5pro支持500mbps网速吗)

    华为nova5pro支持5g网络吗(华为nova5pro支持500mbps网速吗)

  • iphone微信缓存图片在哪(苹果手机微信缓存的图片在哪里)

    iphone微信缓存图片在哪(苹果手机微信缓存的图片在哪里)

  • 苹果x屏幕换tp是什么意思

    苹果x屏幕换tp是什么意思

  • 如何查手机流量还剩多少(华为如何查手机流量)

    如何查手机流量还剩多少(华为如何查手机流量)

  • 三星s10屏幕多少hz(三星S10屏幕多少hz)

    三星s10屏幕多少hz(三星S10屏幕多少hz)

  • 谷歌浏览器如何截图(谷歌浏览器如何下载)

    谷歌浏览器如何截图(谷歌浏览器如何下载)

  • 家里路由器怎么改密码(家里路由器怎么控制家庭路由器)

    家里路由器怎么改密码(家里路由器怎么控制家庭路由器)

  • chatGPT身份指令

    chatGPT身份指令

  • 什么情况借钱
  • 公司有流水不申报会怎么样
  • 一个季度30万是不含税吗
  • 开票不确认收入可以吗
  • 库存现金盘盈盘亏的账务处理
  • 如何去办理小型微利企业资格每年都需要认证吗?
  • 已过期增值税专票怎么开
  • 固定资产替换公式
  • 结存材料物资会计分录怎么做?
  • 没收入金税盘减免项如何申报处理及会计分录
  • 印花税不计提是当月交当月吗
  • 固定资产累计折旧借贷方向
  • 未认证发票进项税分录
  • 进口货物的代理报关服务费计入
  • 作为展示用的物品
  • 正常的成本利润是多少
  • 营改增之后对企业的影响
  • 从个人出开进的房租租赁发票可以抵扣几个点?
  • 返利失效了怎么找回
  • 国税怎么查缴税明细
  • 账本印花税每年交吗,要交几本
  • 携税宝报税操作流程
  • 税收分类编码选错了怎么办
  • 春节公司发福利买什么东西
  • 企业实缴出资额怎么查
  • 跨年度取得发票会计分录
  • 计提坏账准备的比例
  • 消耗性生物资产如何结转成本
  • 银行与银行之间转账会计摘要
  • ajax无刷新技术
  • 单位办事人员
  • git pull远程
  • php字符串函数有哪些
  • 从价计征房产税如何计算
  • 建筑公司算不算企业
  • 隐隐作痛怎么写
  • 材料款零头抹掉怎么做凭证
  • 杀疯了出自哪里
  • 中国烟草资产负债表
  • 固定资产的特点不包括
  • 公司购买基金入什么科目
  • 三方合同如何解除
  • 代收电费的增值税怎么算
  • 增值税普通发票查询真伪
  • mysql主从配置详解
  • 承租方支付的租房税款计入哪个科目
  • 固定资产中的动产和不动产
  • 社保稳岗补贴怎么查询
  • 无形资产界定
  • 退回企业所得税的账务处理
  • 应收账款期末余额为负数表示什么
  • 代扣代缴附加税怎么做账
  • 公允价值的通俗理解
  • 销售费用的定义是什么意思
  • 为什么规定视同销售?
  • sql语句的执行方式
  • window10 bitlocker
  • centos访问网页命令
  • 远程桌面登录显示其他用户
  • windows10cortana搜索框
  • iphone制造成本
  • 电脑打开win
  • wan 微型端口
  • 安装win8正在安装应用要多久
  • linux关闭系统
  • win8应用商店停止服务
  • 分享一下什么
  • bat定义函数
  • 火狐浏览器自定义滚动条
  • unity怪物自动攻击
  • 详解九章算法
  • script标签的defer和async
  • python标准库函数有哪些
  • js数组entries
  • 安卓微信仿ios版
  • jquery的插件
  • 工会经费扣除标准2022
  • 河北省职称证去哪里查
  • 个税专项扣除填报错误怎么办
  • 福建省顺昌县人口有多少
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设