Vue 轉(zhuǎn)換PDF流并使用

  • 在編寫后臺(tái)管理系統(tǒng)時(shí)，有時(shí)候會(huì)用到PDF預(yù)覽，因?yàn)橛袝r(shí)候后臺(tái)返回來的是pdf流，不是對(duì)應(yīng)的http地址，這個(gè)時(shí)候就需要前端來進(jìn)行相應(yīng)的處理，進(jìn)行顯示，處理如下：
  1. 在發(fā)送請(qǐng)求時(shí)設(shè)置接收格式為blob格式，如下：
this.axios({
  method: "",   // 根據(jù)個(gè)人請(qǐng)求狀況，添加請(qǐng)求方式：post、get等。
  url: "",   // 添加對(duì)應(yīng)請(qǐng)求的URL
  data: "",   // 如果需要入?yún)r(shí)進(jìn)行添加使用，如若不需要入?yún)⒓纯蓜h掉對(duì)應(yīng)的屬性
  responseType: 'blob'   // 設(shè)置接收格式為blob格式
}).then((res) => {

});
  1. 請(qǐng)求成功之后在then里面進(jìn)行處理，如下：
let binaryData = [];
binaryData.push(res.data);
let image = window.URL.createObjectURL(new Blob(binaryData,{type:'application/pdf'}));
console.log(image)

對(duì)應(yīng)的總體請(qǐng)求如下

this.axios({
  method: "",   // 根據(jù)個(gè)人請(qǐng)求狀況，添加請(qǐng)求方式：post、get等。
  url: "",   // 添加對(duì)應(yīng)請(qǐng)求的URL
  data: "",   // 如果需要入?yún)r(shí)進(jìn)行添加使用，如若不需要入?yún)⒓纯蓜h掉對(duì)應(yīng)的屬性
  responseType: 'blob'   // 設(shè)置接收格式為blob格式
}).then((res) => {
  let binaryData = [];
  binaryData.push(res.data);
  let image = window.URL.createObjectURL(new Blob(binaryData,{type:'application/pdf'}));
  console.log(image)
});
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容