一、需求：后端返回是base64數(shù)據(jù)，需要前端處理來展示文件。

二、實(shí)現(xiàn)方法：

解釋一下這段代碼的功能：

1. ）preview(item) 是一個(gè)函數(shù)，接受一個(gè)參數(shù) item，其中包含了文件的相關(guān)信息。

2. ）首先，通過條件語句 if (item.type == 'pdf') 檢查文件類型是否為 'pdf'。

3. ）如果文件類型是 'pdf'，則執(zhí)行以下操作：

   • 使用 webAPI.server.get() 方法發(fā)送一個(gè)請求，請求的URL是通過 this.previewUrl.format(item.id) 構(gòu)建的。
   • 在請求成功后，使用 then 處理響應(yīng)數(shù)據(jù)，將返回的 base64 字符串解碼為字節(jié)數(shù)組。
   • 創(chuàng)建一個(gè)表示 PDF 文件的 Blob 對(duì)象，然后通過 URL.createObjectURL(blob) 創(chuàng)建一個(gè)用于在瀏覽器中預(yù)覽的 URL。
   • 最后，調(diào)用 parent.layerAPI.openResultWin() 打開一個(gè)窗口，顯示文件名和預(yù)覽的文件 URL。（這一步對(duì)應(yīng)第3點(diǎn)的代碼）

4. ）如果文件類型不是 'pdf'，則繼續(xù)檢查是否屬于圖像格式（'png', 'gif', 'jpg', 'bmp', 'svg'）。

5. ）如果文件類型是圖像格式，執(zhí)行以下操作：

   • 與 'pdf' 類似，發(fā)送一個(gè)異步請求獲取文件內(nèi)容，并處理響應(yīng)數(shù)據(jù)。
   • 解碼 base64 字符串為字節(jié)數(shù)組，創(chuàng)建一個(gè)表示圖像的 Blob 對(duì)象。
   • 使用 URL.createObjectURL(blob) 創(chuàng)建用于在瀏覽器中預(yù)覽的 URL。
   • 使用 this.$nextTick() 來確保在組件更新后執(zhí)行代碼。
   • 最后，如果存在 this.$refs.myImg，將圖像的 showViewer 屬性設(shè)置為 true，用于顯示圖像查看器。

   • ? <el-image

     ? ? ? class="my-img"

     ? ? ? v-if="imageUrl"

     ? ? ? ref="myImg"

     ? ? ? :src="imageUrl"

     ? ? ? :preview-src-list="[imageUrl]"

     ? ? >

     ? ? </el-image>

6. ）如果文件類型既不是 'pdf' 也不是圖像格式，則可能會(huì)顯示一條警告消息，（// this.$message.warning('暫不支持該格式預(yù)覽');）。

總體而言，該函數(shù)用于處理文件預(yù)覽的邏輯，支持預(yù)覽 '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;
    },

?三、如果要直接打開彈窗，與預(yù)覽圖片：

通俗的理解為：計(jì)算機(jī)是無法直接對(duì)base64數(shù)據(jù)進(jìn)行處理的，不論是其他類型字符串、數(shù)字什么的也好，計(jì)算機(jī)可以理解的語言其實(shí)是二進(jìn)制數(shù)據(jù)。因此我們需要將信息轉(zhuǎn)化成計(jì)算機(jī)可以理解的二進(jìn)制數(shù)據(jù)，所以需要先解碼，此時(shí)我們得到的是原始的二進(jìn)制 數(shù)據(jù)，但是由于我們最終需要的是一個(gè)url，因此我們需要繼續(xù)對(duì)這個(gè)原始二進(jìn)制數(shù)據(jù)處理。首先使用Unicode 編碼，這一步是為了處理一些特殊的文件格式，比如 PDF，可能某些文件格式使用非常規(guī)的編碼方式，需要在 JavaScript 中進(jìn)行適當(dāng)?shù)霓D(zhuǎn)換，以便后續(xù)處理。接著類型化數(shù)組來表示二進(jìn)制數(shù)據(jù)，再將類型化數(shù)組（如 Uint8Array）轉(zhuǎn)換為 Blob 對(duì)象，因?yàn)轭愋突瘮?shù)組處理過的數(shù)據(jù)會(huì)更適合blob方法處理會(huì)更高效，Blob 對(duì)象是一種表示二進(jìn)制大對(duì)象的標(biāo)準(zhǔn)化方式，此時(shí)我們得到的二進(jìn)制數(shù)據(jù)就是標(biāo)準(zhǔn)化的我們所需要的二進(jìn)制計(jì)算機(jī)可以理解的數(shù)據(jù)了，就可以使用方法得到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('暫不支持該格式預(yù)覽');
    },

四、詳細(xì)解釋一下具體的使用到的函數(shù)方法：

1）atob()

在JavaScript中，atob() 函數(shù)用于解碼Base64編碼的字符串。在這里，const byteCharacters = atob(base64Str); 這一行代碼的目的是將Base64編碼的字符串 base64Str 解碼為原始的二進(jìn)制數(shù)據(jù)，存儲(chǔ)在 byteCharacters 變量中。

解釋一下具體的步驟：

1. atob() 函數(shù)是Base64解碼函數(shù)，它接受一個(gè)Base64編碼的字符串作為參數(shù)，并返回解碼后的原始二進(jìn)制數(shù)據(jù)。

2. base64Str 是一個(gè)包含Base64編碼數(shù)據(jù)的字符串，通常是從服務(wù)器端獲取的文件內(nèi)容以Base64編碼的形式傳輸。

3. 調(diào)用 atob(base64Str) 將Base64編碼的字符串解碼為原始的二進(jìn)制數(shù)據(jù)，并將結(jié)果存儲(chǔ)在 byteCharacters 變量中。

在文件預(yù)覽的上下文中，這一步是為了將服務(wù)器返回的Base64編碼的文件內(nèi)容解碼為原始二進(jìn)制數(shù)據(jù)，以便后續(xù)可以處理和使用這些數(shù)據(jù)，比如創(chuàng)建Blob對(duì)象用于文件預(yù)覽。

2）new Array(）

在這一步 const byteNumbers = new Array(byteCharacters.length); 中，代碼創(chuàng)建了一個(gè)新的數(shù)組 byteNumbers，其長度為 byteCharacters.length。這一步的意義和作用：

1. byteCharacters 是之前通過 atob() 函數(shù)解碼得到的原始二進(jìn)制數(shù)據(jù)，通常是代表文件內(nèi)容的字節(jié)數(shù)據(jù)。

2. byteCharacters.length 返回 byteCharacters 數(shù)組的長度，即字節(jié)數(shù)。

3. new Array(byteCharacters.length) 創(chuàng)建了一個(gè)新的數(shù)組，其長度為 byteCharacters.length。這個(gè)數(shù)組用于存儲(chǔ)將字節(jié)數(shù)據(jù)轉(zhuǎn)換為數(shù)字的結(jié)果。

4. 在 JavaScript 中，new Array(length) 創(chuàng)建一個(gè)具有指定長度的新數(shù)組。在這里，我們使用 byteCharacters.length 作為數(shù)組的長度。

這一步的目的是為了準(zhǔn)備一個(gè)數(shù)組，以便后續(xù)將字節(jié)數(shù)據(jù)轉(zhuǎn)換為數(shù)字。每個(gè)元素將用于存儲(chǔ)一個(gè)字節(jié)的數(shù)值。這通常是為了進(jìn)一步處理二進(jìn)制數(shù)據(jù)，例如將它們用于創(chuàng)建 Blob 對(duì)象、ArrayBuffer 等。后續(xù)代碼可能會(huì)遍歷字節(jié)數(shù)據(jù)，將每個(gè)字節(jié)的數(shù)值存儲(chǔ)在數(shù)組中的相應(yīng)位置。

3）charCodeAt()

這個(gè)循環(huán)的目的是遍歷 byteCharacters 數(shù)組中的每個(gè)字符，獲取每個(gè)字符的 Unicode 編碼，并將這些編碼存儲(chǔ)到 byteNumbers 數(shù)組中。意義和作用：

1. for 循環(huán)通過變量 i 從 0 開始逐步增加，直到 byteCharacters.length - 1。這樣可以遍歷 byteCharacters 數(shù)組中的每個(gè)字符。

2. byteCharacters.charCodeAt(i) 是一個(gè)字符串方法，它返回給定位置（索引 i）的字符的 Unicode 編碼。Unicode 編碼是一個(gè)數(shù)字，表示字符在 Unicode 字符集中的位置。

3. 對(duì)于每個(gè)字符，循環(huán)將其 Unicode 編碼存儲(chǔ)在 byteNumbers 數(shù)組的相應(yīng)位置（索引 i）。

這個(gè)過程的目的是將原始二進(jìn)制數(shù)據(jù)（以字符串形式存在的字符集）轉(zhuǎn)換為對(duì)應(yīng)的數(shù)字表示形式。后續(xù)代碼可能需要使用這些數(shù)字，例如用于創(chuàng)建 Uint8Array 或其他二進(jìn)制數(shù)據(jù)結(jié)構(gòu)。在這個(gè)具體的代碼中，這些數(shù)字可能被用于創(chuàng)建表示文件內(nèi)容的二進(jìn)制數(shù)據(jù)。

Unicode 編碼： 在處理一些特殊的文件格式，比如 PDF，可能會(huì)涉及到將二進(jìn)制數(shù)據(jù)按照一定規(guī)則轉(zhuǎn)換為 Unicode 編碼。這是因?yàn)槟承┪募袷娇赡苁褂梅浅Ｒ?guī)的編碼方式，需要在 JavaScript 中進(jìn)行適當(dāng)?shù)霓D(zhuǎn)換，以便后續(xù)處理。

4）Uint8Array()

這行代碼的目的是創(chuàng)建一個(gè) Uint8Array 對(duì)象，該對(duì)象包含了之前收集的字節(jié)數(shù)據(jù)的數(shù)值表示。具體的意義和作用：

1. Uint8Array 是 JavaScript 中的一種類型化數(shù)組（TypedArray），它表示一個(gè)包含 8 位無符號(hào)整數(shù)的二進(jìn)制數(shù)據(jù)緩沖區(qū)。

2. byteNumbers 是之前通過遍歷 byteCharacters 字符串得到的包含每個(gè)字符 Unicode 編碼的數(shù)組。

3. new Uint8Array(byteNumbers) 創(chuàng)建了一個(gè)新的 Uint8Array 對(duì)象，該對(duì)象的內(nèi)容是由 byteNumbers 數(shù)組提供的數(shù)值。

4. 這樣得到的 byteArray 對(duì)象實(shí)際上是一個(gè)包含了文件內(nèi)容的二進(jìn)制數(shù)據(jù)，其中每個(gè)元素都是一個(gè) 8 位無符號(hào)整數(shù)，對(duì)應(yīng)于之前字節(jié)數(shù)據(jù)的數(shù)值表示。

這一步的目的是將之前的字符編碼數(shù)組轉(zhuǎn)換為類型化數(shù)組，以便后續(xù)可以更方便地進(jìn)行二進(jìn)制數(shù)據(jù)的處理和操作。通常，這樣的數(shù)組可以用于創(chuàng)建諸如 Blob 對(duì)象、ArrayBuffer 等二進(jìn)制數(shù)據(jù)結(jié)構(gòu)。在這個(gè)具體的代碼中，byteArray 可能會(huì)用于創(chuàng)建表示文件內(nèi)容的 Blob 對(duì)象，用于文件預(yù)覽等操作。

5）Blob(）

這行代碼的目的是創(chuàng)建一個(gè) Blob 對(duì)象，用于表示二進(jìn)制大對(duì)象，其中包含了之前轉(zhuǎn)換的文件內(nèi)容的二進(jìn)制數(shù)據(jù)。意義和作用：

1. Blob 是 JavaScript 中的一個(gè)對(duì)象，用于表示二進(jìn)制大對(duì)象（Binary Large Object）。它通常用于存儲(chǔ)二進(jìn)制數(shù)據(jù)，比如文件內(nèi)容。

2. new Blob([byteArray], { type: 'application/pdf' }) 創(chuàng)建了一個(gè)新的 Blob 對(duì)象，其中 byteArray 是之前創(chuàng)建的 Uint8Array 對(duì)象，它包含了文件內(nèi)容的二進(jìn)制數(shù)據(jù)。

3. 第一個(gè)參數(shù) [byteArray] 是一個(gè)數(shù)組，表示 Blob 對(duì)象的內(nèi)容。在這里，我們將 byteArray 放入數(shù)組中，作為 Blob 對(duì)象的二進(jìn)制數(shù)據(jù)內(nèi)容。

4. 第二個(gè)參數(shù) { type: 'application/pdf' } 指定了 Blob 對(duì)象的 MIME 類型。在這個(gè)具體的例子中，類型被指定為 'application/pdf'，表明這是一個(gè) PDF 文件。

5. 注意：對(duì)于圖片而言，瀏覽器通?？梢酝ㄟ^文件擴(kuò)展名等方式自動(dòng)識(shí)別圖像類型，因此在創(chuàng)建 Blob 對(duì)象時(shí)不強(qiáng)制指定類型是合理的。因?yàn)闉g覽器在處理圖像時(shí)通常會(huì)根據(jù)文件的內(nèi)容自動(dòng)識(shí)別圖像格式。

6. 而對(duì)于預(yù)覽 PDF 文件的情況，指定了 { type: 'application/pdf' } 作為 MIME 類型。這是因?yàn)?PDF 文件不一定包含文件擴(kuò)展名等能夠讓瀏覽器自動(dòng)識(shí)別的信息，因此通過指定明確的 MIME 類型可以確保正確地將二進(jìn)制數(shù)據(jù)解釋為 PDF 文件。

   對(duì)于其他類型的文件，你可以根據(jù)需要指定適當(dāng)?shù)?MIME 類型。例如，Word 文檔通常使用 'application/msword' 或 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' 等類型。指定正確的 MIME 類型有助于確保瀏覽器正確解釋和處理文件內(nèi)容。如果未指定類型，瀏覽器將嘗試根據(jù)文件內(nèi)容自動(dòng)確定，但這不總是可靠的。

這一步的目的是創(chuàng)建一個(gè)表示文件內(nèi)容的 Blob 對(duì)象，方便后續(xù)在瀏覽器中進(jìn)行預(yù)覽。通常，這個(gè) Blob 對(duì)象可以被用于創(chuàng)建一個(gè) URL，然后用于打開文件預(yù)覽窗口或其他相關(guān)操作。

6）URL.createObjectURL(）

這行代碼的目的是使用 URL.createObjectURL() 方法創(chuàng)建一個(gè)包含 Blob 對(duì)象內(nèi)容的 URL。具體的意義和作用：

1. URL.createObjectURL(blob) 是一個(gè) Web API 方法，它接受一個(gè) Blob 對(duì)象作為參數(shù)，并返回一個(gè)表示該 Blob 對(duì)象內(nèi)容的 URL。

2. blob 是之前創(chuàng)建的包含文件內(nèi)容的 Blob 對(duì)象。

3. URL.createObjectURL(blob) 將 blob 對(duì)象轉(zhuǎn)換為一個(gè) URL，該 URL 可以用于在瀏覽器中訪問 Blob 對(duì)象的內(nèi)容。

4. this.fileUrl = ... 將生成的 URL 存儲(chǔ)在對(duì)象的 fileUrl 屬性中。這個(gè)屬性可能被后續(xù)代碼用于在瀏覽器中進(jìn)行文件預(yù)覽。

這一步的目的是為了獲得一個(gè)用于預(yù)覽文件內(nèi)容的 URL，通常用于將文件內(nèi)容嵌入到頁面中或者在新窗口中打開。

7）為什么在這個(gè)過程中會(huì)選擇使用類型化數(shù)組（Uint8Array）

1. 二進(jìn)制數(shù)據(jù)的表示： 在JavaScript中，通常使用字符串表示文本數(shù)據(jù)，而不是直接操作二進(jìn)制數(shù)據(jù)。但在處理文件、圖像等二進(jìn)制數(shù)據(jù)時(shí)，直接使用字符串可能不夠高效。

2. Uint8Array： Uint8Array 是一種類型化數(shù)組，它表示一個(gè)包含 8 位無符號(hào)整數(shù)的二進(jìn)制數(shù)據(jù)緩沖區(qū)。這意味著每個(gè)元素都可以存儲(chǔ)一個(gè)字節(jié)的數(shù)據(jù)。

3. 二進(jìn)制數(shù)據(jù)的處理： 將二進(jìn)制數(shù)據(jù)存儲(chǔ)在 Uint8Array 中，相比于字符串，提供了更直接、更高效的方式來處理二進(jìn)制數(shù)據(jù)。你可以方便地遍歷、修改、截取等操作，而無需擔(dān)心字符編碼等細(xì)節(jié)。

4. Blob 構(gòu)造： Blob 構(gòu)造函數(shù)通常接受一個(gè)類型化數(shù)組作為參數(shù)，因?yàn)樗芨玫剡m應(yīng)二進(jìn)制數(shù)據(jù)的結(jié)構(gòu)。Uint8Array 就是這樣的一種類型化數(shù)組，可以直接用于創(chuàng)建 Blob 對(duì)象。

5. 二進(jìn)制數(shù)據(jù)的標(biāo)準(zhǔn)化： 使用 Uint8Array 作為中間步驟，有助于確保二進(jìn)制數(shù)據(jù)在進(jìn)行Blob構(gòu)造等操作時(shí)，處于一種標(biāo)準(zhǔn)化和易處理的形式。

短而言之，Uint8Array 提供了一種更直接、更高效地處理二進(jìn)制數(shù)據(jù)的方式，適合在文件、圖像等場景下進(jìn)行操作。在這個(gè)具體的代碼中，它有助于確保二進(jìn)制數(shù)據(jù)的結(jié)構(gòu)和格式得到正確處理，以便后續(xù)的 Blob 構(gòu)造和 URL 創(chuàng)建。文章來源地址http://www.zghlxwxcb.cn/news/detail-802310.html

到了這里，關(guān)于vue：處理base64格式文件pdf、圖片預(yù)覽的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！