后端返回的樣子如下圖:
請(qǐng)求里面注意設(shè)置 reponseType:'blob'
vue頁(yè)面的前端代碼如下:
Blob介紹
Blob對(duì)象表示一個(gè)不可變、原始數(shù)據(jù)的類(lèi)文件對(duì)象
。
Blob表示的不一定是JavaScript原生格式的數(shù)據(jù)。
File接口基于Blob,繼承了blob的功能并將其擴(kuò)展使其支持用戶(hù)系統(tǒng)上的文件。
Blob()構(gòu)造函數(shù)返回一個(gè)新的Blob對(duì)象。blob的內(nèi)容由參數(shù)數(shù)組中給出的值的串聯(lián)組成。
Blob語(yǔ)法
var aBlob=new Blob(array,options)
array是一個(gè)由ArrayBuffer, ArrayBufferView ,Blob, DOMString等對(duì)象構(gòu)成的Array,或者其他類(lèi)似對(duì)象的混合體,他將被放入Blob.
options是一個(gè)可選的BlobPropertyBag字段,有如下兩個(gè)屬性;
type:默認(rèn)值“”,他代表了將會(huì)被放入到blob中的數(shù)組內(nèi)容的MIME類(lèi)型;
URL.createObjectURL()
URL.createObjectURL()
靜態(tài)方法會(huì)創(chuàng)建一個(gè) DOMString
,其中包含一個(gè)表示參數(shù)中給出的對(duì)象的URL。這個(gè) URL 的生命周期和創(chuàng)建它的窗口中的 document
綁定。這個(gè)新的URL 對(duì)象表示指定的 File
對(duì)象或 Blob
對(duì)象。
語(yǔ)法
var objectURL=URL.createObjectURL(object);
參數(shù):
object用于創(chuàng)建RUL的File對(duì)象、Blob對(duì)象或者M(jìn)idiaSource對(duì)象。
返回值:
一個(gè)DOMString包含了一個(gè)對(duì)象URL,改URL可用于指定源object的內(nèi)容。
MIME類(lèi)型
媒體類(lèi)型(通常稱(chēng)為 Multipurpose Internet Mail Extensions 或 MIME 類(lèi)型 )是一種標(biāo)準(zhǔn),用來(lái)表示文檔、文件或字節(jié)流的性質(zhì)和格式。
語(yǔ)法
通用結(jié)構(gòu)
type/subtype
MIME的組成結(jié)構(gòu)非常簡(jiǎn)單;由類(lèi)型與子類(lèi)型兩個(gè)字符串中間用'/'分隔而組成。不允許空格存在。type 表示可以被分多個(gè)子類(lèi)的獨(dú)立類(lèi)別。subtype 表示細(xì)分后的每個(gè)類(lèi)型。
MIME類(lèi)型對(duì)大小寫(xiě)不敏感,但是傳統(tǒng)寫(xiě)法都是小寫(xiě)。
關(guān)于mime的具體可參看
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Basics_of_HTTP/MIME_types