VueJS PDF网页视图

pkwftd7m 于 2023-01-27 发布在 Vue.js

关注(0)|答案(2)|浏览(102)

你好，我正在尝试添加一个pdf的网页视图到我的vue js vuetify项目。我选择了vue-pdf https://github.com/FranckFreiburger/vue-pdf。
我的pdf源代码是直接来作为一个网址和代码是这样的。

<template>
  <pdf src="https://lovezwl.vip/pdf.pdf"></pdf>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  }
}

然后我得到一个错误
CORS策略已阻止从源“http://localhost:8083 "在”https://lovezwl.vip/pdf.pdf“提取数据的访问权限：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明响应满足您的需要，请将请求的模式设置为“no-cors”以在禁用CORS的情况下提取资源。
据我所知，CORS是服务器端的东西，不是前端的东西，但是现在我在后端什么都做不了，我必须从前端想办法，有没有办法克服这个错误？
或者你们知道有没有其他的库可以很好地使用URL作为pdf源代码？

vue.js

来源：https://stackoverflow.com/questions/57751659/vuejs-pdf-web-view

2条答案

按热度按时间

mqkwyuun1#

在你的请求中加上“风尚”号。

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

赞(0）回复(0）举报 2023-01-27

bksxznpy2#

vue-pdf内部使用XMLHttpRequest。您需要配置PDF所在的服务器（lovezwl.vip）以发送CORS标头，从而允许本地服务器（localhost）获取您的文档。至少发送如下标头：

Access-Control-Allow-Origin: "*"

当然，您可以设置一个更符合您情况的限制性更强的标题。
如果您无法控制服务器并且无法更改配置，则无法使用vue-pdf嵌入此PDF文件。

赞(0）回复(0）举报 2023-01-27

我来回答

VueJS PDF网页视图

2条答案

相关问题

热门标签

最新问答