从服务器加载pdf并嵌入Vue应用程序

Question

我有一个返回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((的技巧对我来说是行不通的。

Answer 1

首先将您期望的responseType更改为"blob"：

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

还将二进制响应转换为Blob，然后生成对象url:

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

使用完revokeObjectURL后，不要忘记使用它，以避免内存泄漏。