亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

從服務器加載 pdf 并嵌入到 Vue 應用程序中

從服務器加載 pdf 并嵌入到 Vue 應用程序中

鴻蒙傳說 2023-11-12 22:08:53
我有一個返回 pdf 文件的 api。我試圖在 vue.js 中顯示它,并發現 vue-pdf 組件看起來應該可以完成這項工作。 這是github上的項目我能夠調用 API 并獲取二進制響應,但我無法將二進制數據轉換為 vue-pdf 庫可以顯示的內容。: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>我意識到,對于我的示例,我可以將 src 設置為 api 的 URL,但最終它需要添加授權標頭并與 OAuth 調用鏈接,因此它需要是一個 api 調用。我還想將 pdf 與來自另一個 api 調用的一些數據并排顯示,因此使用動態創建加載數據的錨標記的技巧并 .click() 'ing 它對我不起作用。
查看完整描述

1 回答

?
揚帆大魚

TA貢獻1799條經驗 獲得超9個贊

首先將您的預期更改responseType為“blob”:

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

還將二進制響應轉換為 a?Blob,然后生成對象 url:

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

revokeObjectURL用完后不要忘記使用,以免內存泄漏。


查看完整回答
反對 回復 2023-11-12
  • 1 回答
  • 0 關注
  • 156 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號