first commit
Some checks failed
Types tests / Test (lts/*) (push) Has been cancelled
Lint / Lint (lts/*) (push) Has been cancelled
CodeQL / Analyze (javascript) (push) Has been cancelled
CI / Test (20) (push) Has been cancelled
CI / Test (22) (push) Has been cancelled
CI / Test (24) (push) Has been cancelled

This commit is contained in:
2025-10-03 22:20:19 +08:00
commit 44db9807a1
2172 changed files with 526822 additions and 0 deletions

View File

@@ -0,0 +1,11 @@
---
title: API
layout: layout.njk
slug: api
---
# API
The generated API documentation, from the inline comments in [api.js](https://github.com/mozilla/pdf.js/blob/master/src/display/api.js), is available below.
<iframe src="draft/index.html" title="PDF.js API documentation"></iframe>

View File

@@ -0,0 +1,100 @@
/*!
Theme: a11y-light
Author: @ericwbailey
Maintainer: @ericwbailey
Based on the Tomorrow Night Eighties theme: https://github.com/isagalaev/highlight.js/blob/master/src/styles/tomorrow-night-eighties.css
Original source: https://github.com/highlightjs/highlight.js/blob/main/src/styles/a11y-light.css
*/
.hljs {
background: #fefefe;
color: #545454;
}
/* Comment */
.hljs-comment,
.hljs-quote {
color: #696969;
}
/* Red */
.hljs-variable,
.hljs-template-variable,
.hljs-tag,
.hljs-name,
.hljs-selector-id,
.hljs-selector-class,
.hljs-regexp,
.hljs-deletion {
color: #d91e18;
}
/* Orange */
.hljs-number,
.hljs-built_in,
.hljs-literal,
.hljs-type,
.hljs-params,
.hljs-meta,
.hljs-link {
color: #aa5d00;
}
/* Yellow */
.hljs-attribute {
color: #aa5d00;
}
/* Green */
.hljs-string,
.hljs-symbol,
.hljs-bullet,
.hljs-addition {
color: #008000;
}
/* Blue */
.hljs-title,
.hljs-section {
color: #007faa;
}
/* Purple */
.hljs-keyword,
.hljs-selector-tag {
color: #7928a1;
}
.hljs-emphasis {
font-style: italic;
}
.hljs-strong {
font-weight: bold;
}
@media screen and (-ms-high-contrast: active) {
.hljs-addition,
.hljs-attribute,
.hljs-built_in,
.hljs-bullet,
.hljs-comment,
.hljs-link,
.hljs-literal,
.hljs-meta,
.hljs-number,
.hljs-params,
.hljs-string,
.hljs-symbol,
.hljs-type,
.hljs-quote {
color: highlight;
}
.hljs-keyword,
.hljs-selector-tag {
font-weight: bold;
}
}

7
docs/contents/css/bootstrap.min.css vendored Normal file

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,40 @@
header {
background-color: #f8f8f8;
border-bottom: 1px solid #e5e7e8;
.navbar-brand {
padding: 0;
img {
height: 42px;
}
}
}
main {
margin: 50px 0;
.description {
font-size: 20px;
}
pre {
background-color: #f5f5f5;
border: 1px solid #cccccc;
border-radius: 4px;
padding: 10px;
}
iframe {
border: none;
height: calc(0.55 * 100vh);
width: 100%;
}
}
footer {
border-top: 1px solid #e5e5e5;
color: #777777;
padding: 40px 0;
text-align: center;
}

View File

@@ -0,0 +1,100 @@
---
title: Examples
layout: layout.njk
slug: examples
---
## Hello World Walkthrough
[Full source](https://github.com/mozilla/pdf.js/blob/master/examples/learning/helloworld.html)
PDF.js heavily relies on the use of [Promises](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise). If promises are new to you, it's recommended you become familiar with them before continuing on.
This tutorial shows how PDF.js can be used as a library in a web browser.
[examples/](https://github.com/mozilla/pdf.js/tree/master/examples) provides more examples, including usage in Node.js (at [examples/node/](https://github.com/mozilla/pdf.js/tree/master/examples/node)).
### Document
The object structure of PDF.js loosely follows the structure of an actual PDF. At the top level there is a document object. From the document, more information and individual pages can be fetched. To get the document:
```js
pdfjsLib.getDocument('helloworld.pdf')
```
Remember though that PDF.js uses promises, and the above will return a `PDFDocumentLoadingTask` instance that has a `promise` property which is resolved with the document object.
```js
var loadingTask = pdfjsLib.getDocument('helloworld.pdf');
loadingTask.promise.then(function(pdf) {
// you can now use *pdf* here
});
```
### Page
Now that we have the document, we can get a page. Again, this uses promises.
```js
pdf.getPage(1).then(function(page) {
// you can now use *page* here
});
```
### Rendering the Page
Each PDF page has its own viewport which defines the size in pixels(72DPI) and initial rotation. By default the viewport is scaled to the original size of the PDF, but this can be changed by modifying the viewport. When the viewport is created, an initial transformation matrix will also be created that takes into account the desired scale, rotation, and it transforms the coordinate system (the 0,0 point in PDF documents the bottom-left whereas canvas 0,0 is top-left).
```js
var scale = 1.5;
var viewport = page.getViewport({ scale: scale, });
// Support HiDPI-screens.
var outputScale = window.devicePixelRatio || 1;
var canvas = document.getElementById('the-canvas');
var context = canvas.getContext('2d');
canvas.width = Math.floor(viewport.width * outputScale);
canvas.height = Math.floor(viewport.height * outputScale);
canvas.style.width = Math.floor(viewport.width) + "px";
canvas.style.height = Math.floor(viewport.height) + "px";
var transform = outputScale !== 1
? [outputScale, 0, 0, outputScale, 0, 0]
: null;
var renderContext = {
canvasContext: context,
transform: transform,
viewport: viewport
};
page.render(renderContext);
```
Alternatively, if you want the canvas to render to a certain pixel size you could do the following:
```js
var desiredWidth = 100;
var viewport = page.getViewport({ scale: 1, });
var scale = desiredWidth / viewport.width;
var scaledViewport = page.getViewport({ scale: scale, });
```
## Interactive examples
### Hello World with document load error handling
The example demonstrates how promises can be used to handle errors during loading.
It also demonstrates how to wait until a page is loaded and rendered.
<script async src="https://jsfiddle.net/pdfjs/9engc9mw/embed/html,css,result/"></script>
### Hello World using base64 encoded PDF
The PDF.js can accept any decoded base64 data as an array.
<script async src="https://jsfiddle.net/pdfjs/cq0asLqz/embed/html,css,result/"></script>
### Previous/Next example
The same canvas cannot be used to perform to draw two pages at the same time --
the example demonstrates how to wait on previous operation to be complete.
<script async src="https://jsfiddle.net/pdfjs/wagvs9Lf/embed/html,css,result/"></script>

View File

@@ -0,0 +1,127 @@
---
title: Getting Started
layout: layout.njk
slug: getting_started
---
# Getting Started
An introduction to PDF.js with examples.
## Introduction
Before downloading PDF.js please take a moment to understand the different layers of the PDF.js project.
<table class="table">
<thead>
<tr>
<th>Layer</th>
<th>About</th>
</tr>
</thead>
<tbody>
<tr>
<td>Core</td>
<td>The core layer is where a binary PDF is parsed and interpreted. This layer is the foundation for all subsequent layers. It is not documented here because using it directly is considered an advanced usage and the API is likely to change. For an example of using the core layer see the <a href="https://github.com/brendandahl/pdf.js.utils/tree/master/browser">PDF Object Browser</a>.
</td>
</tr>
<tr>
<td>Display</td>
<td>The display layer takes the core layer and exposes an easier to use API to render PDFs and get other information out of a document. This API is what the version number is based on.</td>
</tr>
<tr>
<td>Viewer</td>
<td>The viewer is built on the display layer and is the UI for PDF viewer in Firefox and the other browser extensions within the project. It can be a good starting point for building your own viewer. <em>However, we do ask if you plan to embed the viewer in your own site, that it not just be an unmodified version. Please re-skin it or build upon it.</em></td>
</tr>
</tbody>
</table>
## Download
Please refer to [this wiki page](https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-support) for information about supported browsers.
<div class="row">
<div class="col-md-4">
<h3>Prebuilt (modern browsers)</h3>
<p>
Includes the generic build of PDF.js and the viewer.
</p>
<a type="button" class="btn btn-primary" href="https://github.com/mozilla/pdf.js/releases/download/vSTABLE_VERSION/pdfjs-STABLE_VERSION-dist.zip">Stable (vSTABLE_VERSION)</a>
</div>
<div class="col-md-4">
<h3>Prebuilt (older browsers)</h3>
<p>
Includes the generic build of PDF.js and the viewer.
</p>
<a type="button" class="btn btn-primary" href="https://github.com/mozilla/pdf.js/releases/download/vSTABLE_VERSION/pdfjs-STABLE_VERSION-legacy-dist.zip">Stable (vSTABLE_VERSION)</a>
</div>
<div class="col-md-4">
<h3>Source</h3>
To get a local copy of the current code, clone it using git:
<pre><code>$ git clone https://github.com/mozilla/pdf.js.git
$ cd pdf.js
</code></pre>
</div>
</div>
## Including via a CDN
PDF.js is hosted on several free CDNs:
- https://www.jsdelivr.com/package/npm/pdfjs-dist
- https://cdnjs.com/libraries/pdf.js
- https://unpkg.com/pdfjs-dist/
## File Layout Overview
Note that we only mention the most relevant files and folders.
### Prebuilt
```plaintext
├── build/
│ ├── pdf.mjs - display layer
│ ├── pdf.mjs.map - display layer's source map
│ ├── pdf.worker.mjs - core layer
│ └── pdf.worker.mjs.map - core layer's source map
├── web/
│ ├── cmaps/ - character maps (required by core)
│ ├── compressed.tracemonkey-pldi-09.pdf - PDF file for testing purposes
│ ├── images/ - images for the viewer and annotation icons
│ ├── locale/ - translation files
│ ├── viewer.css - viewer style sheet
│ ├── viewer.html - viewer layout
│ ├── viewer.mjs - viewer layer
│ └── viewer.mjs.map - viewer layer's source map
└── LICENSE
```
### Source
```plaintext
├── docs/ - website source code
├── examples/ - simple usage examples
├── extensions/ - browser extension source code
├── external/ - third party code
├── l10n/ - translation files
├── src/
│ ├── core/ - core layer
│ ├── display/ - display layer
│ ├── shared/ - shared code between the core and display layers
│ ├── interfaces.js - interface definitions for the core/display layers
│ └── pdf.*.js - wrapper files for bundling
├── test/ - unit, font, reference, and integration tests
├── web/ - viewer layer
├── LICENSE
├── README.md
├── gulpfile.mjs - build scripts/logic
├── package-lock.json - pinned dependency versions
└── package.json - package definition and dependencies
```
## Trying the Viewer
With the prebuilt or source version, open `web/viewer.html` in a browser and the test pdf should load. Note: the worker is not enabled for file:// urls, so use a server. If you're using the source build and have node, you can run `npx gulp server`.
## More Information
For a further walkthrough of a minimal viewer, see the hello world example. More documentation can be found in our [wiki](https://github.com/mozilla/pdf.js/wiki) too.

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

View File

@@ -0,0 +1,41 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns="http://www.w3.org/2000/svg"
width="64"
height="64">
<path
d="M 4.8364028,0.4891005 32.096378,4.5726641 59.163597,0.4891005 54.680408,57.805097 32.096378,63.510899 8.3116209,57.805097 z"
style="fill:#e5e7e8;fill-opacity:1;fill-rule:nonzero;stroke:#cccccc" />
<path
d="M 32.096378,10.745857 53.925414,6.8301117 51.016574,53.81906 32.096378,58.517955 z"
style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<rect
width="34.027256"
height="19.136194"
x="3.7557135"
y="22.431904"
style="fill:#ff2600;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<rect
width="23.480518"
height="19.136194"
x="36.763767"
y="22.431904"
style="fill:#ff501a;fill-opacity:1;fill-rule:nonzero;stroke:none" />
<g transform="matrix(0.42778543,0,0,0.42778543,58.617711,9.6737064)">
<path
d="m -120.53125,34.59375 0,35.1875 6.53125,0 0,-5.9375 0,-5.96875 8.875,0 4.15625,-3.71875 0,-7.71875 0,-7.71875 -4.21875,-4.125 -15.34375,0 z m 6.53125,6.8125 6.21875,0 0,10.21875 -6.21875,0 0,-10.21875 z"
style="fill:#ffffff;fill-opacity:1" />
<path
d="m -98.125,34.59375 0,35.1875 16.125,0 3.75,-3.625 0,-27.96875 -3.96875,-3.59375 -15.90625,0 z m 6.8125,6.8125 6.8125,0 0,21.5625 -6.8125,0 0,-21.5625 z" id="path3056"
style="fill:#ffffff;fill-opacity:1" />
<path
d="m -74.856072,34.602929 c 5.485697,0 10.971394,0 16.457091,0 0,2.269943 0,4.539887 0,6.80983 -3.404915,0 -6.809831,0 -10.214746,0 0,2.472069 0,4.944138 0,7.416206 2.93201,0.110496 5.864021,-0.110494 8.796031,0 l 0,3.366025 0,3.375914 c -2.93201,0.110495 -5.864021,-0.110495 -8.796031,0 l 0,7.146446 0,7.069702 c -2.080782,0 -4.161563,0 -6.242345,0 0,-11.728041 0,-23.456082 0,-35.184123 z"
style="fill:#ffffff;fill-opacity:1" />
<path
d="m -42.8813,67.942723 -2.181762,-1.844329 c 0,-1.986871 0,-3.973742 0,-5.960613 2.175363,6.7e-4 4.350725,0.0013 6.526088,0.002 0,0.94581 0,1.891619 0,2.837429 1.891619,0 3.783239,0 5.674858,0 0,-9.458098 0,-18.916195 0,-28.374293 2.175363,-1.26e-4 4.350725,-2.52e-4 6.526088,-3.78e-4 0,10.498614 0,20.997229 0,31.495843 -1.454508,1.229554 -2.909019,2.459106 -4.363529,3.688658 -3.333325,0 -6.666651,0 -9.999976,0 -0.727237,-0.614768 -1.454563,-1.229595 -2.181767,-1.844308 z"
style="fill:#ffffff;fill-opacity:1" />
<path
d="m -21.316836,67.942723 -2.109122,-1.844329 0,-5.978379 c 2.061011,0 4.392437,0.01978 6.453448,0.01978 0,0.94581 0,1.891619 0,2.837429 2.269943,0 4.539887,0 6.80983,0 0,-2.459105 0,-4.918211 0,-7.377316 -3.196954,0 -6.393909,0 -9.590863,0 l -3.745055,-3.688659 0,-6.80983 0,-6.80983 3.745055,-3.688658 c 3.863156,0 7.726313,0 11.5894692,0 l 4.2511106,3.688658 c -0.00204,1.797039 -0.00472,3.594077 -0.00737,5.391115 -2.0807816,0 -4.1615632,0 -6.2423448,0 0,-0.756648 0,-1.513295 0,-2.269943 -2.269943,0 -4.539887,0 -6.80983,0 0,2.459105 0,4.918211 0,7.377316 2.990126,0 5.980253,0 8.9703792,0 1.3605964,1.204585 4.0817956,3.613749 4.0817956,3.613749 0,4.555246 0,9.110492 0,13.665738 l -2.0892845,1.858745 -2.0892901,1.858745 -5.5180792,0 -5.51808,0 z"
style="fill:#ffffff;fill-opacity:1" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 3.2 KiB

13
docs/contents/index.md Normal file
View File

@@ -0,0 +1,13 @@
---
title: Home
layout: layout.njk
slug: home
---
<h1 class="text-center">PDF.js</h1>
<p class="text-center description">A general-purpose, web standards-based platform for parsing and rendering PDFs.</p>
<p class="text-center">
<a type="button" class="btn btn-outline-dark" href="/getting_started/#download">Download</a>
<a type="button" class="btn btn-outline-dark" href="https://github.com/mozilla/pdf.js#online-demo">Demo</a>
<a type="button" class="btn btn-outline-dark" href="https://github.com/mozilla/pdf.js">GitHub Project</a>
</p>

7
docs/contents/js/bootstrap.min.js vendored Normal file

File diff suppressed because one or more lines are too long

2
docs/contents/js/jquery-3.7.1.min.js vendored Normal file

File diff suppressed because one or more lines are too long