createObjectURL的部分使用讲解

news2025/1/11 10:05:17

URL.createObjcetURL的部分详解

文章目录

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

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

1. 为什么要使用createObjectURL

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

2. createObjectURL的基本用法

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

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

常见的MIME类型：

在这里插入图片描述

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

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

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

展示

例如是图片的预览

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

下载

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

<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);