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

  • 个人所得税中应纳税所得额高好还是低好
  • 房产等价置换是否需要缴纳契税?
  • 酒店摆放物品是什么
  • 民非企业开通捐赠
  • 设立登记核准通知书未签名不能办理其他业务
  • 员工加班误餐费怎么做凭证
  • 报销金额大于发票金额几毛钱
  • 对公账户汇款方式
  • 增值发票每月上报是怎么个程序吗
  • 构成业务和不构成业务的会计处理
  • 小企业销售费用多少算高
  • 销售免税货物如何开票
  • 销售货物尚未收到会计分录
  • 资产组减值测试要包含使用权资产吗
  • 收回以前年度的应收账款,怎么进行账务处理?
  • 无票收入应附什么单据
  • 汽车修理厂如何做账
  • 非营业活动交增值税吗
  • 店内上保险退保
  • 应交税费属于什么费用科目
  • 应交税金的明细科目
  • 生产人员社保怎么做账
  • 小规模企业其他业务收入税率
  • 财务计提个人缴纳社保部分怎么记账?
  • 预收账款税收政策
  • sysprep.exe是什么
  • windows11正式版好用吗
  • 间接费用是什么费用
  • 自己给笔记本更换硬盘
  • 马尔堡酒庄
  • 委托加工业务要交税吗
  • 现金流量表补充资料怎么理解
  • php操作mysql数据库
  • vue 浮动窗口
  • php合并数组的方法
  • 2023前端面试题目
  • 技术服务行业增值税税税负率是多少
  • 材料暂估入库如何进行账务处理
  • 拆迁补偿账务处理办法
  • 包含个人社保的保险
  • 厂房建设包括哪些
  • 跨国公司海外子公司
  • mongodb中主键的默认格式是哪个?
  • 消费税为什么要除以1减税率推导公式
  • 所有小规模都能开专票吗
  • 查询不到shsh怎么回事
  • 受托加工的物资属于资产吗
  • mysql select语句操作实例
  • 企业所得税交完了转个人
  • 个人转让房产税率
  • 商业银行提取的盈余公积可用于
  • 税法税前扣除
  • 房租收入如何缴纳增值税
  • 企业代办业务有哪些
  • 发现以前年度假期不满
  • 闲置资产计提折旧
  • 所得税汇算清缴需要调增的项目
  • 购进货物未取得增值税专用发票可以抵扣进项税额吗
  • 应付账款一直挂着,怎么消掉
  • 公司买空调算什么费用
  • 银行开户存款流程
  • 租赁写字楼的需求有哪些
  • 暂估怎么冲回
  • 是不是根据营业执照查询
  • 托收承付的承付是指
  • sqlserver 获取字符位置
  • Linux下mysql5.6.33安装配置教程
  • win7 64位运行软件提示MSCOMCTL.OCX丢失或无效该怎么办?
  • 提高系统能力
  • vmware 安装教程
  • 登录远程linux系统可以用的方法
  • win8系统升级后怎么退回
  • win8 侧边栏
  • uiview继承哪个类
  • android recyclerview 拖拽加阴影
  • javascript面向对象 第三方类库
  • 云南省税务局app缴费
  • 增值税归国家还是地方
  • 汽车装潢业务是干什么的
  • 国家税务总局组建千户集团税收风险分析专业团队
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设