Vue3显示PDF文档

Question

我可以抓取图像并使用它们作为字节数组在浏览器中显示它们，没有任何问题。在普通c#中，我也可以很容易地通过插入这个字节数组来处理pdf，但是现在在ve3中，我在做同样的事情时遇到了麻烦。用Vuejs在浏览器中显示PDF文档的简单方法是什么?

这是我过去的做法，我愿意听取建议和更好的方法来做到这一点。这将在大屏幕电视上播放，以便部门可以查看文件，并将其闪烁到其他部门。

<div v-if="byteArrayPDF" class="content">
<object data="byteArrayPDF" type="application/pdf" style="height:700px;width:1100px;"></object>
</div>
</div>
</template>
<script lang="js">
import Vue from 'vue';
export default Vue.extend({
data() {
return {
loading: false,
byteArrayPDF: null
};
},
created() {
this.fetchByteArray();
},
methods: {
fetchByteArray() {
this.byteArrayPDF = true;
this.loading = null;

fetch('https://localhost:5001/api/Doc/Virtual-Visual-Service-2020.pdf')
.then(response => response.json())
.then(bytespdf => {
this.byteArrayPDF = "data:application/pdf;base64," + bytespdf;
this.loading = false;
return;
})
.catch(console.log("Error PDF View"));
}

Answer 1

从你的问题来看，我认为你想要加载一个pdf例如，导入一个"价值组件"。如果这是正确的，您可以使用如下代码:

<template>
<div v-if="byteArrayPDF">
<iframe :src="srcData" width="100%" height="500px">
</iframe>
</div>
<div v-else>
loading...
</div>
</template>
<script>
export default {
name: "CompoPdf",
data() {
return {
srcData: null,
byteArrayPDF: false,
}
},
created() {
this.fetchByteArray();
},
methods: {
fetchByteArray: async function () {
// to see the "loading..." effect, I intentionally add a "setTimeout" code. that loads the pdf after "3s". You can remove it in your real app.
await new Promise(resolve => setTimeout(resolve, 3000));
fetch('https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf')
.then(response => {
console.log(response);
// for this case "response.url" is what we need, but if you fetch data for example from a database ... you may need "response.json()" or other codes;
this.srcData = response.url;
this.byteArrayPDF = true;
})
}
}
}
</script>
<style scoped>
</style>

我也建议你阅读更多关于获取API和CORS，如果你不熟悉这些主题，以更好地管理你的请求到你想要的url。