问题标签 [vue-pdf]

我正在使用最新的 vue-pdf 包在我的应用程序中显示 pdf 文件。我构建了这个组件，PdfViewer：

基本上我收到一个文件名作为道具，然后在我在getAttachmentsgetter 中收到的对象中查找它的 URL。文件名位于不同的列表组件中。

它在第一次运行时运行良好，并且第一个文件已成功加载并显示。但是一旦单击另一个文件名 - 什么都没有显示。我确实收到了文件名道具，它确实找到了 URL，但文件没有显示。即使我点击已经显示的文件 - 现在它没有。

我想也许它与src和numberOfPages属性有关，所以我尝试在加载文件之前重置它们：

唉，同样的结果。在控制台中，我看到来自 pdf.worker.js 的以下警告：Warning: TT: invalid function id: 9

不知道这意味着什么。

请问有什么帮助吗？

编辑

我尝试使用 async/await 和 forceUpdate 来做到这一点：

那也没有帮助。但是我发现一旦我更改了传递的文件名，代码确实会转到该init()方法，但由于某种原因它跳过了该loadingTask.promise.then部分，没有进入。我必须知道为什么。

我正在使用 Laravel 和 Vue 创建一个 SPA，并尝试使用 vue-pdf。我已经成功集成了几个 npm 包，但是这个包给了我错误：

当我在控制台中单击文件 (worker.js) 时，它似乎正在尝试对我网站上的常规页面执行获取请求，而不是获取 javascript，所以我的预感是 webpack 没有正确地转译 vue- .pdf 我当前的 webpack 配置是：

任何帮助，将不胜感激。

我有一个返回pdf文件的api。我试图在 vue.js 中显示它，并找到了看起来应该可以完成工作的 vue-pdf 组件。 这是github上的项目

我能够调用 API 并获得二进制响应，但我无法将二进制数据转换为 vue-pdf 库可以显示的内容。

:src 道具的文档在这里

我的 vue 代码如下，其中一些失败的尝试被注释掉了。

我意识到，对于我的示例，我可以将 src 设置为 api 的 URL，但最终它将需要添加授权标头并与 OAuth 调用链接，因此它需要是一个 api 调用。

我还想将 pdf 与来自另一个 api 调用的一些数据并排显示，因此使用动态创建加载数据和 .click() 的锚标记的技巧对我不起作用。

我正在尝试使用 vue-pdf 库将 API 中的多页 pdf 加载到 vue.js 中。

我已经可以成功加载 pdf 并呈现第一页，如前面的问题中所述

我已经按照文档中给出的说明进行了 尝试，并尝试了使用 / 不使用 loadingTask 并使用不同的页数选项。

我附上了下面的代码。这个版本没有显示页码，也没有pdf。控制台有“loadPdf called”和“success”日志消息并且没有错误。

我正在使用总共 46kb 的小 3 页 pdf 进行测试。我最接近让它工作的方法是将页数硬编码为 3，从而正确呈现 pdf。例如

它有效，但显然不是解决方案！

我还尝试了其他加载“numPages”的方法，例如将其添加到 pdf

并使用返回 this.pdf.numPages 的计算

但到目前为止，一切都失败了。

我也尝试过将获得 numpages 的承诺移到 loadPdf 方法中，就像这样

这也行不通。

更新

我已经按照要求在代码中添加了日志语句。一切看起来都应该正常工作。

更新 2

我已经清理了我的示例并删除了此行

从模板开始，一切都开始了！我已经追溯了代码中的更改，似乎将对象 url 包装在 loadingTask 中并将承诺移至 loadPdf() 方法是修复它的原因。

我将 vue-pdf 放在容器中，但是 pdf 会以容器的宽度呈现宽度，我如何编写代码让 pdf 呈现原始宽度。

我将 vue-pdf 用于 pdf-viewer。但我有这个错误。

这是我的代码

这是错误图片

请帮我。

我有一个页面，用户可以在其中上传几个 pdf 文件。我想在每次添加文件时向用户预览它们。我用 vue-pdf 打印 pdf，例如：

因此，这段代码应该在用户每次上传一个或多个文件时预览一个或多个文件，他们可以这样做一次或多次。我的问题是第一个文件的 pageCount 没问题，然后对于下一个文件，加载任务似乎没有做任何事情，所以 pageCout 是未定义的。但是如果我添加另一个文件，它将具有正确的 pageCount。所以 pageCount 每两个文件都是未定义的，我不明白为什么

当我在热重载模式下运行 Vue 应用程序时， vue-pdf工作（我看到渲染的 PDF），但是当我构建项目时，它不起作用（PDF 不显示），我看到控制台中的错误：

GET http://client.resolutewl.com/bfa0c7848d81ecc3380c.worker.js 404 (NOT FOUND)

在热重载模式下运行 Vue 应用程序时网页的外观：

使用构建代码时的外观（包括错误消息）：

可能相关的链接

• Vue pdf在构建后无法在chrome中工作
• worker.js 的绝对路径

我已使用此 [文档][1] 安装了 VuePdfApp 版本：'2.1.0'。

不幸的是，在“vue-pdf-app”中找不到它的节目（导入为“VuePdfApp”）并且无法在 Vue2 中使用。

在所有示例中，他们都使用此行来导入，但在我的情况下不是import VuePdfApp from 'vue-pdf-app';

在 VueJS 2 中导入 VuePdfApp 的正确方法是什么。
[1]：https ://www.npmjs.com/package/vue-pdf-app

我已将 PDFJS 与 Nuxt.js 集成以呈现具有基本功能的 pdf 文档。

当使用“在文档中查找”来搜索 pdf 中跨多行的文本时，我没有找到文档中存在的文本的结果。

例如：在文档中搜索短语“披露和维护机密”是没有结果的。 无结果-pdf-img

但是，当搜索为

这是为两行渲染的 html - inspect-element-img

参考： 我按照此处提供的示例创建了我的 pdf 渲染器 - https://codesandbox.io/s/vue-2-vue-pdf-app-wz5kv

我已经添加了这段代码

有人可以帮我理解这里的问题是什么。有没有办法以编程方式删除新行中的空格。

提前致谢。