第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題,去搜搜看,總會(huì)有你想問(wèn)的

從服務(wù)器加載 pdf 并嵌入到 Vue 應(yīng)用程序中

從服務(wù)器加載 pdf 并嵌入到 Vue 應(yīng)用程序中

鴻蒙傳說(shuō) 2023-11-12 22:08:53
我有一個(gè)返回 pdf 文件的 api。我試圖在 vue.js 中顯示它,并發(fā)現(xiàn) vue-pdf 組件看起來(lái)應(yīng)該可以完成這項(xiàng)工作。 這是github上的項(xiàng)目我能夠調(diào)用 API 并獲取二進(jìn)制響應(yīng),但我無(wú)法將二進(jìn)制數(shù)據(jù)轉(zhuǎn)換為 vue-pdf 庫(kù)可以顯示的內(nèi)容。:src 屬性的文檔在這里我的 vue 代碼如下,其中注釋掉了一些失敗的嘗試。<template>  <pdf :src="pdfsrc"></pdf></template><script>import pdf from "vue-pdf";import axios from "axios";export default {  components: {    pdf  },  data() {    return {      pdfsrc: null    };  },  created() {    return axios      .get(`${process.env.VUE_APP_API_INTRANET}/pdf`, {        responseType: "application/pdf"      })      .then(response => {        console.log("Success", response);              // 1       // this.pdfsrc = new Blob([response.data]);              // 2       //this.pdfsrc = response.data;              //3       //   for (var i = 0; i < response.data.length; ++i) {        //   this.pdfsrc.push(response.data.charCodeAt(i) & 0xff);        //   }        //4        this.pdfsrc = new Uint8Array(response.data);      })      .catch(console.error); //  }};</script>我意識(shí)到,對(duì)于我的示例,我可以將 src 設(shè)置為 api 的 URL,但最終它需要添加授權(quán)標(biāo)頭并與 OAuth 調(diào)用鏈接,因此它需要是一個(gè) api 調(diào)用。我還想將 pdf 與來(lái)自另一個(gè) api 調(diào)用的一些數(shù)據(jù)并排顯示,因此使用動(dòng)態(tài)創(chuàng)建加載數(shù)據(jù)的錨標(biāo)記的技巧并 .click() 'ing 它對(duì)我不起作用。
查看完整描述

1 回答

?
揚(yáng)帆大魚(yú)

TA貢獻(xiàn)1799條經(jīng)驗(yàn) 獲得超9個(gè)贊

首先將您的預(yù)期更改responseType為“blob”:

return?axios.get(`${process.env.VUE_APP_API_INTRANET}/pdf`,?{
??responseType:?"blob"
??})

還將二進(jìn)制響應(yīng)轉(zhuǎn)換為 a?Blob,然后生成對(duì)象 url:

.then(response?=>?{
??console.log("Success",?response);??
??const?blob?=?new?Blob([response.data]);??
??const?objectUrl?=?URL.createObjectURL(blob);??
??this.pdfsrc?=?objectUrl;
})

revokeObjectURL用完后不要忘記使用,以免內(nèi)存泄漏。


查看完整回答
反對(duì) 回復(fù) 2023-11-12
  • 1 回答
  • 0 關(guān)注
  • 174 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)