【无标题】

URL.createObjcetURL的部分详解

文章目录

  • URL.createObjcetURL的部分详解
    • [1. 为什么要使用createObjectURL](#1. 为什么要使用createObjectURL)
    • [2. createObjectURL的基本用法](#2. createObjectURL的基本用法)
    • [3. 转换后的文件进行展示或下载](#3. 转换后的文件进行展示或下载)

首先,想记录一下这点是因为之前关于pdf文件的下载和预览,后端返回工作流时的处理,里面有关于createObjectUrl的使用,所以这里想专门对此进行一个详细的解释

1. 为什么要使用createObjectURL

它是js的一个函数,可以将Blob、file等二进制文件转换成浏览器可以直接显示的URL地址,从而进行展示、下载等操作,例如之前一个文章中关于pdf的预览和下载,后端返回的工作流就需要进行转换

2. createObjectURL的基本用法

创建一个Blob对象后,通过createObjectURL方法将Blob对象转换为URL地址

c 复制代码
//这里先解释一下Blob, Blob就类似于是一个二进制大对象,可以以二进制数据的形式存储图片、音频、视频等文件
//可以通过构造函数创建一个Blob对象,可传的参数有两个,第一个参数是要转换的包含数据的数组,第二个参数是数据的MIME类型
//写法
 const blob=new Bolb(['要转换的文件'],{type:'转换文件的类型'})

常见的MIME类型:

更多的MIME类型可以参考https://www.w3school.com.cn/media/media_mimeref.asp

c 复制代码
//这里我们以后端返回的工作流pdf文件为例
const blob=new Blob([response.data],{type: 'application/pdf')
const url=URL.createObjectURL(blob)

3. 转换后的文件进行展示或下载

展示

例如是图片的预览

c 复制代码
<img :src='{{url}}' />
//这里的url就是通过createObjectURL转换得到的url
//如果是像上文提到的pdf可以通过创建dom,将url赋值给src,或者通过window.open(url)打开新窗口进行预览

下载

下载文件我们就要利用到 a标签上的download属性

c 复制代码
<a :href='{{url}}' download='下载的文件名' >下载文件</a>
//也可以通过js的写法
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'pdfdocument.pdf');
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

要注意的是,使用完URL后,需要手动释放,否则可能造成内存泄露等问题

URL.revokeObjectURL(url)

相关推荐
非凡ghost几秒前
Adobe Lightroom安卓版(手机调色软件)绿色版
前端·windows·adobe·智能手机·软件需求
BestAns35 分钟前
Postman 平替?这款轻量接口测试工具,本地运行 + 批量回归超实用!
前端
专注前端30年1 小时前
Webpack进阶玩法全解析(性能优化+高级配置)
前端·webpack·性能优化
烛阴1 小时前
Lua世界的基石:变量、作用域与七大数据类型
前端·lua
张拭心1 小时前
“不卷 AI、不碰币、下班不收消息”——Android 知名技术大牛 Jake Wharton 的求职价值观
android·前端·aigc
SoaringHeart1 小时前
Flutter疑难解决:单独让某个页面的电池栏标签颜色改变
前端·flutter
Yeats_Liao1 小时前
Go Web 编程快速入门 13 - 部署与运维:Docker容器化、Kubernetes编排与CI/CD
运维·前端·后端·golang
Yeats_Liao2 小时前
Go Web 编程快速入门 14 - 性能优化与最佳实践:Go应用性能分析、内存管理、并发编程最佳实践
前端·后端·性能优化·golang
蒜香拿铁2 小时前
Angular【http服务端交互】
前端·http·angular.js
游戏开发爱好者82 小时前
Fiddler抓包实战教程 从安装配置到代理设置,详解Fiddler使用方法与调试技巧(HTTPHTTPS全面指南)
前端·测试工具·小程序·https·fiddler·uni-app·webview