VueJS PDF 网页视图

Question

嗨，我正在尝试将pdfWeb视图添加到我的vue js vuetify项目中。 我为此选择了 vue-pdf https://github.com/FranckFreiburger/vue-pdf。

我的pdf src直接作为URL出现，代码是这样的。

<template>
<pdf src="https://lovezwl.vip/pdf.pdf"></pdf>
</template>
<script>
import pdf from 'vue-pdf'
export default {
components: {
pdf
}
}

然后我收到一个错误

访问从源"https://lovezwl.vip/pdf.pdf"获取 "http://localhost:8083"已被 CORS 策略阻止：否 "访问控制允许源"标头存在于请求的上 资源。如果不透明响应满足您的需求，请将请求的 模式为"no-cors"，以在禁用 CORS 的情况下获取资源。

据我所知，CORS是处理服务器的东西，而不是前端。但是这一刻我在后端什么都做不了，我必须 从前端找出一种方法。有没有办法克服这个错误。

或者你们知道任何其他库都可以很好地使用 URL 作为 pdf 源吗？

Answer 1

在您的请求中添加"mode"no-cors。

pdf.createLoadingTask({
url: 'www.example.com',
withCredentials: false,
httpHeaders: {
"mode": "no-cors",
"cache": "no-cache",
},
})

Answer 2

vue-pdf内部使用XMLHttpRequest。您需要将 PDF 所在的服务器 (lovezwl.vip( 配置为发送 CORS 标头，以允许本地服务器(本地主机(获取文档。至少发送一个标题，例如：

Access-Control-Allow-Origin: "*"

当然，您可以设置一个更严格的标题，以更适合您的情况。

如果您无法控制服务器并且无法更改配置，则无法使用 vue-pdf 嵌入此 PDF 文件。