【无标题】

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)

相关推荐
新中地GIS开发老师9 分钟前
Cesium 军事标绘入门:用 Cesium-Plot-JS 快速实现标绘功能
前端·javascript·arcgis·cesium·gis开发·地理信息科学
Superxpang17 分钟前
前端性能优化
前端·javascript·vue.js·性能优化
Rysxt_22 分钟前
Element Plus 入门教程:从零开始构建 Vue 3 界面
前端·javascript·vue.js
隐含25 分钟前
对于el-table中自定义表头中添加el-popover会弹出两个的解决方案,分别针对固定列和非固定列来隐藏最后一个浮框。
前端·javascript·vue.js
大鱼前端26 分钟前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack·turbopack
你的人类朋友34 分钟前
先用js快速开发,后续引入ts是否是一个好的实践?
前端·javascript·后端
知识分享小能手41 分钟前
微信小程序入门学习教程,从入门到精通,微信小程序核心 API 详解与案例(13)
前端·javascript·学习·react.js·微信小程序·小程序·vue
子兮曰1 小时前
npm workspace 深度解析:与 pnpm workspace 和 Lerna 的全面对比
前端·javascript·npm
颜酱2 小时前
用搬家公司的例子来入门webpack
前端·javascript·webpack