vue如何處理base64格式文件pdf及圖片預覽功能
一、需求:后端返回是base64數(shù)據,需要前端處理來展示文件。

二、實現(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ù)據,將返回的 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ù)據。
- 解碼 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ù)據進行處理的,不論是其他類型字符串、數(shù)字什么的也好,計算機可以理解的語言其實是二進制數(shù)據。因此我們需要將信息轉化成計算機可以理解的二進制數(shù)據,所以需要先解碼,此時我們得到的是原始的二進制 數(shù)據,但是由于我們最終需要的是一個url,因此我們需要繼續(xù)對這個原始二進制數(shù)據處理。首先使用Unicode 編碼,這一步是為了處理一些特殊的文件格式,比如 PDF,可能某些文件格式使用非常規(guī)的編碼方式,需要在 JavaScript 中進行適當?shù)霓D換,以便后續(xù)處理。接著類型化數(shù)組來表示二進制數(shù)據,再將類型化數(shù)組(如 Uint8Array)轉換為 Blob 對象,因為類型化數(shù)組處理過的數(shù)據會更適合blob方法處理會更高效,Blob 對象是一種表示二進制大對象的標準化方式,此時我們得到的二進制數(shù)據就是標準化的我們所需要的二進制計算機可以理解的數(shù)據了,就可以使用方法得到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ù)據,存儲在 byteCharacters 變量中。
解釋一下具體的步驟:
atob()函數(shù)是Base64解碼函數(shù),它接受一個Base64編碼的字符串作為參數(shù),并返回解碼后的原始二進制數(shù)據。base64Str是一個包含Base64編碼數(shù)據的字符串,通常是從服務器端獲取的文件內容以Base64編碼的形式傳輸。調用
atob(base64Str)將Base64編碼的字符串解碼為原始的二進制數(shù)據,并將結果存儲在byteCharacters變量中。
在文件預覽的上下文中,這一步是為了將服務器返回的Base64編碼的文件內容解碼為原始二進制數(shù)據,以便后續(xù)可以處理和使用這些數(shù)據,比如創(chuàng)建Blob對象用于文件預覽。
2)new Array()
在這一步 const byteNumbers = new Array(byteCharacters.length); 中,代碼創(chuàng)建了一個新的數(shù)組 byteNumbers,其長度為 byteCharacters.length。這一步的意義和作用:
byteCharacters是之前通過atob()函數(shù)解碼得到的原始二進制數(shù)據,通常是代表文件內容的字節(jié)數(shù)據。byteCharacters.length返回byteCharacters數(shù)組的長度,即字節(jié)數(shù)。new Array(byteCharacters.length)創(chuàng)建了一個新的數(shù)組,其長度為byteCharacters.length。這個數(shù)組用于存儲將字節(jié)數(shù)據轉換為數(shù)字的結果。在 JavaScript 中,
new Array(length)創(chuàng)建一個具有指定長度的新數(shù)組。在這里,我們使用byteCharacters.length作為數(shù)組的長度。
這一步的目的是為了準備一個數(shù)組,以便后續(xù)將字節(jié)數(shù)據轉換為數(shù)字。每個元素將用于存儲一個字節(jié)的數(shù)值。這通常是為了進一步處理二進制數(shù)據,例如將它們用于創(chuàng)建 Blob 對象、ArrayBuffer 等。后續(xù)代碼可能會遍歷字節(jié)數(shù)據,將每個字節(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ù)據(以字符串形式存在的字符集)轉換為對應的數(shù)字表示形式。后續(xù)代碼可能需要使用這些數(shù)字,例如用于創(chuàng)建 Uint8Array 或其他二進制數(shù)據結構。在這個具體的代碼中,這些數(shù)字可能被用于創(chuàng)建表示文件內容的二進制數(shù)據。
Unicode 編碼: 在處理一些特殊的文件格式,比如 PDF,可能會涉及到將二進制數(shù)據按照一定規(guī)則轉換為 Unicode 編碼。這是因為某些文件格式可能使用非常規(guī)的編碼方式,需要在 JavaScript 中進行適當?shù)霓D換,以便后續(xù)處理。
4)Uint8Array()
這行代碼的目的是創(chuàng)建一個 Uint8Array 對象,該對象包含了之前收集的字節(jié)數(shù)據的數(shù)值表示。具體的意義和作用:
Uint8Array是 JavaScript 中的一種類型化數(shù)組(TypedArray),它表示一個包含 8 位無符號整數(shù)的二進制數(shù)據緩沖區(qū)。byteNumbers是之前通過遍歷byteCharacters字符串得到的包含每個字符 Unicode 編碼的數(shù)組。new Uint8Array(byteNumbers)創(chuàng)建了一個新的Uint8Array對象,該對象的內容是由byteNumbers數(shù)組提供的數(shù)值。這樣得到的
byteArray對象實際上是一個包含了文件內容的二進制數(shù)據,其中每個元素都是一個 8 位無符號整數(shù),對應于之前字節(jié)數(shù)據的數(shù)值表示。
這一步的目的是將之前的字符編碼數(shù)組轉換為類型化數(shù)組,以便后續(xù)可以更方便地進行二進制數(shù)據的處理和操作。通常,這樣的數(shù)組可以用于創(chuàng)建諸如 Blob 對象、ArrayBuffer 等二進制數(shù)據結構。在這個具體的代碼中,byteArray 可能會用于創(chuàng)建表示文件內容的 Blob 對象,用于文件預覽等操作。
5)Blob()
這行代碼的目的是創(chuàng)建一個 Blob 對象,用于表示二進制大對象,其中包含了之前轉換的文件內容的二進制數(shù)據。意義和作用:
Blob是 JavaScript 中的一個對象,用于表示二進制大對象(Binary Large Object)。它通常用于存儲二進制數(shù)據,比如文件內容。new Blob([byteArray], { type: 'application/pdf' })創(chuàng)建了一個新的Blob對象,其中byteArray是之前創(chuàng)建的Uint8Array對象,它包含了文件內容的二進制數(shù)據。第一個參數(shù)
[byteArray]是一個數(shù)組,表示Blob對象的內容。在這里,我們將byteArray放入數(shù)組中,作為Blob對象的二進制數(shù)據內容。第二個參數(shù)
{ type: 'application/pdf' }指定了Blob對象的 MIME 類型。在這個具體的例子中,類型被指定為 'application/pdf',表明這是一個 PDF 文件。注意:對于圖片而言,瀏覽器通??梢酝ㄟ^文件擴展名等方式自動識別圖像類型,因此在創(chuàng)建
Blob對象時不強制指定類型是合理的。因為瀏覽器在處理圖像時通常會根據文件的內容自動識別圖像格式。而對于預覽 PDF 文件的情況,指定了
{ type: 'application/pdf' }作為 MIME 類型。這是因為 PDF 文件不一定包含文件擴展名等能夠讓瀏覽器自動識別的信息,因此通過指定明確的 MIME 類型可以確保正確地將二進制數(shù)據解釋為 PDF 文件。對于其他類型的文件,你可以根據需要指定適當?shù)?MIME 類型。例如,Word 文檔通常使用
'application/msword'或'application/vnd.openxmlformats-officedocument.wordprocessingml.document'等類型。指定正確的 MIME 類型有助于確保瀏覽器正確解釋和處理文件內容。如果未指定類型,瀏覽器將嘗試根據文件內容自動確定,但這不總是可靠的。
這一步的目的是創(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ù)據的表示: 在JavaScript中,通常使用字符串表示文本數(shù)據,而不是直接操作二進制數(shù)據。但在處理文件、圖像等二進制數(shù)據時,直接使用字符串可能不夠高效。
Uint8Array:
Uint8Array是一種類型化數(shù)組,它表示一個包含 8 位無符號整數(shù)的二進制數(shù)據緩沖區(qū)。這意味著每個元素都可以存儲一個字節(jié)的數(shù)據。二進制數(shù)據的處理: 將二進制數(shù)據存儲在
Uint8Array中,相比于字符串,提供了更直接、更高效的方式來處理二進制數(shù)據。你可以方便地遍歷、修改、截取等操作,而無需擔心字符編碼等細節(jié)。Blob 構造:
Blob構造函數(shù)通常接受一個類型化數(shù)組作為參數(shù),因為它能更好地適應二進制數(shù)據的結構。Uint8Array就是這樣的一種類型化數(shù)組,可以直接用于創(chuàng)建Blob對象。二進制數(shù)據的標準化: 使用
Uint8Array作為中間步驟,有助于確保二進制數(shù)據在進行Blob構造等操作時,處于一種標準化和易處理的形式。
短而言之,Uint8Array 提供了一種更直接、更高效地處理二進制數(shù)據的方式,適合在文件、圖像等場景下進行操作。在這個具體的代碼中,它有助于確保二進制數(shù)據的結構和格式得到正確處理,以便后續(xù)的 Blob 構造和 URL 創(chuàng)建。
總結
到此這篇關于vue如何處理base64格式文件pdf及圖片預覽功能的文章就介紹到這了,更多相關vue處理base64格式pdf圖片預覽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
vue使用webPack打包發(fā)布后頁面顯示空白的解決
這篇文章主要介紹了vue使用webPack打包發(fā)布后頁面顯示空白的解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06
可控制緩存銷毀的?keepAlive?組件實現(xiàn)詳解
這篇文章主要為大家介紹了可控制緩存銷毀的?keepAlive?組件實現(xiàn)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10
vue init webpack myproject構建項目 ip不能訪問的解決方法
下面小編就為大家分享一篇vue init webpack myproject構建項目 ip不能訪問的解決方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03

