问题标签 [react-pdf]

我环顾四周，但似乎找不到任何一起使用这两个库的示例。我的项目目前使用 react-pdf 生成 pdf 报告，但我需要将 chartjs 图表添加到我们将生成的一些新文件中。我宁愿不必使用两个不同的 pdf 库，也不必重新编码应用程序的某些部分以匹配 2 个标准。如果有一个不同的图书馆可以完成这项工作，我会接受建议。

我要转换的页面结构如下：

在图表组件中，有几种不同类型的图表，下面是一个示例：

这只是来自 react-chartjs-2 库的 barCharts。我似乎无法弄清楚如何使用 react-pdf 库将这些转换为 PDF。是否有一个图书馆可以更好地完成这项任务？

我能想到的唯一解决方案是使用 refs 来获取每个图表的画布元素，然后使用 jsPdf 将它们转换为 imgs 以嵌入到文档中......

我想创建一个简历制作器，它可以获取人们的信息并从中制作 pdf，但我之前没有使用过 PDF。我一直在互联网上搜索，我不知道从哪里开始。我得到了 jspdf、react-pdf 和其他一些包，其中一些会让我上传一个 pdf 文件，然后它会预览上传的 pdf 的页面。但这不是我想要的。我想要一个可以轻松地将我的 html 和 CSS 设计生成为 pdf 的包，它可以在我的 react 应用程序上预览并可以下载为 pdf 文件。或者也许我可以只使用 vanilla JavaScript 而不是包？或者我可能不得不在我不喜欢的后端生成 pdf - 我会在后端使用 Django？

请帮帮我！！

我有一个按预期呈现的pdf，除了一个问题，当页面的信息中包含一个很长的单词时，而不是将单词换行到换行符上，单词只是从容器中继续，离开页面，离开门谁知道在哪里。

这是造成此问题的容器之一的设置。样式后跟实际结构。

下面是页面部分的设置

这里的 data.description 是以下形式的文本：“loooooooooooooooooooooooooooooooooonnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnnggggggggggggggggggggggggggggggggggggggggggggggggg”这样的文本。容器应该打破这个词，但无论我如何尝试设置它的样式，这个词都不会响应。当碰到容器的末端时，我怎么能打破这个词？

到目前为止，我已经尝试过使用 wordWrap、wordBreak、flex、flexWrap、flexGrow/Shrink 和 overflowWrap。似乎没有任何效果

在 react-pdf 中更改加载的 pdf 布局（高度和宽度）。

这包括 ：

1. 在 reactjs 中加载 pdf
2. 修改pdf的高度和宽度。

我已经实现了一个反应网络应用程序，它使用 Chart.js 库创建图表。现在我想将此图表转换为 PNG/PDF 格式并保存。我遇到了很多图书馆，但面临着一些或其他问题。你能建议哪个图书馆最适合这种工作吗？

应用程序.js

图表.js

我正在尝试使用react-pdf呈现 pdf我面临的问题是我正在使用 URL 显示来自后端服务器的图像。但它在pdf中显示为空白。当我进一步调试时才知道，当我在突出显示的行上放置断点时，图像就会显示出来。可能没有时间从远程 URL 加载图像？

PDF 输出

任何帮助将非常感激。

注意：这些图像是在后端动态生成的。所以我不能导入它们。

我正在创建一个 React 应用程序，我必须在其中生成一个 pdf 并在单击按钮时保存该 pdf。如何将此 pdf 保存在我的本地目录中？

创建PDF.js

应用程序.js

至于现在，当我点击按钮时，什么也没有发生。就像在jsPDF中一样，我们也有.save()类似的方法来保存这个 pdf 文件？

我目前正在开发一些使用@react-pdf/renderer diegomura 作为 pdf 生成器的项目，到目前为止，我发现能够动态填充 pdf 内容是使用来自@react-pdf/renderer 的“BlobProvider”组件。

但是，blobprovider 将用户引导到一个新选项卡，我只想在 Iframe 之类的同一选项卡中显示内容（包括来自输入框的动态更改）

我试过使用 iframe，它只是生成 PDF 文档，我无法获取 pdf 文档的动态状态。我在上课前 const pdf 文档，因此状态构造函数不能传递给上面的 const

任何人都有一些解决方案或曾经发现过类似的问题吗？先感谢您。

我正在尝试使用名为 react-pdf 的库将图像从 s3 加载到 pdf 中。这是我在我的网站上显示的相同图像，并且在使用图像元素的 src 上的 url 时效果很好。但是，从 react-pdf 需要使用的特定图像组件加载时，它会失败。

我明白了：

S3 存储桶的 CORS 策略是这样的：

我尝试使用 http 请求、各种访问控制标头和新的 Image() API 来获取它，在加载时，我将其转换为画布。它似乎都不起作用。有人可以向我解释一下 CORS 在这种情况下是如何运作的，其中可以通过元素加载图像，但不能通过 http 请求加载？任何可能的解决方案都会令人惊叹。谢谢！

我已经从数据库中渲染了数据并显示在我创建的页面中。（它正确显示了所有数据一次）然后我在该类下添加了生成为 pdf 会话，它成功地将数据作为 pdf 提供。但是在页面中，数据显示了两次。我希望数据只显示一次。任何人都可以找出我的编码中的错误吗？

我的页面代码需要另存为pdf

这是一个 .jsx 页面

员工PDF.jsx

这是我得到的输出我 希望通过“打印或另存为 pdf”按钮显示一次员工详细信息

当我选择打印或另存为 pdf 按钮时，它会保存一次数据

（我使用了 react-to-print 库）