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

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

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

• ）preview(item) 是一個函數(shù)，接受一個參數(shù) item，其中包含了文件的相關信息。

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

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

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

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

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

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

  • <el-image
          class="my-img"
          v-if="imageUrl"
          ref="myImg"
          :src="imageUrl"
          :preview-src-list="[imageUrl]"
        >
        </el-image>

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

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

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

1）atob()

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

解釋一下具體的步驟：

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

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

• 調用 atob(base64Str) 將Base64編碼的字符串解碼為原始的二進制數(shù)據(jù)，并將結果存儲在 byteCharacters 變量中。

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

2）new Array(）

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

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

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

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

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

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

3）charCodeAt()

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

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

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

• 對于每個字符，循環(huán)將其 Unicode 編碼存儲在 byteNumbers 數(shù)組的相應位置（索引 i）。

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

Unicode 編碼： 在處理一些特殊的文件格式，比如 PDF，可能會涉及到將二進制數(shù)據(jù)按照一定規(guī)則轉換為 Unicode 編碼。這是因為某些文件格式可能使用非常規(guī)的編碼方式，需要在 JavaScript 中進行適當?shù)霓D換，以便后續(xù)處理。

4）Uint8Array()

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

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

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

• new Uint8Array(byteNumbers) 創(chuàng)建了一個新的 Uint8Array 對象，該對象的內容是由 byteNumbers 數(shù)組提供的數(shù)值。

• 這樣得到的 byteArray 對象實際上是一個包含了文件內容的二進制數(shù)據(jù)，其中每個元素都是一個 8 位無符號整數(shù)，對應于之前字節(jié)數(shù)據(jù)的數(shù)值表示。

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

5）Blob(）

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

• Blob 是 JavaScript 中的一個對象，用于表示二進制大對象（Binary Large Object）。它通常用于存儲二進制數(shù)據(jù)，比如文件內容。

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

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

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

• 注意：對于圖片而言，瀏覽器通?？梢酝ㄟ^文件擴展名等方式自動識別圖像類型，因此在創(chuàng)建 Blob 對象時不強制指定類型是合理的。因為瀏覽器在處理圖像時通常會根據(jù)文件的內容自動識別圖像格式。

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

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

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

6）URL.createObjectURL(）

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

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

• blob 是之前創(chuàng)建的包含文件內容的 Blob 對象。

• URL.createObjectURL(blob) 將 blob 對象轉換為一個 URL，該 URL 可以用于在瀏覽器中訪問 Blob 對象的內容。

• this.fileUrl = ... 將生成的 URL 存儲在對象的 fileUrl 屬性中。這個屬性可能被后續(xù)代碼用于在瀏覽器中進行文件預覽。

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

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

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

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

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

• Blob 構造： Blob 構造函數(shù)通常接受一個類型化數(shù)組作為參數(shù)，因為它能更好地適應二進制數(shù)據(jù)的結構。Uint8Array 就是這樣的一種類型化數(shù)組，可以直接用于創(chuàng)建 Blob 對象。

• 二進制數(shù)據(jù)的標準化： 使用 Uint8Array 作為中間步驟，有助于確保二進制數(shù)據(jù)在進行Blob構造等操作時，處于一種標準化和易處理的形式。

短而言之，Uint8Array 提供了一種更直接、更高效地處理二進制數(shù)據(jù)的方式，適合在文件、圖像等場景下進行操作。在這個具體的代碼中，它有助于確保二進制數(shù)據(jù)的結構和格式得到正確處理，以便后續(xù)的 Blob 構造和 URL 創(chuàng)建。

總結

到此這篇關于vue如何處理base64格式文件pdf及圖片預覽功能的文章就介紹到這了,更多相關vue處理base64格式pdf圖片預覽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論