vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue处理base64格式pdf图片预览

vue如何处理base64格式文件pdf及图片预览功能

作者：coinisi_li

这篇文章主要给大家介绍了关于vue如何处理base64格式文件pdf及图片预览功能的相关资料,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址,需要的朋友可以参考下

一、需求：后端返回是base64数据，需要前端处理来展示文件。

二、实现方法：

解释一下这段代码的功能：

总体而言，该函数用于处理文件预览的逻辑，支持预览 'pdf' 文件和一些图像格式。

   <iframe
            width="100%"
            height="604px"
            :src="PDFUrl"
             v-if="PDFUrl"
       />

   handleInitPDF() {
      webAPI.server
        .get({
          url: this.getPdfUrl.format(this.id),
        })
        .then((res) => {
          if (res.code == 0) {
            if (res.data) {
              const base64Str = res.data;
              const byteCharacters = atob(base64Str);
              const byteNumbers = new Array(byteCharacters.length);
              for (let i = 0; i < byteCharacters.length; i++) {
                byteNumbers[i] = byteCharacters.charCodeAt(i);
              }
              const byteArray = new Uint8Array(byteNumbers);
              const blob = new Blob([byteArray], { type: 'application/pdf' });
              this.newurl = URL.createObjectURL(blob);
             
            }
            this.PDFUrl = this.newurl;
           
          }
        });
      this.PDFvisiable = true;
    },

三、如果要直接打开弹窗，与预览图片：

通俗的理解为：计算机是无法直接对base64数据进行处理的，不论是其他类型字符串、数字什么的也好，计算机可以理解的语言其实是二进制数据。因此我们需要将信息转化成计算机可以理解的二进制数据，所以需要先解码，此时我们得到的是原始的二进制 数据，但是由于我们最终需要的是一个url，因此我们需要继续对这个原始二进制数据处理。首先使用Unicode 编码，这一步是为了处理一些特殊的文件格式，比如 PDF，可能某些文件格式使用非常规的编码方式，需要在 JavaScript 中进行适当的转换，以便后续处理。接着类型化数组来表示二进制数据，再将类型化数组（如 Uint8Array）转换为 Blob 对象，因为类型化数组处理过的数据会更适合blob方法处理会更高效，Blob 对象是一种表示二进制大对象的标准化方式，此时我们得到的二进制数据就是标准化的我们所需要的二进制计算机可以理解的数据了，就可以使用方法得到url了。

   preview(item) {
      if (item.type == 'pdf') {
        webAPI.server
          .get({
            url: this.previewUrl.format(item.id),
          })
          .then((res) => {
            const base64Str = res.data;
            const byteCharacters = atob(base64Str);
            const byteNumbers = new Array(byteCharacters.length);
            for (let i = 0; i < byteCharacters.length; i++) {
              byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            const byteArray = new Uint8Array(byteNumbers);
            const blob = new Blob([byteArray], { type: 'application/pdf' });
            this.fileUrl = URL.createObjectURL(blob);
            parent.layerAPI.openResultWin(    //直接打开弹窗
              '查看文件:' + item.fileName,
              this.fileUrl
            );
          });
        return;
      }
      let imgFormat = ['png', 'gif', 'jpg', 'bmp', 'svg'];
      if (imgFormat.includes(item.type)) {
        webAPI.server
          .get({
            url: this.previewUrl.format(item.id),
          })
          .then((res) => {
            const base64Str = res.data;
            const byteCharacters = atob(base64Str);
            const byteNumbers = new Array(byteCharacters.length);
            for (let i = 0; i < byteCharacters.length; i++) {
              byteNumbers[i] = byteCharacters.charCodeAt(i);
            }
            const byteArray = new Uint8Array(byteNumbers);
            const blob = new Blob([byteArray]);
            this.imageUrl = URL.createObjectURL(blob);
            this.$nextTick(() => {
              if (this.$refs.myImg) {
                this.$refs.myImg.showViewer = true;
              }
            });
          });
        return;
      }
      // this.$message.warning('暂不支持该格式预览');
    },

四、详细解释一下具体的使用到的函数方法：

1）atob()

在JavaScript中，atob() 函数用于解码Base64编码的字符串。在这里，const byteCharacters = atob(base64Str); 这一行代码的目的是将Base64编码的字符串 base64Str 解码为原始的二进制数据，存储在 byteCharacters 变量中。

解释一下具体的步骤：

在文件预览的上下文中，这一步是为了将服务器返回的Base64编码的文件内容解码为原始二进制数据，以便后续可以处理和使用这些数据，比如创建Blob对象用于文件预览。

2）new Array(）

在这一步 const byteNumbers = new Array(byteCharacters.length); 中，代码创建了一个新的数组 byteNumbers，其长度为 byteCharacters.length。这一步的意义和作用：

这一步的目的是为了准备一个数组，以便后续将字节数据转换为数字。每个元素将用于存储一个字节的数值。这通常是为了进一步处理二进制数据，例如将它们用于创建 Blob 对象、ArrayBuffer 等。后续代码可能会遍历字节数据，将每个字节的数值存储在数组中的相应位置。

3）charCodeAt()

这个循环的目的是遍历 byteCharacters 数组中的每个字符，获取每个字符的 Unicode 编码，并将这些编码存储到 byteNumbers 数组中。意义和作用：

这个过程的目的是将原始二进制数据（以字符串形式存在的字符集）转换为对应的数字表示形式。后续代码可能需要使用这些数字，例如用于创建 Uint8Array 或其他二进制数据结构。在这个具体的代码中，这些数字可能被用于创建表示文件内容的二进制数据。

Unicode 编码： 在处理一些特殊的文件格式，比如 PDF，可能会涉及到将二进制数据按照一定规则转换为 Unicode 编码。这是因为某些文件格式可能使用非常规的编码方式，需要在 JavaScript 中进行适当的转换，以便后续处理。

4）Uint8Array()

这行代码的目的是创建一个 Uint8Array 对象，该对象包含了之前收集的字节数据的数值表示。具体的意义和作用：

这一步的目的是将之前的字符编码数组转换为类型化数组，以便后续可以更方便地进行二进制数据的处理和操作。通常，这样的数组可以用于创建诸如 Blob 对象、ArrayBuffer 等二进制数据结构。在这个具体的代码中，byteArray 可能会用于创建表示文件内容的 Blob 对象，用于文件预览等操作。

5）Blob(）

这行代码的目的是创建一个 Blob 对象，用于表示二进制大对象，其中包含了之前转换的文件内容的二进制数据。意义和作用：

这一步的目的是创建一个表示文件内容的 Blob 对象，方便后续在浏览器中进行预览。通常，这个 Blob 对象可以被用于创建一个 URL，然后用于打开文件预览窗口或其他相关操作。

6）URL.createObjectURL(）

这行代码的目的是使用 URL.createObjectURL() 方法创建一个包含 Blob 对象内容的 URL。具体的意义和作用：

这一步的目的是为了获得一个用于预览文件内容的 URL，通常用于将文件内容嵌入到页面中或者在新窗口中打开。

7）为什么在这个过程中会选择使用类型化数组（Uint8Array）

短而言之，Uint8Array 提供了一种更直接、更高效地处理二进制数据的方式，适合在文件、图像等场景下进行操作。在这个具体的代码中，它有助于确保二进制数据的结构和格式得到正确处理，以便后续的 Blob 构造和 URL 创建。

总结

到此这篇关于vue如何处理base64格式文件pdf及图片预览功能的文章就介绍到这了,更多相关vue处理base64格式pdf图片预览内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文