react-pdf库未加载PDF文档
react-pdf库是一个用于在React应用中显示和操作PDF文档的开源库。它提供了一组组件和API，使开发者能够轻松地在网页上展示PDF文件，并且可以进行一些基本的操作，如缩放、旋转、选择文本等。
react-pdf库的主要特点包括：
- 易于使用：react-pdf提供了一组简单易用的React组件，开发者可以通过简单的代码将PDF文档嵌入到应用中。
- 高性能：react-pdf使用了基于Canvas的渲染引擎，能够快速加载和渲染大型的PDF文档。
- 跨平台支持：react-pdf可以在各种平台上运行，包括Web、移动设备和桌面应用。
- 可定制性：react-pdf提供了丰富的API和组件属性，开发者可以根据自己的需求进行定制和扩展。
应用场景：
- 在线文档展示：react-pdf可以用于构建在线文档阅读器，用户可以在网页上直接查看和浏览PDF文档。
- 文档编辑工具：结合其他React组件和工具，react-pdf可以用于构建PDF文档编辑工具，用户可以在网页上对PDF文档进行标注、添加注释等操作。
- 教育和培训：react-pdf可以用于构建在线教育平台，学生可以在网页上查看和学习PDF格式的教材和课件。
腾讯云相关产品推荐： 腾讯云提供了一系列与云计算相关的产品和服务，以下是一些与react-pdf库相关的推荐产品：
- 腾讯云对象存储（COS）：用于存储和管理PDF文档文件，可以通过COS提供的API将PDF文件上传到云端，并在应用中使用react-pdf进行展示和操作。产品链接：https://cloud.tencent.com/product/cos
- 腾讯云云函数（SCF）：用于构建无服务器应用，可以将react-pdf库集成到云函数中，实现PDF文档的动态生成和处理。产品链接：https://cloud.tencent.com/product/scf
- 腾讯云CDN加速：用于加速PDF文档的分发和访问，可以通过CDN加速服务提高PDF文档的加载速度和用户体验。产品链接：https://cloud.tencent.com/product/cdn
以上是关于react-pdf库未加载PDF文档的完善且全面的答案。
相关·内容
目前，我正在尝试通过这个React组件使用base64数据加载PDF。
当我尝试以以下方式加载PDFDocument: stream must have data时，我当前收到一个PDF错误：
<PDF
file={`data:application/pdf;base64,${this.state.base64}`}
onDocumentComplete={this.onDocumentComplete}
onPageComplete={this.onPageComplete}
page={this.state.page}
/
浏览 19提问于2018-03-05得票数 4
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
2回答
我使用npm的React-PDF，使用PDFDownloadLink函数下载一个大的pdf文件。但是PDF的创建对我的应用程序加载产生了很长的滞后时间。
我尝试过计时器、延迟加载组件、使用useState更改文档数据。
我只需要加载文档数据，一旦PDF按钮被点击，而不是在每个页面呈现。
浏览 0提问于2019-11-08得票数 9
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, 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
回答已采纳
我对ReactJ完全陌生。
我正在尝试从html创建一个pdf。我想在浏览器中显示文档，然后能够下载它。我使用的是react pdf
我有下面的代码，我在其中创建我的PDF文档，然后我想用PDFViewer显示我的文档。这个页面不是我的主要“应用程序”页面--它是一个我可以导航到的“客户详细信息”页面。
当我运行这个程序时，我会得到以下错误：
TypeError:未能构造'Text'：请使用'new‘操作符，此DOM对象构造函数不能作为函数调用。
错误在这里:带行C:/Users/Marileen/Downloads/react-material-dashboar
浏览 2提问于2019-12-16得票数 2
回答已采纳
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
我正在尝试用react-pdf呈现一个PDF。需要说明的是，我指的是this react-pdf库，而不是其他库。我希望在PDF中包含将来用于索引的某些文本，但我希望该文本不可见(或几乎不可见)。稍后，我将使用从PDF中读入文本的Python脚本来检测此文本。 我的问题是如何通过设置hiddenheader的样式来实现这一点。 <Text style={styles.hiddenheader}>###HIDDEN HEADER###</Text> const styles = StyleSheet.create({
hiddenheader: {
visi
浏览 16提问于2020-12-19得票数 3
回答已采纳
我用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渲染一个pdf，我发誓我已经完成了他们的文档的所有配置，但没有任何工作。我不断地得到
ReferenceError: $RefreshReg$ is not defined
概念证明组件。是的，在这段代码中没有使用这些选项，但我尝试过使用它。我尝试将cmap直接引入到这个组件中并在那里引用它。我尝试了复制webpack插件，并完全按照文档中的建议操作。没有一样东西起作用。总是出现同样的错误。希望我错过了一些小细节。
/* eslint-disable @typescript-eslint/no-var-requires */
/* eslint-disable @ty
浏览 64提问于2021-04-14得票数 0
到目前为止，使用react-pdf很简单，但我遗漏了一个关键部分，我不知道如何找到它。我正在尝试获取加载的PDF文档的总页数。我需要这个来创建一个页码导航。显然，数据存在于某个地方，因为将<Page>标记的pageNumber属性更改为硬编码的值将显示正确的页面。但我不知道如何访问它。 我的代码如下。据我所知，我是完全按照他们的指示做的。下面是我的示例：https://www.npmjs.com/package/react-pdf 但numPages状态对我来说完全是个谜。我通过第17行的onDocumentLoadSuccess函数设置它，就像他们的Github文档示例一样。但
浏览 147提问于2021-09-05得票数 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
回答已采纳
我在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
回答已采纳
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
正在尝试使用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
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
我正在创建一个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
我想从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
为了在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
回答已采纳
我有一个nodeJs应用程序，我想使用@react-pdf/renderer库在后端创建pdf。我的pdf包含图像和外部字体。有什么办法吗？提前谢谢..。
浏览 8提问于2021-12-27得票数 2
回答已采纳
代码没有变化。昨天，应用程序成功地完成了构建。但今天它没能建造
似乎是一些问题的反应-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
1回答
我正尝试在create-react-app应用程序中使用react-pdf来显示pdf。我按照说明操作，但没有显示pdf。 import { makeStyles, Box, Grid } from "@material-ui/core";
import React, { useState } from "react";
import Header from "./header";
import contractPdf from "../../sample.pdf";
import { Document, Page } from
浏览 68提问于2021-07-29得票数 0
我正在使用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
react-pdf库中的PDFDownloadLink会在有人点击时下载pdf文件。我想根据一些条件通过代码触发这个点击事件。如何通过代码显式调用PDFDownloadLink的点击？
浏览 0提问于2020-09-14得票数 1
我在TypeError中得到“GlobalWorkerOptions:无法读取未定义的属性'GlobalWorkerOptions‘”。我的密码在这里
import { pdfjs } from 'react-pdf';
pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.87/pdf.js`;
我用这个从给定的pdf中提取文本。我使用
npm i react pdf
这方面的国家预防机制。帮我..。
浏览 8提问于2020-04-13得票数 1
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
回答已采纳
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
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/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
回答已采纳
我是新的反应，我试图显示一个pdf文件在浏览器上。当无法加载PDF时，我收到了一个错误。我正在尝试运行中给出的示例程序。
App.js
import React, { Component } from 'react';
import { Document, Page } from 'react-pdf';
class MyApp extends Component {
state = {
numPages: null,
pageNumber: 1,
}
onDocumentLoad = ({ numPages }) =>
浏览 2提问于2018-02-02得票数 14
回答已采纳
我使用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
当我试图将本地字体加载到我的PDF项目时，我会得到这个错误代码。
我跟踪了文档并尝试了几种导入字体的方法。
import DinPro from "../../../../assets/fonts/DinProFont/DINPro-Medium_13936.ttf";
Font.register({
family: "DINPro",
format: "truetype",
src: DinPro,
fontStyle: "normal",
fontWeight: "normal"
浏览 11提问于2022-11-08得票数 0
1回答
您好，我正在尝试生成next.js格式的文件。我尝试了很多库，比如react-pdf，jsPDF等等，但它们都是客户端库，它们需要window来执行它们的操作。有没有办法在next.js中生成pdf。如果存在，那么请建议与代码示例。
浏览 31提问于2020-02-20得票数 3
我试图使用一个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
回答已采纳
对于我们当前的项目，我们需要能够从<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
回答已采纳
我有一个关于"react-pdf“库的问题。我想使用“换行”来正确地换行，现在当文本太大时，插入一个"-“。
有谁可以帮我？谢谢大家
浏览 3提问于2020-04-15得票数 1
有人能说出如何用@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
回答已采纳
重造
用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中使用一个名为react pdf的库，它有一个组件Document. Document组件包含一个名为file的属性(其输入类型是一个字符串)。
如何将响应(redux中的道具)从base64内容传递到文档的文件属性？那么，是否有任何库从API接受我的base64内容并将输出显示在一个pdf文档中？
下面是示例代码：
import React from 'react';
import { connect } from 'react-redux';
import { Document } from 'react-pdf';
impo
浏览 3提问于2019-12-12得票数 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
回答已采纳
我正尝试使用next命令在React版本18上安装React pdf/renderer。
npm install @react-pdf/renderer --save
但它并没有在第18版上工作。
你有什么解决办法吗？
浏览 12提问于2022-05-07得票数 3
我目前有一个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
我正在使用方便的the pdf库渲染/显示/下载pdf在我的反应网站。我的PDF文件存储在服务器上。我调用服务器，它以blob形式返回PDF。现在，当用户单击链接时，我希望在浏览器中以模式显示该PDF。我没有在他们的网站上找到具体的例子。我不确定我是否应该使用PDFViewer，还是BlobProvider，
我相信这是一个相当容易的任务，但我只是找不到任何好的例子。
我想最接近的例子就是他们的网站：
import { BlobProvider, Document, Page } from '@react-pdf/renderer';
const MyDoc = (
&l
浏览 25提问于2021-02-25得票数 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
由于我不能使用浏览器的pdf查看器在网络中，该应用程序将被使用，我正在测试一个包，以加载PDF的反应。我制作了一个组件，在其中我发送了我从后端获得的PDF的url：
import React, { useState } from 'react';
import { Document, Page } from 'react-pdf';
const PDFViewer = ({url}) => {
const [numPages, setNumPages] = useState(null);
const [pageNumber, setPageNum
浏览 9提问于2021-01-15得票数 11
回答已采纳
我试图从我的后端获取pdf文件并显示在页面上。我使用的是react库。但我搞错了
文件中的无效参数，需要Uint8Array、string或参数对象。
你能帮帮我吗
import { Document, Page } from 'react-pdf';
<Document file={() => dispatch(downloadAgreement())}>
<Page pageNumber={pageNumber} />
</Document>
export const downloadAgreement = () =>
浏览 6提问于2021-08-26得票数 0
我已经使用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
1回答
我正在创建反应产品使用盖茨比。我正在使用react库。它在构建时给出了相应的错误。我该怎么解决呢？我使用了盖茨比3.3.0版本。并使用react-pdf 5.2.0
D:\Project\public\render-page.js:137661
window.requestAnimationFrame(resolve);
ReferenceError: window is not defined
at D:\Project\public\render-page.js:40343:3
at new Promise (<anonymous>)
at Obj
浏览 2提问于2021-04-14得票数 1
回答已采纳
我想用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
我一直跟踪在我的网站上查看我的pdf，由于某种原因它不会加载，我不知道我做错了什么。
这是我的密码
import React, { Component } from 'react';
import {Document, Page} from 'react-pdf';
class Resume extends Component {
constructor(props){
super(props);
this.state = {
numPages: null,
pageNumber: 1
}
}
o
浏览 1提问于2018-10-30得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
