服务器端的react-pdf
是一个用于在服务器端生成PDF文件的React组件库。它基于React和PDF.js开发，提供了一种简单而强大的方式来创建和操作PDF文档。
服务器端的react-pdf具有以下特点和优势：
- 基于React：使用React的组件化开发模式，可以轻松地构建复杂的PDF文档结构。
- 服务器端渲染：react-pdf可以在服务器端运行，生成PDF文件，无需依赖浏览器环境。
- 强大的功能：react-pdf支持添加文本、图像、表格、链接、书签等元素到PDF文档中，还可以进行页面布局、样式设置、事件处理等操作。
- 高度可定制：react-pdf提供了丰富的API和组件，可以根据需求自定义PDF文档的样式和内容。
- 轻量级：react-pdf是一个轻量级的库，加载速度快，生成的PDF文件大小较小。
服务器端的react-pdf适用于以下场景：
- 批量生成PDF文件：可以通过react-pdf在服务器端批量生成PDF文件，例如生成报告、发票、证书等。
- 动态生成PDF内容：可以根据用户的输入或数据动态生成PDF文件，例如生成个性化的合同、订单等。
- 导出HTML为PDF：可以将服务器端渲染的HTML页面导出为PDF文件，方便用户保存和打印。
腾讯云相关产品和产品介绍链接地址： 腾讯云提供了Serverless云函数（SCF）服务，可以与服务器端的react-pdf结合使用，实现在云函数中生成PDF文件。具体可参考腾讯云SCF产品介绍：https://cloud.tencent.com/product/scf
请注意，以上答案仅供参考，具体的技术实现和产品选择应根据实际需求和情况进行评估和决策。
相关·内容
1回答
我正在尝试使用react-pdf在服务器端创建pdf文档。然而，在运行我的express服务器时，我得到了这个错误 <Document>
^
SyntaxError: Invalid or unexpected token
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
[nodemon] app crashed - waiting for file changes before starting... 请帮我解决这个问题！ 另外，我正在尝试在node ex
浏览 37提问于2021-09-16得票数 0
1回答
经过多次尝试，我得出结论，测试正则表达式有问题，但无法修复它。 这看起来像是使用regex-tester的\.?[\\/]node_modules[\\/]((?!react-pdf)).*，但不起作用 splitChunks: {
chunks: 'all',
maxInitialRequests: Infinity,
minSize: 0,
cacheGroups: {
patientVendor: {
test: /[\\/]node_modules[\\/](!react-pdf)[\
浏览 20提问于2021-01-21得票数 0
为了在Jenkins中运行Cypress，我必须首先运行React应用程序。 但是，当Jenkins运行React应用程序时，它会抛出以下错误： Error from chokidar (/data/node_modules/@babel/runtime/regenerator): Error: ENOSPC: System limit for number of file watchers reached, watch '/data/node_modules/@babel/runtime/regenerator' 来自chokidar的错误(/data/node_modul
浏览 33提问于2021-11-08得票数 0
回答已采纳
1回答
第一次尝试这样做，所以不太确定我在做什么或如何设置它。
我需要调试我在应用程序中使用的库。最初，我在npm install @react-pdf/renderer中安装了它。这对于调试来说不太好，我遇到了这个答案，描述了如果您需要对依赖项进行修改，如何处理它：
所以现在我正在做npm install https://github.com/diegomura/react-pdf/tarball/master，它将回购的副本放入我的node_modules中。
我当时的印象是，做完这件事后，它会“起作用”。当然没那么简单..。
我已经尝试过的
我的申请中有NPM在运行。出现的第一个错误是包
浏览 1提问于2018-11-14得票数 2
回答已采纳
1回答
我正在使用react-pdf，根据他们的网站，它应该使用以下代码显示我的PDF import React from "react";
import { Document, Page } from "react-pdf";
import PDF from "./123.pdf";
export default function Rosters() {
return (
<div className> <h1 className='text-light'>HELLO</h1>
浏览 112提问于2020-11-04得票数 2
1回答
用图像和图表对pdf作出反应
、、、、
你能建议一个免费和有效地将reactjs SPA转换成pdf的库吗？我需要以下两个限制：
应用程序内部不应出现像图像或图形中那样的随机分页现象。
我们需要确保pdf的每一页都包含固定的页眉和页脚。
我目前正在使用html2canvas和jspdf，但无法找到实现这两种方法的方法。有人能帮我解决这个问题吗。
这是我目前正在使用的代码：
downloadCurrentPage:函数(rootElement，fileName，回调，applyScale = false) { try {
let renderFooter = function (doc, pageNo,
浏览 11提问于2022-10-10得票数 0
我在React中构建了一个具有显示pdf功能的项目。我使用的是示例中提供的基本的最小代码(在repo中)。但是，该代码仅显示pdf的第一页，其余部分将被忽略。我使用'react-pdf‘来做这件事。我
以下是我的代码..
import React, {Component} from 'react';
import './DocumentationPage.css';
import HeaderComponent from '../../components/Header/Header.js';
import { Document, Pag
浏览 0提问于2017-11-10得票数 6
回答已采纳
2回答
我试图在react应用程序上显示一个pdf，并收到以下警告：
/node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.js关键依赖项:使用要求函数的方式不能静态提取依赖项
Vscode在import函数下告诉我这一点。
找不到模块“react”的声明文件
已经尝试运行npm install、npm install react-pdf并重新安装包
import React, { Component } from 'react';
import { Document } from 'react-pd
浏览 3提问于2019-04-09得票数 11
对于我们当前的项目，我们需要能够从<div></div>创建一个PDF文件。 当我查看它们中的大多数代码时，它们是从ReactDom.Render()而不是render类呈现的： 一个来自React-pdf的例子 import React from 'react';
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer';
const App = () => (
<PDFViewer>
浏览 27提问于2019-06-14得票数 0
回答已采纳
我正尝试使用next命令在React版本18上安装React pdf/renderer。
npm install @react-pdf/renderer --save
但它并没有在第18版上工作。
你有什么解决办法吗？
浏览 12提问于2022-05-07得票数 3
我想用react-pdf创建一个报告。当我使用Image时，我得到了这个错误。删除图像时没有错误。如何添加镜像。谢谢你的帮助。
import React from "react";
import {styles} from "../styles";
import {Text, View,Image} from "@react-pdf/renderer";
export const HeaderBorder = () => (
<View style={{flexDirection: "row",border:
浏览 7提问于2020-03-10得票数 3
1回答
我正在尝试在网站上显示PDF。我正在使用包react-pdf。我的组件如下所示：
import React from 'react';
import { Document, Page } from 'react-pdf';
export default function Resume() {
return (
<Document file="../../resume.pdf">
<Page />
</Document>
)
}
当组件呈现
浏览 5提问于2020-05-07得票数 0
我使用react-pdf/renderer软件包添加功能，从我的网站下载一个pdf。但是我收到了一条错误消息：./node_modules/@react-pdf/font/lib/index.browser.es.js Attempted import error: 'create' is not exported from 'fontkit' (imported as 'fontkit').
我试着使用这个包的不同版本，如v2.2.0、v2.3.0和v3.0.0，但不幸的是，没有什么对我有用。我在用react v^17.0.2。
PDF文档代码
浏览 59提问于2022-08-30得票数 17
尝试使用react-pdf渲染一个pdf，我发誓我已经完成了他们的文档的所有配置，但没有任何工作。我不断地得到
ReferenceError: $RefreshReg$ is not defined
概念证明组件。是的，在这段代码中没有使用这些选项，但我尝试过使用它。我尝试将cmap直接引入到这个组件中并在那里引用它。我尝试了复制webpack插件，并完全按照文档中的建议操作。没有一样东西起作用。总是出现同样的错误。希望我错过了一些小细节。
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable @ty
浏览 64提问于2021-04-14得票数 0
重造
用Vite创建React应用程序
npm init vite@latest vite-project --template react
创建示例pdf文档
import React from 'react';
import pdf from '@react-pdf/renderer';
const { Page, Text, View, Document, StyleSheet } = pdf;
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection:
浏览 3提问于2022-11-07得票数 0
有人能说出如何用@react-pdf/pdfkit在react.js中添加自定义字体吗？
我试图使用doc.registerFont(path, font_family)，但它显示了一个类似于Unhandled Rejection (Error): fontkit.openSync unavailable for browser build的错误
有谁可以帮我？我不想渲染的pdf。相反，我试图创建和下载它。所以我不能使用react-pdf/renderer。这就是为什么我使用react pdf/pdfkit。
浏览 3提问于2021-11-26得票数 4
回答已采纳
我将在React中使用react-pdf render将HTML内容转换为react-pdf标签。 import {
Document,
Page,
View,
Text,
Image,
StyleSheet
} from '@react-pdf/renderer';
const styles = StyleSheet.create({
page: {
backgroundColor: '#fff',
padding: 24
},
h1: {
fontSize: 24,
fontWeight
浏览 39提问于2020-11-18得票数 2
这张桌子是：
是表的来源。我也检查了react-pdf，但是表生成还没有实现，它是一个。
浏览 5提问于2022-08-14得票数 0
回答已采纳
我目前有一个PDF文件，它是我从亚马逊s3存储桶中获取的，在控制台中注销数据如下所示。
Uint8Array(83284) [37, 80, 68, 70, 45, 49, 46, 53, 10, 37, 191, 247, 162, 254, 10, 49, 48, 32, 48, 32, 111, 98, 106, 10, 60, 60, 32, 47, 76, 105, 110, 101, 97, 114, 105, 122, 101, 100, 32, 49, 32, 47, 76, 32, 56, 51, 50, 56, 52, 32, 47, 72, 32, 91, 32, 55,
浏览 29提问于2020-07-31得票数 0
1回答
我正在尝试创建一个使用react-pdf的pdf。在App.js中，我将我的“头”信息存储在会话存储中。我目前的发票部分：
import React from 'react';
import { Page, Document, Image, StyleSheet } from '@react-pdf/renderer';
import InvoiceTitle from './InvoiceTitle'
import BillTo from './BillTo'
import InvoiceNo from './Invoi
浏览 2提问于2021-08-12得票数 0
回答已采纳
我想从UI生成一个pdf并下载它。一直在查看文档，但找不到如何实现I.e. onClick={this.downloadPdf}
下面是模块参考：
它说：保存在一个文件中，
import React from 'react';
import ReactPDF from '@react-pdf/react-pdf';
ReactPDF.render(<MyDocument />, `${__dirname}/example.pdf`);
但这对我来说没什么意义。
浏览 2提问于2018-08-01得票数 13
我正在创建一个react应用程序，在这个应用程序中必须创建一个下载按钮，在客户端创建pdf并下载pdf，我正在使用react-pdf/renderer库来完成这个任务，我已经成功地实现了这个示例，我已经使用了这个库的PDFDownloadLink组件，当我将这个库直接呈现到ReactDOM.render中时，它工作得很好，但是当我试图在JSX元素中使用相同的代码时，它就不起作用了。我把我的两个代码都发出去了。
App.js
import React from 'react';
import {Document, Page,Text, StyleSheet, View} from
浏览 1提问于2019-06-09得票数 2
我已经使用create-react应用程序构建了一个react应用程序，它使用react-pdf显示pdf。当我输入一个指向磁盘上某个文件的文件名时，这个方法工作得很好，但是当我输入一个url时，我得到了一个"Failed to load PDF“错误。我尝试了多个urls，但都失败了。在控制台中，我还收到了以下警告，从一些谷歌搜索似乎指的是一个webpack不兼容，尽管我得到它与我正在尝试显示的文件类型无关：
./node_modules/pdfjs-dist/build/pdf.js关键依赖项: require函数的使用方式不能静态提取依赖项
我使用的是以下版本: react-pd
浏览 46提问于2020-02-16得票数 1
我对ReactJ完全陌生。
我正在尝试从html创建一个pdf。我想在浏览器中显示文档，然后能够下载它。我使用的是react pdf
我有下面的代码，我在其中创建我的PDF文档，然后我想用PDFViewer显示我的文档。这个页面不是我的主要“应用程序”页面--它是一个我可以导航到的“客户详细信息”页面。
当我运行这个程序时，我会得到以下错误：
TypeError:未能构造'Text'：请使用'new‘操作符，此DOM对象构造函数不能作为函数调用。
错误在这里:带行C:/Users/Marileen/Downloads/react-material-dashboar
浏览 2提问于2019-12-16得票数 2
回答已采纳
我正在使用react-pdf将一些react组件转换为pdf。我转换了一些表格和一些图片为pdf。
我的组件中也有react-apexcharts，我想把这个react-apexcharts组件添加到我的pdf中。
我的Graph组件如下所示：
render() {
return (
<View id="chart">
<Text> This is graph component </Text>
<Chart options={this.options} series={this.series()}
浏览 11提问于2020-10-21得票数 0
1回答
我正在尝试从s3链接中获取pdf文件，并在react应用程序中显示。我正在使用react-pdf。但是，当react-pdf进行api调用来获取pdf时，我得到了这个错误。
在'...‘获取的访问权限源自原点'...‘已被CORS策略阻止:请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为'no- CORS‘，以便在禁用CORS的情况下获取资源。
在React应用程序上，我还添加了以下内容：
source={{ header：{‘访问控制-允许回源’：'*'，}，}
浏览 105提问于2021-03-01得票数 0
代码没有变化。昨天，应用程序成功地完成了构建。但今天它没能建造
似乎是一些问题的反应-pdf依赖。
./node_modules/@react-pdf/png-js/lib/png-js.browser.es.js 10116:106个模块解析失败:意外令牌(10116:106个)文件是用这些加载程序处理的：
./node_modules/babel-loader/lib/index.js您可能需要一个额外的加载程序来处理这些加载程序的结果。*/
函数gen_bitlen(s，desc) /* deflate_state s;/ /* tree_desc desc；/树描述符//{ var
浏览 15提问于2022-11-05得票数 1
我试图使用一个npm库来帮助我呈现一个pdf文档。我找到了react，但是它还没有TypeScript的类型，所以我正在使用它，如下所示：
let Document = require('react-pdf');
let Page = require('react-pdf');
class PdfViewer extends React.Component<PdfViewer.Props, PdfViewer.State> {
constructor(props: PdfViewer.Props) {
super(props);
浏览 3提问于2019-02-21得票数 5
回答已采纳
node_modules/react-dom/cjs/react-dom.development.js:506 console.error警告:使用的大小写不正确。对于React组件使用PascalCase，对于HTML元素使用小写。 我对Jest和react-pdf有意见
浏览 36提问于2019-09-18得票数 6
我有一个nodeJs应用程序，我想使用@react-pdf/renderer库在后端创建pdf。我的pdf包含图像和外部字体。有什么办法吗？提前谢谢..。
浏览 8提问于2021-12-27得票数 2
回答已采纳
我用create-react-app创建了一个react应用程序，我正在试用react-pdf来查看pdfs。我的问题是，我的代码有时工作，有时不工作。当我第一次加载应用程序pdf总是很好地加载，但如果我访问网站上的其他链接/urls，然后导航到页面上的pdf，可能会失败在几次尝试加载错误，“未能加载pdf文件”。
如果出错，它看起来就像在图像下面
如果成功的话，它看起来就像在图像下面
我就是这样实现的
进口
import { Document, Page, pdfjs } from 'react-pdf/dist/esm/entry.webpack';
import {
浏览 12提问于2022-06-01得票数 5
react-pdf库中的PDFDownloadLink会在有人点击时下载pdf文件。我想根据一些条件通过代码触发这个点击事件。如何通过代码显式调用PDFDownloadLink的点击？
浏览 0提问于2020-09-14得票数 1
我有一个关于"react-pdf“库的问题。我想使用“换行”来正确地换行，现在当文本太大时，插入一个"-“。
有谁可以帮我？谢谢大家
浏览 3提问于2020-04-15得票数 1
import React, { useState, useRef, useEffect } from 'react';
import throttle from 'lodash/throttle';
import { Document, Page } from 'react-pdf/dist/esm/entry.webpack';
import 'react-pdf/dist/esm/Page/AnnotationLayer.css';
export default function PDFWrapper({ data, onD
浏览 1提问于2020-09-08得票数 1
回答已采纳
将模块@react-pdf/renderer与正式示例()一起使用：
import ReactPDF, { Document, Page, Text, View, StyleSheet } from '@react-pdf/renderer';
// Create styles
const styles = StyleSheet.create({
page: {
flexDirection: 'row',
backgroundColor: '#E4E4E4'
浏览 1提问于2021-04-20得票数 8
回答已采纳
正在尝试使用PdfReact组件显示PDF文件。加载PDF时，我一直收到以下错误：
Warning: Ignoring invalid character "114" in hex strinpdf.worker.js:342
Warning: Ignoring invalid character "34" in hex stringpdf.worker.js:342
Warning: Ignoring invalid character "111" in hexstringpdf.worker.js:342
我的设置如下所示：
impor
浏览 2提问于2017-08-31得票数 1
在过去的几个小时里，我一直在修复与react-pdf包相关的问题。我已经尝试了网上可用的各种例子。但是我正面临着同样的错误信息。 Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might
浏览 77提问于2020-07-23得票数 0
帮助我安装react软件包()在create应用程序上。我不能对webpack.config进行更改。我是按照我在这里找到的用户河暮光之城：的指示来做的。
根据安装说明-pdf
我运行npm install process browserify-zlib stream-browserify util buffer assert
在项目根文件夹中创建config-override.js
接下来，您需要在配置中插入以下行：
const webpack = require("webpack");
module.exports = {
/* ... */
浏览 23提问于2022-01-16得票数 4
回答已采纳
1回答
我使用react-pdf库来显示PDF文件。 但是库没有加载文件，即使它没有给出任何错误消息。 import React from "react";
import { Document, pdfjs } from "react-pdf";
pdfjs.GlobalWorkerOptions.workerSrc = `//cdnjs.cloudflare.com/ajax/libs/pdf.js/${pdfjs.version}/pdf.worker.min.js`;
const Dashboard = (): React.ReactElement =>
浏览 43提问于2021-09-08得票数 0
回答已采纳
2回答
我使用react-pdf库在Next.js中生成PDF，查看并在静态客户端Next.js应用程序中下载该PDF (不涉及服务器)。但我不能为Next.js设立Webpack，因为我对此不太了解。
这是Webpack为react-pdf所需的设置
const webpack = require('webpack')
module.exports = {
/* ... */
resolve: {
fallback: {
process: require.resolve('process/browser'),
zlib: r
浏览 10提问于2022-01-14得票数 2
回答已采纳
我的任务:基于应用程序中的数据，使用react-pdf生成PDF。然后，我想将这个生成的PDF与现有的PDF合并。
我的问题是:使用react-pdf我可以访问文档的blob数据，但据我所知，这个文件没有保存在任何地方。然而，我找到的所有用于合并PDF的JS工具，只有当您将路径传递到文件时才能合并PDF。
你能看到任何解决这个问题的方法吗？我的想法是保存这个生成的PDF服务器端，以某种方式将其从BLOB转换为PDF，使用一些合并工具，然后将最终合并的PDF带回客户端，但它似乎太(？)很复杂。
浏览 105提问于2021-02-15得票数 2
1回答
我刚刚更新到最新的创建-反应-应用程序(网络包5)。现在我得到了以下错误(我只是在这里显示前两个错误)。任何帮助解释这个错误意味着什么，以及如何修复它将是非常感谢的。我不认为问题在于react，因为我创建了一个新的创建-反应-应用程序项目，使用该软件包，没有问题。
{用问题编译:X
./node_modules/react-pdf/node_modules/@babel/runtime/helpers/esm/inherits.js 1:0-46中的错误
模块找不到:错误:无法解决'./setPrototypeOf‘在'/Users/bob/dev/workbox-web/no
浏览 1提问于2022-02-16得票数 3
当按钮点击时，调用reactPdf.render并抛出异常图片，如下所示； 预期行为:下载名为"example.pdf“的文件 import ReactPDF from "@react-pdf/renderer";
const GenerateBarcode = () => {
ReactPDF.render(<p>Some Jsx Elements</p>, `${__dirname}/example.pdf`);
};
return (
<div>
浏览 16提问于2020-09-05得票数 0
回答已采纳
3回答
我想使用react-pdf来显示PDF，并开发一个打印函数来直接打印(比如使用window.print())；
REST服务器是使用Jersey开发的。
PDF将从服务器生成，并使用Jersey返回到React客户端，返回类型为application/pdf。React客户端将使用react-pdf显示PDF。
我不想在"file“中声明URL路径，因为如果React状态改变并触发重新渲染，这将再次从服务器检索PDF。另外，我需要开发一个打印功能来打印显示的PDF (因为如果再次从服务器检索PDF，PDF内容可能会更改)
下面显示了我的代码：
服务器：
@Override
@GET
@
浏览 2提问于2018-12-30得票数 1
回答已采纳
我正在创建一个反应应用程序，在这个应用程序中，我必须生成一个pdf，并在单击按钮时保存该pdf。如何将此pdf保存在本地目录中？
CreatePdf.js
import React, { Component } from 'react';
import { Document, Page, Text, View, StyleSheet, Image } from '@react-pdf/renderer';
class CreatePdf extends Component {
constructor() {
super();
浏览 8提问于2020-09-30得票数 0
回答已采纳
1回答
我用的是。我的版本是；节点版本:8.9.4，react-pdf:^5.3.2，react版本: 16.3.1。我阅读文档并创建了一个组件。()组件可以很好地处理CDN解决方案，但不能从entry.webpack导入文档和页面。我得到了这个错误：node_modules/react-pdf/node_modules/file-loader/dist/cjs.js!./node_modules/react-pdf/node_modules/pdfjs-dist/build/pdf.worker.js模块构建失败: TypeError: Path必须是一个字符串。接收未定义的
我的组成部分是；
im
浏览 0提问于2021-07-29得票数 1
回答已采纳
1回答
我使用react-pdf在react应用程序中呈现一个pdf，然后通过WebView在ios和android中呈现。
pdf呈现在android中工作。
在ios中，我得到了一个错误Total canvas memory use exceeds the maximum limit (224 MB).
<Document
file={pdfBlob}
onLoadSuccess={onDocumentLoadSuccess}
renderMode="canvas&#
浏览 15提问于2022-05-30得票数 0
回答已采纳
我正在尝试将application应用程序迁移到NX，下面是上的步骤
当我撞到nx serve时
我面临以下错误：
找不到C:/dev/nx-dev/scandy/node_modules/@react-pdf/png-js/dist/png-js.browser.es.js模块中的错误:错误:无法解决'C:\dev\nx-dev\scandy\node_modules@react-pdf\png-js\dist‘模块中的“zlib”错误，C:/dev/nx-dev/scandy/node_modules/@react-pdf/pdfkit/dist/pdfkit.browser.e
浏览 17提问于2021-04-08得票数 9
3回答
我使用的是@react-pdf/renderer版本"1.6.8“。但是，无法获得以下字符:čćđ。换个空位。
这些字符来自克罗地亚语，可以在其官方页面上进行测试。
也许有人知道该设置什么或者如何处理这个问题。在他们的上没有发现任何东西。
Github杂志：
浏览 4提问于2019-12-05得票数 6
回答已采纳
1回答
我正在使用React钩子和来自react-pdf的react-pdf 我尝试了3个不同的反应pdf转换器，这是到目前为止工作得最好的一个。它仍然不能很好地工作-我不知道如何使它既不会耗尽内存，也不会产生空白的pdf。 我有一个生成pdf的组件： import React from 'react';
import { Page, Text, View, Document, StyleSheet, Font } from '@react-pdf/renderer';
Font.register({
family: 'Roboto',
浏览 45提问于2020-04-24得票数 5
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
