vue中预览pdf文件流+new Blob() 将文件流转换为文件+URL.createObjectURL 的使用方法

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

一、vue中预览pdf文件流代码

downloadUnitLjzljdPdf(row) {
      let url = `/kzsny/download/download${row.uid}`;
      u.h.get(url, { responseType: 'blob' }).then((res) => {

        // 将获取到的PDF文件流转换为Blob对象
        let blob = new Blob([res], { type: 'application/pdf' });
        // 创建一个URL对象
        let urlTwo = URL.createObjectURL(blob);
        // 设置PDF源为创建的URL
        window.open(urlTwo, '_blank');
      });
    }

2.使用 new Blob() 将文件流转换为文件

1. new Blob()的定义与用途
new Blob()是JavaScript中的一个构造函数，用于创建Blob对象。Blob（Binary Large Object）是一种表示不可变、原始数据的类文件对象。它可以存储二进制数据或文本数据，并且可以代表各种类型的数据，例如图片、音频、视频、压缩文件等。

2. new Blob()如何使用
要使用new Blob()将文件流转换为文件，首先需要获取文件流的数据。在浏览器环境中，可以使用Fetch API或XMLHttpRequest来获取文件流。假设我们已经获取到了文件流数据并保存在fileStream变量中，下面是将文件流转换为文件的代码示例：

const file = new Blob([fileStream]);
上述代码通过调用new Blob()构造函数，传入包含文件流数据的数组参数，创建了一个Blob对象，保存在file变量中。现在，file变量就是表示文件的Blob对象了。

3. 文件的MIME类型与new Blob()文件转换的关系
文件的MIME类型指的是文件的媒体类型，例如image/jpeg表示JPEG图片、audio/mp3表示MP3音频等。new Blob()方法在转换文件时并不会自动推断文件的MIME类型，而是需要开发者明确指定。

通常情况下，我们可以通过浏览器提供的API获取文件的MIME类型，例如使用File API中的type属性。如果已知文件的MIME类型，可以将其作为第二个参数传递给new Blob()构造函数，如下所示：

const file = new Blob([fileStream], { type: 'image/jpeg' });
上述代码将文件流数据和一个包含MIME类型的配置对象作为参数传递给new Blob()构造函数。这样，在创建Blob对象时就会设置正确的MIME类型。

4. 如何使用MIME类型使new Blob()转换出正确的文件类型
要确保new Blob()正确转换出文件的类型，首先需要确定文件的真实MIME类型。可以通过浏览器的开发者工具或相关的文件信息API来获取文件的MIME类型。

一旦获取到了文件的MIME类型，只需将其作为第二个参数传递给new Blob()构造函数即可，如前面示例所示。

需要注意的是，如果未指定MIME类型或指定的MIME类型不正确，浏览器可能无法正确处理Blob对象，导致文件无法正常预览或下载。

new Blob参考这个链接 https://www.cnblogs.com/weichen913/p/17539621.html
更多MIME参考这个链接https://www.w3school.com.cn/media/media_mimeref.asp

2.URL.createObjectURL 的使用方法

1. 简介和使用场景
它是js的一个函数，可以将Blob、file等二进制文件转换成浏览器可以直接显示的URL地址，从而进行展示、下载等操作。创建一个新的对象URL，该对象URL可以代表某一个指定的file对象或者bold对象。URL对象是硬盘（SD卡等）指向的一个文件路径，如果我们做文件上传的时候，想在没有上传服务器端的情况下看到上传图片的效果图的时候。

就可以通过var url = window.URL.createObjectURL(files[0])；获得一个http格式的url路径，这个时候就可以设置img中的src进行显示了。

例如关于pdf的预览和下载，后端返回的工作流就需要进行转换或者点击图片预览图片的时候，用于生成一个临时的预览地址 。
2. createObjectURL的基本用法
创建一个Blob对象后，通过createObjectURL方法将Blob对象转换为URL地址

//这里我们以后端返回的工作流pdf文件为例
const blob=new Blob([response.data],{type: 'application/pdf')
const url=URL.createObjectURL(blob)
 // 生成预览图片地址：通过js将文件信息在本地电脑内存中变成一个预览地址临时拿去使用显示
console.logurl); // blob:http://localhost:8080/5262140a-02db-4106-b651-b2fc98a5e8e9

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