我用来react-pdf通过 CRA 在 React 中渲染 PDF，然后像这样导入它：
import { Document, Page } from "react-pdf/dist/esm/entry.webpack";
现在，我尝试使用以下 webpack 配置来实现 SSR：
// webpack.server.conf
const path = require("path");
const webpackNodeExternals = require("webpack-node-externals");
module.exports = {
target: "node",
entry: "./server/index.tsx",
output: {
filename: "bundle.js",
path: path.resolve(__dirname, "build-server"),
},
resolve: {
extensions: [".ts", ".tsx", ".js"],
modules: [path.resolve(__dirname, "src"), "node_modules"],
},
externals: [webpackNodeExternals()], // excludes node modules in Webpack
module: {
rules: [
{
test: /\.tsx?$/,
loader: "ts-loader",
options: {
configFile: "tsconfig.server.json",
},
},
// we …在我的 ReactJS 应用程序中，我需要添加放大/缩小功能。我正在使用react-pdf在我的网络应用程序中显示 PDF。文档的A/C有一个scale prop我可以使用它scale的 pdf 页面。
但是使用scale prop并没有向我显示zoom因子的任何变化。这是code我用来这样做的。
<Document
loading=""
file={file}
className="document"
onLoadSuccess={(transport) => onLoadSuccess(transport, sectionIndex)}>
<Page width={900} scale={30} className="page" pageNumber={1} />
</Document>
我试过以下值，scale prop但似乎没有得到任何东西。1.5、0.5、10、30、40。有没有更好的方法来做同样的事情，或者我错过了什么？
我正在创建一个使用 QR 码的 ReactJS 应用程序，我希望能够一次打印包含一批代码的 PDF 文档。我目前正在使用react-qr-svg来生成代码和@react-pdf/renderer来创建文档。问题是我无法在文档上显示这些二维码。
首先，我尝试使用来自 @react-pdf/renderer 的 Image 标签，如下所示：
<Image
src={<QRCode
level="Q"
style={{width: 256, marginBottom: 50 }}
value={'hello world'}
/>}
/>
Whick 当然不起作用，之后我尝试将 SVG 转换为数据缓冲区，但没有结果。
有什么直接的解决方案吗？我应该为此项目使用其他库吗？
我目前正在使用 QRcode.react 来生成代码并@react-pdf/renderer创建 pdf 文档。
var QRCode = require('qrcode.react');
< QRCode value="http://facebook.github.io/react/" />
问题：二维码仅在 pdf 文档之外有效。我希望二维码可以显示在pdf文档上。
那么，有什么办法解决这个问题吗？
我正在使用 ReactJS 开发一个课程平台。当用户完成课程后，他可以下载 PDF 文件。
我需要与图像（png 或 jpg）相同的文件的版本，但我还没有找到任何方法来做到这一点。有人能帮我吗？
为了生成 PDF 证书，我使用库：React-PDF。
这是我生成pdf文件的代码：
<PDFDownloadLink
document={
<Certificate course={course} name={name} date={today()} />
}
fileName="somename.pdf"
>
{({ blob, url, loading, error }) => {
return loading ? 'Loading document...' : 'Download now!';
}}
</PDFDownloadLink>
我正在使用“ recharts ”为我的项目创建图表，并使用“ react-pdf ”生成报告。' Recharts ' 使用时会在 DOM 上创建一个 svg，并显示一个图表。
有没有办法可以将这两者一起使用，并通过react-pdf将我的“ recharts ”组件添加到我的报告中？例如 - 在<Document/>标签内。
我看到了一个解决方案，它可以将rechart 的svg 转换为 png，将其保存在本地，然后导入并通过<Image/>React-pdf 中的组件使用。
寻找更直接的方法来解决这个问题。
我有一个项目，我正在使用 React-pdf 生成文档。我想向此文档添加 SVG 徽标。根据React-pdf文档，他们有一个名为Svg的元素，它是一个定义新坐标系和视口的容器，它被用作SVG文档的最外层元素。据我了解，我应该以某种方式将普通的 svg 转换为 React-pdf 使用的元素类型，以便使其工作？（如果是这样，我怎样才能做到这一点？我可以使用某种外部库吗？）。我的代码如下（现在它给了我一个错误，因为我无法使用 React-pdf 中的图像来渲染 svg。如果我将 Image 元素与格式为 .jpeg 或 .png 的图像的 src 一起使用，它就可以工作。
import {
Page,
Text,
View,
Document,
StyleSheet,
Image,
Svg,
PDFViewer,
} from "@react-pdf/renderer";
...
return (
<div>
<PDFViewer style={{ width: "98vw", height: "98vh" }}>
<Document title="TITLE" author="AUTHOR">
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Svg>
<Image src={logoUrl} style={styles.logo} />
</Svg>
<Text>My PDF</Text>
</View>
</Page>
</Document>
</PDFViewer>
</div>
);
...
https://www.npmjs.com/package/react-pdf
我正在使用这个包来尝试显示 PDF 文件。
这是我当前显示的 PDF：
https://i.stack.imgur.com/uF4ER.png
正如你在这个屏幕截图中看到的，
https://i.stack.imgur.com/XSBE3.png
从 PDF 中提取文本并显示在 PDF 图像下方。我不想要这个。我只想要PDF。
这就是它在开发检查器中的样子
https://i.stack.imgur.com/Jb3x0.png
有一个我不想包含的“react-pdf__Page__textContent”类。我已经尝试创建一个 CSS 类并且不显示这样的内容：
.react-pdf__Page__textContent{
display: none;
}
但这不起作用，文本仍然出现。
我不知道文本来自哪里，因为我没有在代码中的任何位置包含“textContent”。这是我用来渲染 PDF 的代码。
pdf.js
import SinglePagePDFViewer from "../components/pdf/single-page";
import samplePDF from "../components/pdf/diy-find_mac_address.pdf";
<>
<Navbar />
<div className="pdf-wrapper">
<div className="pdf-viewer">
<SinglePagePDFViewer pdf={samplePDF} />
</div>
</div>
</>
单页.js
import React, { useState } from "react";
import { Document, Page } from "react-pdf";
export default function SinglePage(props) {
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNumber] = useState(1); //setting …在创建文件并添加代码后，我在 nextjs 中使用react-pdf和react-pdf/renderer，它工作得很好，但是当我进行生产构建时，它会继续进行构建并且永远不会停止。这是代码
import React from 'react';
import { Page, Text, View, Document, StyleSheet } from '@react-pdf/renderer';
const PDFGenerator = () => {
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#E4E4E4'
},
section: {
margin: 10,
padding: 10,
flexGrow: 1
}
});
return (
<Document>
<Page size="A4" style={styles.page}>
<View style={styles.section}>
<Text>Section #1</Text>
</View>
<View style={styles.section}>
<Text>Section #2</Text>
</View>
</Page>
</Document>
);
}
export default PDFGenerator;
我在这里使用它
<PDFDownloadLink
document={<PDFGenerator/>}
fileName="recipe.pdf"
className="button-background w-full text-center text-color py-2 px-4
rounded mt-10">
{({blob, …当我安装react-pdf时，出现以下错误：
ModuleNotFoundError: Module not found: Error: Can't resolve 'canvas' in '/home/pegasus/Documents/Final_Website/blog/node_modules/pdfjs-dist/build'
我正在尝试在盖茨比网站上呈现 pdf。但为此我需要react-pdf并且它抛出了这个错误。