[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-70704":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":17,"stars7d":15,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":29,"readmeContent":30,"aiSummary":31,"trendingCount":16,"starSnapshotCount":16,"syncStatus":32,"lastSyncTime":33,"discoverSource":34},70704,"react-pdf","wojtekmaj\u002Freact-pdf","wojtekmaj","Display PDFs in your React app as easily as if they were images.","https:\u002F\u002Fprojects.wojtekmaj.pl\u002Freact-pdf",null,"TypeScript",11088,1007,58,11,0,6,24,18,88.91,"MIT License",false,"main",true,[26,27,28],"pdf","pdf-viewer","react","2026-06-12 04:00:56","[![npm](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Freact-pdf.svg)](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-pdf) ![downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Freact-pdf.svg) [![CI](https:\u002F\u002Fgithub.com\u002Fwojtekmaj\u002Freact-pdf\u002Factions\u002Fworkflows\u002Fci.yml\u002Fbadge.svg)](https:\u002F\u002Fgithub.com\u002Fwojtekmaj\u002Freact-pdf\u002Factions)\n\n# React-PDF\n\nDisplay PDFs in your React app as easily as if they were images.\n\n## Lost?\n\nThis package is used to _display_ existing PDFs. If you wish to _create_ PDFs using React, you may be looking for [@react-pdf\u002Frenderer](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002F@react-pdf\u002Frenderer).\n\n## tl;dr\n\n- Install by executing `npm install react-pdf` or `yarn add react-pdf`.\n- Import by adding `import { Document } from 'react-pdf'`.\n- Use by adding `\u003CDocument file=\"...\" \u002F>`. `file` can be a URL, base64 content, Uint8Array, and more.\n- Put `\u003CPage \u002F>` components inside `\u003CDocument \u002F>` to render pages.\n- Import stylesheets for [annotations](#support-for-annotations) and [text layer](#support-for-text-layer) if applicable.\n\n## Demo\n\nA minimal demo page can be found in `sample` directory.\n\n[Online demo](https:\u002F\u002Fprojects.wojtekmaj.pl\u002Freact-pdf\u002F) is also available!\n\n## Before you continue\n\nReact-PDF is under constant development. This documentation is written for React-PDF 10.x branch. If you want to see documentation for other versions of React-PDF, use dropdown on top of GitHub page to switch to an appropriate tag. Here are quick links to the newest docs from each branch:\n\n- [v9.x](https:\u002F\u002Fgithub.com\u002Fwojtekmaj\u002Freact-pdf\u002Fblob\u002Fv9.x\u002Fpackages\u002Freact-pdf\u002FREADME.md)\n- [v8.x](https:\u002F\u002Fgithub.com\u002Fwojtekmaj\u002Freact-pdf\u002Fblob\u002Fv8.x\u002Fpackages\u002Freact-pdf\u002FREADME.md)\n- [v7.x](https:\u002F\u002Fgithub.com\u002Fwojtekmaj\u002Freact-pdf\u002Fblob\u002Fv7.x\u002Fpackages\u002Freact-pdf\u002FREADME.md)\n- [v6.x](https:\u002F\u002Fgithub.com\u002Fwojtekmaj\u002Freact-pdf\u002Fblob\u002Fv6.x\u002FREADME.md)\n- [v5.x](https:\u002F\u002Fgithub.com\u002Fwojtekmaj\u002Freact-pdf\u002Fblob\u002Fv5.x\u002FREADME.md)\n\n## Getting started\n\n### Compatibility\n\n#### Browser support\n\nReact-PDF supports the latest versions of all major modern browsers.\n\nBrowser compatibility for React-PDF primarily depends on PDF.js support. For details, refer to the [PDF.js documentation](https:\u002F\u002Fgithub.com\u002Fmozilla\u002Fpdf.js\u002Fwiki\u002FFrequently-Asked-Questions#faq-support).\n\nYou may extend the list of supported browsers by providing additional polyfills (e.g. `Array.prototype.at`, `Promise.allSettled` or `Promise.withResolvers`), configuring your bundler to transpile `pdfjs-dist`, and using [legacy PDF.js worker](#legacy-pdfjs-worker).\n\nLegacy PDF.js worker has been reported to support iOS 16.4 and newer. Older iOS versions may still fail to load PDF.js modules.\n\n#### React\n\nTo use the latest version of React-PDF, your project needs to use React 16.8 or later.\n\n#### Preact\n\nReact-PDF may be used with Preact.\n\n### Installation\n\nAdd React-PDF to your project by executing `npm install react-pdf` or `yarn add react-pdf`.\n\n#### Next.js\n\nIf you use Next.js prior to v15 (v15.0.0-canary.53, specifically), you may need to add the following to your `next.config.js`:\n\n```diff\nmodule.exports = {\n+ swcMinify: false,\n}\n```\n\n### Configure PDF.js worker\n\nFor React-PDF to work, PDF.js worker needs to be provided. You have several options.\n\n#### Import worker (recommended)\n\nFor most cases, the following example will work:\n\n```ts\nimport { pdfjs } from 'react-pdf';\n\npdfjs.GlobalWorkerOptions.workerSrc = new URL(\n 'pdfjs-dist\u002Fbuild\u002Fpdf.worker.min.mjs',\n import.meta.url,\n).toString();\n```\n\n> [!WARNING]\n> The `workerSrc` must be set in the **same module** where you use React-PDF components (e.g., `\u003CDocument>`, `\u003CPage>`). Setting it in a separate file like `main.tsx` and then importing React-PDF in another component may cause the default value to overwrite your custom setting due to module execution order. Always configure the worker in the file where you render the PDF components.\n\n> [!NOTE]\n> In Next.js, make sure to skip SSR when importing the module you're using this code in. Here's how to do this in [Pages Router](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fpages\u002Fguides\u002Flazy-loading#with-no-ssr) and [App Router](https:\u002F\u002Fnextjs.org\u002Fdocs\u002Fapp\u002Fguides\u002Flazy-loading#skipping-ssr).\n\n> [!NOTE]\n> pnpm requires an `.npmrc` file with `public-hoist-pattern[]=pdfjs-dist` for this to work.\n\n\u003Cdetails>\n\u003Csummary>See more examples\u003C\u002Fsummary>\n\n##### Parcel 2\n\nFor Parcel 2, you need to use a slightly different code:\n\n```diff\n pdfjs.GlobalWorkerOptions.workerSrc = new URL(\n- 'pdfjs-dist\u002Fbuild\u002Fpdf.worker.min.mjs',\n+ 'npm:pdfjs-dist\u002Fbuild\u002Fpdf.worker.min.mjs',\n import.meta.url,\n ).toString();\n```\n\n\u003C\u002Fdetails>\n\n#### Copy worker to public directory\n\nYou will have to make sure on your own that `pdf.worker.mjs` file from `pdfjs-dist\u002Fbuild` is copied to your project's output folder.\n\nFor example, you could use a custom script like:\n\n```ts\nimport path from 'node:path';\nimport fs from 'node:fs';\n\nconst pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist\u002Fpackage.json'));\nconst pdfWorkerPath = path.join(pdfjsDistPath, 'build', 'pdf.worker.mjs');\n\nfs.cpSync(pdfWorkerPath, '.\u002Fdist\u002Fpdf.worker.mjs', { recursive: true });\n```\n\n#### Use external CDN\n\n```ts\nimport { pdfjs } from 'react-pdf';\n\npdfjs.GlobalWorkerOptions.workerSrc = `\u002F\u002Funpkg.com\u002Fpdfjs-dist@${pdfjs.version}\u002Fbuild\u002Fpdf.worker.min.mjs`;\n```\n\n> [!WARNING]\n> The `workerSrc` must be set in the **same module** where you use React-PDF components (e.g., `\u003CDocument>`, `\u003CPage>`). Setting it in a separate file like `main.tsx` and then importing React-PDF in another component may cause the default value to overwrite your custom setting due to module execution order. Always configure the worker in the file where you render the PDF components.\n\n#### Legacy PDF.js worker\n\nIf you need to support older browsers, you may use legacy PDF.js worker. This is not a complete backwards-compatibility solution: you may still need additional polyfills and bundler transpilation.\n\nTo do so, follow the instructions above, but replace `\u002Fbuild\u002F` with `\u002Flegacy\u002Fbuild\u002F` in PDF.js worker import path, for example:\n\n```diff\n pdfjs.GlobalWorkerOptions.workerSrc = new URL(\n- 'pdfjs-dist\u002Fbuild\u002Fpdf.worker.min.mjs',\n+ 'pdfjs-dist\u002Flegacy\u002Fbuild\u002Fpdf.worker.min.mjs',\n import.meta.url,\n ).toString();\n```\n\nor:\n\n```diff\n-pdfjs.GlobalWorkerOptions.workerSrc = `\u002F\u002Funpkg.com\u002Fpdfjs-dist@${pdfjs.version}\u002Fbuild\u002Fpdf.worker.min.mjs`;\n+pdfjs.GlobalWorkerOptions.workerSrc = `\u002F\u002Funpkg.com\u002Fpdfjs-dist@${pdfjs.version}\u002Flegacy\u002Fbuild\u002Fpdf.worker.min.mjs`;\n```\n\n### Usage\n\nHere's an example of basic usage:\n\n```tsx\nimport { useState } from 'react';\nimport { Document, Page } from 'react-pdf';\n\nfunction MyApp() {\n const [numPages, setNumPages] = useState\u003Cnumber>();\n const [pageNumber, setPageNumber] = useState\u003Cnumber>(1);\n\n function onDocumentLoadSuccess({ numPages }: { numPages: number }): void {\n setNumPages(numPages);\n }\n\n return (\n \u003Cdiv>\n \u003CDocument file=\"somefile.pdf\" onLoadSuccess={onDocumentLoadSuccess}>\n \u003CPage pageNumber={pageNumber} \u002F>\n \u003C\u002FDocument>\n \u003Cp>\n Page {pageNumber} of {numPages}\n \u003C\u002Fp>\n \u003C\u002Fdiv>\n );\n}\n```\n\nCheck the [sample directory](https:\u002F\u002Fgithub.com\u002Fwojtekmaj\u002Freact-pdf\u002Ftree\u002Fmain\u002Fsample) in this repository for a full working example. For more examples and more advanced use cases, check [Recipes](https:\u002F\u002Fgithub.com\u002Fwojtekmaj\u002Freact-pdf\u002Fwiki\u002FRecipes) in [React-PDF Wiki](https:\u002F\u002Fgithub.com\u002Fwojtekmaj\u002Freact-pdf\u002Fwiki\u002F).\n\n### Support for annotations\n\nIf you want to use annotations (e.g. links) in PDFs rendered by React-PDF, then you would need to include stylesheet necessary for annotations to be correctly displayed like so:\n\n```ts\nimport 'react-pdf\u002Fdist\u002FPage\u002FAnnotationLayer.css';\n```\n\n### Support for text layer\n\nIf you want to use text layer in PDFs rendered by React-PDF, then you would need to include stylesheet necessary for text layer to be correctly displayed like so:\n\n```ts\nimport 'react-pdf\u002Fdist\u002FPage\u002FTextLayer.css';\n```\n\n### Support for non-latin characters\n\nIf you want to ensure that PDFs with non-latin characters will render perfectly, or you have encountered the following warning:\n\n```\nWarning: The CMap \"baseUrl\" parameter must be specified, ensure that the \"cMapUrl\" and \"cMapPacked\" API parameters are provided.\n```\n\nthen you would also need to include cMaps in your build and tell React-PDF where they are.\n\n#### Copying cMaps\n\nFirst, you need to copy cMaps from `pdfjs-dist` (React-PDF's dependency - it should be in your `node_modules` if you have React-PDF installed). cMaps are located in `pdfjs-dist\u002Fcmaps`.\n\n##### Vite\n\nAdd [`vite-plugin-static-copy`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvite-plugin-static-copy) by executing `npm install vite-plugin-static-copy --save-dev` or `yarn add vite-plugin-static-copy --dev` and add the following to your Vite config:\n\n```diff\n+import path from 'node:path';\n+import { createRequire } from 'node:module';\n\n-import { defineConfig } from 'vite';\n+import { defineConfig, normalizePath } from 'vite';\n+import { viteStaticCopy } from 'vite-plugin-static-copy';\n\n+const require = createRequire(import.meta.url);\n+\n+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist\u002Fpackage.json'));\n+const cMapsDir = normalizePath(path.join(pdfjsDistPath, 'cmaps'));\n\nexport default defineConfig({\n plugins: [\n+ viteStaticCopy({\n+ targets: [\n+ {\n+ src: cMapsDir,\n+ dest: '',\n+ },\n+ ],\n+ }),\n ]\n});\n```\n\n##### Webpack\n\nAdd [`copy-webpack-plugin`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcopy-webpack-plugin) by executing `npm install copy-webpack-plugin --save-dev` or `yarn add copy-webpack-plugin --dev` and add the following to your Webpack config:\n\n```diff\n+import path from 'node:path';\n+import CopyWebpackPlugin from 'copy-webpack-plugin';\n\n+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist\u002Fpackage.json'));\n+const cMapsDir = path.join(pdfjsDistPath, 'cmaps');\n\nmodule.exports = {\n plugins: [\n+ new CopyWebpackPlugin({\n+ patterns: [\n+ {\n+ from: cMapsDir,\n+ to: 'cmaps\u002F'\n+ },\n+ ],\n+ }),\n ],\n};\n```\n\n##### Other tools\n\nIf you use other bundlers, you will have to make sure on your own that cMaps are copied to your project's output folder.\n\nFor example, you could use a custom script like:\n\n```ts\nimport path from 'node:path';\nimport fs from 'node:fs';\n\nconst pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist\u002Fpackage.json'));\nconst cMapsDir = path.join(pdfjsDistPath, 'cmaps');\n\nfs.cpSync(cMapsDir, 'dist\u002Fcmaps\u002F', { recursive: true });\n```\n\n#### Setting up React-PDF\n\nNow that you have cMaps in your build, pass required options to Document component by using `options` prop, like so:\n\n```ts\n\u002F\u002F Outside of React component\nconst options = {\n cMapUrl: '\u002Fcmaps\u002F',\n};\n\n\u002F\u002F Inside of React component\n\u003CDocument options={options} \u002F>;\n```\n\n> [!NOTE]\n> Make sure to define `options` object outside of your React component or use `useMemo` if you can't.\n\nAlternatively, you could use cMaps from external CDN:\n\n```tsx\n\u002F\u002F Outside of React component\nimport { pdfjs } from 'react-pdf';\n\nconst options = {\n cMapUrl: `https:\u002F\u002Funpkg.com\u002Fpdfjs-dist@${pdfjs.version}\u002Fcmaps\u002F`,\n};\n\n\u002F\u002F Inside of React component\n\u003CDocument options={options} \u002F>;\n```\n\n### Support for JPEG 2000\n\nIf you want to ensure that JPEG 2000 images in PDFs will render, or you have encountered the following warning:\n\n```\nWarning: Unable to decode image \"img_p0_1\": \"JpxError: OpenJPEG failed to initialize\".\n```\n\nthen you would also need to include wasm directory in your build and tell React-PDF where it is.\n\n#### Copying wasm directory\n\nFirst, you need to copy wasm from `pdfjs-dist` (React-PDF's dependency - it should be in your `node_modules` if you have React-PDF installed). cMaps are located in `pdfjs-dist\u002Fwasm`.\n\n##### Vite\n\nAdd [`vite-plugin-static-copy`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvite-plugin-static-copy) by executing `npm install vite-plugin-static-copy --save-dev` or `yarn add vite-plugin-static-copy --dev` and add the following to your Vite config:\n\n```diff\n+import path from 'node:path';\n+import { createRequire } from 'node:module';\n\n-import { defineConfig } from 'vite';\n+import { defineConfig, normalizePath } from 'vite';\n+import { viteStaticCopy } from 'vite-plugin-static-copy';\n\n+const require = createRequire(import.meta.url);\n+\n+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist\u002Fpackage.json'));\n+const wasmDir = normalizePath(path.join(pdfjsDistPath, 'wasm'));\n\nexport default defineConfig({\n plugins: [\n+ viteStaticCopy({\n+ targets: [\n+ {\n+ src: wasmDir,\n+ dest: '',\n+ },\n+ ],\n+ }),\n ]\n});\n```\n\n##### Webpack\n\nAdd [`copy-webpack-plugin`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcopy-webpack-plugin) by executing `npm install copy-webpack-plugin --save-dev` or `yarn add copy-webpack-plugin --dev` and add the following to your Webpack config:\n\n```diff\n+import path from 'node:path';\n+import CopyWebpackPlugin from 'copy-webpack-plugin';\n\n+const pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist\u002Fpackage.json'));\n+const wasmDir = path.join(pdfjsDistPath, 'wasm');\n\nmodule.exports = {\n plugins: [\n+ new CopyWebpackPlugin({\n+ patterns: [\n+ {\n+ from: wasmDir,\n+ to: 'wasm\u002F'\n+ },\n+ ],\n+ }),\n ],\n};\n```\n\n##### Other tools\n\nIf you use other bundlers, you will have to make sure on your own that wasm directory is copied to your project's output folder.\n\nFor example, you could use a custom script like:\n\n```ts\nimport path from 'node:path';\nimport fs from 'node:fs';\n\nconst pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist\u002Fpackage.json'));\nconst wasmDir = path.join(pdfjsDistPath, 'wasm');\n\nfs.cpSync(wasmDir, 'dist\u002Fwasm\u002F', { recursive: true });\n```\n\n#### Setting up React-PDF\n\nNow that you have wasm directory in your build, pass required options to Document component by using `options` prop, like so:\n\n```ts\n\u002F\u002F Outside of React component\nconst options = {\n wasmUrl: '\u002Fwasm\u002F',\n};\n\n\u002F\u002F Inside of React component\n\u003CDocument options={options} \u002F>;\n```\n\n> [!NOTE]\n> Make sure to define `options` object outside of your React component or use `useMemo` if you can't.\n\nAlternatively, you could use wasm directory from external CDN:\n\n```tsx\n\u002F\u002F Outside of React component\nimport { pdfjs } from 'react-pdf';\n\nconst options = {\n wasmUrl: `https:\u002F\u002Funpkg.com\u002Fpdfjs-dist@${pdfjs.version}\u002Fwasm\u002F`,\n};\n\n\u002F\u002F Inside of React component\n\u003CDocument options={options} \u002F>;\n```\n\n### Support for standard fonts\n\nIf you want to support PDFs using standard fonts (deprecated in PDF 1.5, but still around), or you have encountered the following warning:\n\n```\nThe standard font \"baseUrl\" parameter must be specified, ensure that the \"standardFontDataUrl\" API parameter is provided.\n```\n\nthen you would also need to include standard fonts in your build and tell React-PDF where they are.\n\n#### Copying fonts\n\nFirst, you need to copy standard fonts from `pdfjs-dist` (React-PDF's dependency - it should be in your `node_modules` if you have React-PDF installed). Standard fonts are located in `pdfjs-dist\u002Fstandard_fonts`.\n\n##### Vite\n\nAdd [`vite-plugin-static-copy`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fvite-plugin-static-copy) by executing `npm install vite-plugin-static-copy --save-dev` or `yarn add vite-plugin-static-copy --dev` and add the following to your Vite config:\n\n```diff\n+import path from 'node:path';\n+import { createRequire } from 'node:module';\n\n-import { defineConfig } from 'vite';\n+import { defineConfig, normalizePath } from 'vite';\n+import { viteStaticCopy } from 'vite-plugin-static-copy';\n\n+const require = createRequire(import.meta.url);\n+const standardFontsDir = normalizePath(\n+ path.join(path.dirname(require.resolve('pdfjs-dist\u002Fpackage.json')), 'standard_fonts')\n+);\n\nexport default defineConfig({\n plugins: [\n+ viteStaticCopy({\n+ targets: [\n+ {\n+ src: standardFontsDir,\n+ dest: '',\n+ },\n+ ],\n+ }),\n ]\n});\n```\n\n##### Webpack\n\nAdd [`copy-webpack-plugin`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fcopy-webpack-plugin) by executing `npm install copy-webpack-plugin --save-dev` or `yarn add copy-webpack-plugin --dev` and add the following to your Webpack config:\n\n```diff\n+import path from 'node:path';\n+import CopyWebpackPlugin from 'copy-webpack-plugin';\n\n+const standardFontsDir = path.join(path.dirname(require.resolve('pdfjs-dist\u002Fpackage.json')), 'standard_fonts');\n\nmodule.exports = {\n plugins: [\n+ new CopyWebpackPlugin({\n+ patterns: [\n+ {\n+ from: standardFontsDir,\n+ to: 'standard_fonts\u002F'\n+ },\n+ ],\n+ }),\n ],\n};\n```\n\n##### Other tools\n\nIf you use other bundlers, you will have to make sure on your own that standard fonts are copied to your project's output folder.\n\nFor example, you could use a custom script like:\n\n```ts\nimport path from 'node:path';\nimport fs from 'node:fs';\n\nconst pdfjsDistPath = path.dirname(require.resolve('pdfjs-dist\u002Fpackage.json'));\nconst standardFontsDir = path.join(pdfjsDistPath, 'standard_fonts');\n\nfs.cpSync(standardFontsDir, 'dist\u002Fstandard_fonts\u002F', { recursive: true });\n```\n\n#### Setting up React-PDF\n\nNow that you have standard fonts in your build, pass required options to Document component by using `options` prop, like so:\n\n```tsx\n\u002F\u002F Outside of React component\nconst options = {\n standardFontDataUrl: '\u002Fstandard_fonts\u002F',\n};\n\n\u002F\u002F Inside of React component\n\u003CDocument options={options} \u002F>;\n```\n\n> [!NOTE]\n> Make sure to define `options` object outside of your React component or use `useMemo` if you can't.\n\nAlternatively, you could use standard fonts from external CDN:\n\n```tsx\n\u002F\u002F Outside of React component\nimport { pdfjs } from 'react-pdf';\n\nconst options = {\n standardFontDataUrl: `https:\u002F\u002Funpkg.com\u002Fpdfjs-dist@${pdfjs.version}\u002Fstandard_fonts\u002F`,\n};\n\n\u002F\u002F Inside of React component\n\u003CDocument options={options} \u002F>;\n```\n\n## User guide\n\n### Document\n\nLoads a document passed using `file` prop.\n\n#### Props\n\n| Prop name | Description | Default value | Example values |\n| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| className | Class name(s) that will be added to rendered element along with the default `react-pdf__Document`. | n\u002Fa | \u003Cul>\u003Cli>String:\u003Cbr \u002F>`\"custom-class-name-1 custom-class-name-2\"`\u003C\u002Fli>\u003Cli>Array of strings:\u003Cbr \u002F>`[\"custom-class-name-1\", \"custom-class-name-2\"]`\u003C\u002Fli>\u003C\u002Ful> |\n| error | What the component should display in case of an error. | `\"Failed to load PDF file.\"` | \u003Cul>\u003Cli>String:\u003Cbr \u002F>`\"An error occurred!\"`\u003C\u002Fli>\u003Cli>React element:\u003Cbr \u002F>`\u003Cp>An error occurred!\u003C\u002Fp>`\u003C\u002Fli>\u003Cli>Function:\u003Cbr \u002F>`this.renderError`\u003C\u002Fli>\u003C\u002Ful> |\n| externalLinkRel | Link rel for links rendered in annotations. | `\"noopener noreferrer nofollow\"` | One of valid [values for `rel` attribute](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fa#attr-rel).\u003Cul>\u003Cli>`\"noopener\"`\u003C\u002Fli>\u003Cli>`\"noreferrer\"`\u003C\u002Fli>\u003Cli>`\"nofollow\"`\u003C\u002Fli>\u003Cli>`\"noopener noreferrer\"`\u003C\u002Fli>\u003C\u002Ful> |\n| externalLinkTarget | Link target for external links rendered in annotations. | unset, which means that default behavior will be used | One of valid [values for `target` attribute](https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fa#attr-target).\u003Cul>\u003Cli>`\"_self\"`\u003C\u002Fli>\u003Cli>`\"_blank\"`\u003C\u002Fli>\u003Cli>`\"_parent\"`\u003C\u002Fli>\u003Cli>`\"_top\"`\u003C\u002Fli>\u003C\u002Ful> |\n| file | What PDF should be displayed.\u003Cbr \u002F>Its value can be an URL, a file (imported using `import … from …` or from file input form element), or an object with parameters (`url` - URL; `data` - data, preferably Uint8Array; `range` - PDFDataRangeTransport.\u003Cbr \u002F>**Warning**: Since equality check (`===`) is used to determine if `file` object has changed, it must be memoized by setting it in component's state, `useMemo` or other similar technique. | n\u002Fa | \u003Cul>\u003Cli>URL:\u003Cbr \u002F>`\"https:\u002F\u002Fexample.com\u002Fsample.pdf\"`\u003C\u002Fli>\u003Cli>File:\u003Cbr \u002F>`import importedPdf from '..\u002Fstatic\u002Fsample.pdf'` and then\u003Cbr \u002F>`sample`\u003C\u002Fli>\u003Cli>Parameter object:\u003Cbr \u002F>`{ url: 'https:\u002F\u002Fexample.com\u002Fsample.pdf' }`\u003C\u002Ful> |\n| imageResourcesPath | The path used to prefix the src attributes of annotation SVGs. | n\u002Fa (pdf.js will fallback to an empty string) | `\"\u002Fpublic\u002Fimages\u002F\"` |\n| inputRef | A prop that behaves like [ref](https:\u002F\u002Freactjs.org\u002Fdocs\u002Frefs-and-the-dom.html), but it's passed to main `\u003Cdiv>` rendered by `\u003CDocument>` component. | n\u002Fa | \u003Cul>\u003Cli>Function:\u003Cbr \u002F>`(ref) => { this.myDocument = ref; }`\u003C\u002Fli>\u003Cli>Ref created using `createRef`:\u003Cbr \u002F>`this.ref = createRef();`\u003Cbr \u002F>…\u003Cbr \u002F>`inputRef={this.ref}`\u003C\u002Fli>\u003Cli>Ref created using `useRef`:\u003Cbr \u002F>`const ref = useRef();`\u003Cbr \u002F>…\u003Cbr \u002F>`inputRef={ref}`\u003C\u002Fli>\u003C\u002Ful> |\n| loading | What the component should display while loading. | `\"Loading PDF…\"` | \u003Cul>\u003Cli>String:\u003Cbr \u002F>`\"Please wait!\"`\u003C\u002Fli>\u003Cli>React element:\u003Cbr \u002F>`\u003Cp>Please wait!\u003C\u002Fp>`\u003C\u002Fli>\u003Cli>Function:\u003Cbr \u002F>`this.renderLoader`\u003C\u002Fli>\u003C\u002Ful> |\n| noData | What the component should display in case of no data. | `\"No PDF file specified.\"` | \u003Cul>\u003Cli>String:\u003Cbr \u002F>`\"Please select a file.\"`\u003C\u002Fli>\u003Cli>React element:\u003Cbr \u002F>`\u003Cp>Please select a file.\u003C\u002Fp>`\u003C\u002Fli>\u003Cli>Function:\u003Cbr \u002F>`this.renderNoData`\u003C\u002Fli>\u003C\u002Ful> |\n| onItemClick | Function called when an outline item or a thumbnail has been clicked. Usually, you would like to use this callback to move the user wherever they requested to. | n\u002Fa | `({ dest, pageIndex, pageNumber }) => alert('Clicked an item from page ' + pageNumber + '!')` |\n| onLoadError | Function called in case of an error while loading a document. | n\u002Fa | `(error) => alert('Error while loading document! ' + error.message)` |\n| onLoadProgress | Function called, potentially multiple times, as the loading progresses. | n\u002Fa | `({ loaded, total }) => alert('Loading a document: ' + (loaded \u002F total) * 100 + '%')` |\n| onLoadSuccess | Function called when the document is successfully loaded. | n\u002Fa | `(pdf) => alert('Loaded a file with ' + pdf.numPages + ' pages!')` |\n| onPassword | Function called when a password-protected PDF is loaded. | Function that prompts the user for password. | `(callback) => callback('s3cr3t_p4ssw0rd')` |\n| onSourceError | Function called in case of an error while retrieving document source from `file` prop. | n\u002Fa | `(error) => alert('Error while retrieving document source! ' + error.message)` |\n| onSourceSuccess | Function called when document source is successfully retrieved from `file` prop. | n\u002Fa | `() => alert('Document source retrieved!')` |\n| options | An object in which additional parameters to be passed to PDF.js can be defined. Most notably:\u003Cul>\u003Cli>`cMapUrl`;\u003C\u002Fli>\u003Cli>`httpHeaders` - custom request headers, e.g. for authorization);\u003C\u002Fli>\u003Cli>`withCredentials` - a boolean to indicate whether or not to include cookies in the request (defaults to `false`)\u003C\u002Fli>\u003C\u002Ful>For a full list of possible parameters, check [PDF.js documentation on DocumentInitParameters](https:\u002F\u002Fmozilla.github.io\u002Fpdf.js\u002Fapi\u002Fdraft\u002Fmodule-pdfjsLib.html#~DocumentInitParameters).\u003Cbr \u002F>\u003Cbr \u002F>**Note**: Make sure to define options object outside of your React component or use `useMemo` if you can't. | n\u002Fa | `{ cMapUrl: '\u002Fcmaps\u002F' }` |\n| renderMode | Rendering mode of the document. Can be `\"canvas\"`, `\"custom\"` or `\"none\"`. If set to `\"custom\"`, `customRenderer` must also be provided. | `\"canvas\"` | `\"custom\"` |\n| rotate | Rotation of the document in degrees. If provided, will change rotation globally, even for the pages which were given `rotate` prop of their own. `90` = rotated to the right, `180` = upside down, `270` = rotated to the left. | n\u002Fa | `90` |\n| scale | Document scale. | `1` | `0.5` |\n\n### Page\n\nDisplays a page. Should be placed inside `\u003CDocument \u002F>`. Alternatively, it can have `pdf` prop passed, which can be obtained from `\u003CDocument \u002F>`'s `onLoadSuccess` callback function, however some advanced functions like rendering annotations and linking between pages inside a document may not be working correctly.\n\n#### Props\n\n| Prop name | Description | Default value | Example values |\n| ------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| canvasBackground | Canvas background color. Any valid `canvas.fillStyle` can be used. | n\u002Fa | `\"transparent\"` |\n| canvasRef | A prop that behaves like [ref](https:\u002F\u002Freactjs.org\u002Fdocs\u002Frefs-and-the-dom.html), but it's passed to `\u003Ccanvas>` rendered by `\u003CCanvas>` component. | n\u002Fa | \u003Cul>\u003Cli>Function:\u003Cbr \u002F>`(ref) => { this.myCanvas = ref; }`\u003C\u002Fli>\u003Cli>Ref created using `createRef`:\u003Cbr \u002F>`this.ref = createRef();`\u003Cbr \u002F>…\u003Cbr \u002F>`inputRef={this.ref}`\u003C\u002Fli>\u003Cli>Ref created using `useRef`:\u003Cbr \u002F>`const ref = useRef();`\u003Cbr \u002F>…\u003Cbr \u002F>`inputRef={ref}`\u003C\u002Fli>\u003C\u002Ful> |\n| className | Class name(s) that will be added to rendered element along with the default `react-pdf__Page`. | n\u002Fa | \u003Cul>\u003Cli>String:\u003Cbr \u002F>`\"custom-class-name-1 custom-class-name-2\"`\u003C\u002Fli>\u003Cli>Array of strings:\u003Cbr \u002F>`[\"custom-class-name-1\", \"custom-class-name-2\"]`\u003C\u002Fli>\u003C\u002Ful> |\n| customRenderer | Function that customizes how a page is rendered. You must set `renderMode` to `\"custom\"` to use this prop. | n\u002Fa | `MyCustomRenderer` |\n| customTextRenderer | Function that customizes how a text layer is rendered. | n\u002Fa | ``({ str, itemIndex }) => str.replace(\u002Fipsum\u002Fg, value => `\u003Cmark>${value}\u003C\u002Fmark>`)`` |\n| devicePixelRatio | The ratio between physical pixels and device-independent pixels (DIPs) on the current device. | `window.devicePixelRatio` | `1` |\n| error | What the component should display in case of an error. | `\"Failed to load the page.\"` | \u003Cul>\u003Cli>String:\u003Cbr \u002F>`\"An error occurred!\"`\u003C\u002Fli>\u003Cli>React element:\u003Cbr \u002F>`\u003Cp>An error occurred!\u003C\u002Fp>`\u003C\u002Fli>\u003Cli>Function:\u003Cbr \u002F>`this.renderError`\u003C\u002Fli>\u003C\u002Ful> |\n| filterAnnotations | Function to filter annotations before they are rendered. | n\u002Fa | `({ annotations }) => annotations.filter(annotation => annotation.subtype === 'Text')` |\n| height | Page height. If neither `height` nor `width` are defined, page will be rendered at the size defined in PDF. If you define `width` and `height` at the same time, `height` will be ignored. If you define `height` and `scale` at the same time, the height will be multiplied by a given factor. | Page's default height | `300` |\n| imageResourcesPath | The path used to prefix the src attributes of annotation SVGs. | n\u002Fa (pdf.js will fallback to an empty string) | `\"\u002Fpublic\u002Fimages\u002F\"` |\n| inputRef | A prop that behaves like [ref](https:\u002F\u002Freactjs.org\u002Fdocs\u002Frefs-and-the-dom.html), but it's passed to main `\u003Cdiv>` rendered by `\u003CPage>` component. | n\u002Fa | \u003Cul>\u003Cli>Function:\u003Cbr \u002F>`(ref) => { this.myPage = ref; }`\u003C\u002Fli>\u003Cli>Ref created using `createRef`:\u003Cbr \u002F>`this.ref = createRef();`\u003Cbr \u002F>…\u003Cbr \u002F>`inputRef={this.ref}`\u003C\u002Fli>\u003Cli>Ref created using `useRef`:\u003Cbr \u002F>`const ref = useRef();`\u003Cbr \u002F>…\u003Cbr \u002F>`inputRef={ref}`\u003C\u002Fli>\u003C\u002Ful> |\n| loading | What the component should display while loading. | `\"Loading page…\"` | \u003Cul>\u003Cli>String:\u003Cbr \u002F>`\"Please wait!\"`\u003C\u002Fli>\u003Cli>React element:\u003Cbr \u002F>`\u003Cp>Please wait!\u003C\u002Fp>`\u003C\u002Fli>\u003Cli>Function:\u003Cbr \u002F>`this.renderLoader`\u003C\u002Fli>\u003C\u002Ful> |\n| noData | What the component should display in case of no data. | `\"No page specified.\"` | \u003Cul>\u003Cli>String:\u003Cbr \u002F>`\"Please select a page.\"`\u003C\u002Fli>\u003Cli>React element:\u003Cbr \u002F>`\u003Cp>Please select a page.\u003C\u002Fp>`\u003C\u002Fli>\u003Cli>Function:\u003Cbr \u002F>`this.renderNoData`\u003C\u002Fli>\u003C\u002Ful> |\n| onGetAnnotationsError | Function called in case of an error while loading annotations. | n\u002Fa | `(error) => alert('Error while loading annotations! ' + error.message)` |\n| onGetAnnotationsSuccess | Function called when annotations are successfully loaded. | n\u002Fa | `(annotations) => alert('Now displaying ' + annotations.length + ' annotations!')` |\n| onGetStructTreeError | Function called in case of an error while loading structure tree. | n\u002Fa | `(error) => alert('Error while loading structure tree! ' + error.message)` |\n| onGetStructTreeSuccess | Function called when structure tree is successfully loaded. | n\u002Fa | `(structTree) => alert(JSON.stringify(structTree))` |\n| onGetTextError | Function called in case of an error while loading text layer items. | n\u002Fa | `(error) => alert('Error while loading text layer items! ' + error.message)` |\n| onGetTextSuccess | Function called when text layer items are successfully loaded. | n\u002Fa | `({ items, styles }) => alert('Now displaying ' + items.length + ' text layer items!')` |\n| onLoadError | Function called in case of an error while loading the page. | n\u002Fa | `(error) => alert('Error while loading page! ' + error.message)` |\n| onLoadSuccess | Function called when the page is successfully loaded. | n\u002Fa | `(page) => alert('Now displaying a page number ' + page.pageNumber + '!')` |\n| onRenderAnnotationLayerError | Function called in case of an error while rendering the annotation layer. | n\u002Fa | `(error) => alert('Error while loading annotation layer! ' + error.message)` |\n| onRenderAnnotationLayerSuccess | Function called when annotations are successfully rendered on the screen. | n\u002Fa | `() => alert('Rendered the annotation layer!')` |\n| onRenderError | Function called in case of an error while rendering the page. | n\u002Fa | `(error) => alert('Error while loading page! ' + error.message)` |\n| onRenderSuccess | Function called when the page is successfully rendered on the screen. | n\u002Fa | `() => alert('Rendered the page!')` |\n| onRenderTextLayerError | Function called in case of an error while rendering the text layer. | n\u002Fa | `(error) => alert('Error while rendering text layer! ' + error.message)` |\n| onRenderTextLayerSuccess | Function called when the text layer is successfully rendered on the screen. | n\u002Fa | `() => alert('Rendered the text layer!')` |\n| pageColors | Colors used to render the page. If not provided, the default colors from PDF will be used. | n\u002Fa | `{ background: 'black', foreground: '#ffff00' }` |\n| pageIndex | Which page from PDF file should be displayed, by page index. Ignored if `pageNumber` prop is provided. | `0` | `1` |\n| pageNumber | Which page from PDF file should be displayed, by page number. If provided, `pageIndex` prop will be ignored. | `1` | `2` |\n| pdf | pdf object obtained from `\u003CDocument \u002F>`'s `onLoadSuccess` callback function. | (automatically obtained from parent `\u003CDocument \u002F>`) | `pdf` |\n| renderAnnotationLayer | Whether annotations (e.g. links) should be rendered. | `true` | `false` |\n| renderForms | Whether forms should be rendered. `renderAnnotationLayer` prop must be set to `true`. | `false` | `true` |\n| renderMode | Rendering mode of the document. Can be `\"canvas\"`, `\"custom\"` or `\"none\"`. If set to `\"custom\"`, `customRenderer` must also be provided. | `\"canvas\"` | `\"custom\"` |\n| renderTextLayer | Whether a text layer should be rendered. | `true` | `false` |\n| rotate | Rotation of the page in degrees. `90` = rotated to the right, `180` = upside down, `270` = rotated to the left. | Page's default setting, usually `0` | `90` |\n| scale | Page scale. | `1` | `0.5` |\n| width | Page width. If neither `height` nor `width` are defined, page will be rendered at the size defined in PDF. If you define `width` and `height` at the same time, `height` will be ignored. If you define `width` and `scale` at the same time, the width will be multiplied by a given factor. | Page's default width | `300` |\n\n### Outline\n\nDisplays an outline (table of contents). Should be placed inside `\u003CDocument \u002F>`. Alternatively, it can have `pdf` prop passed, which can be obtained from `\u003CDocument \u002F>`'s `onLoadSuccess` callback function.\n\n#### Props\n\n| Prop name | Description ","react-pdf 是一个用于在 React 应用中轻松展示 PDF 文件的库，就像显示图片一样简单。它支持多种文件来源，包括 URL、base64 编码的内容和 Uint8Array 等，并且允许通过 `\u003CDocument>` 和 `\u003CPage>` 组件来渲染 PDF 文档及其页面。该库使用 TypeScript 编写，保证了代码质量和类型安全。适用于需要在网页应用内嵌入 PDF 查看功能的各种场景，如在线文档预览、电子书阅读等。",2,"2026-06-11 03:33:43","high_star"]