DOCSEARCHbyAlgolia
Submit Docs

PDF.js

repository·master·Indexed 13 days ago

https://github.com/mozilla/pdf.js

A web standards-based platform for parsing and rendering PDF documents using HTML5. Supported by Mozilla, it provides a library for PDF manipulation, including a Node.js example for converting PDF to PNG and integration options via the pdfjs-dist NPM package or CDNs.

Tokens
12.7K
Snippets
44
Records
72
Agent score
99%

What's inside PDF.js

  1. Understand the PDF.js architectural layers

    master

    PDF.js is organized into three distinct layers. Choosing the right layer depends on your use case:

    1. Core Layer: Responsible for parsing and interpreting binary PDF files. This is the foundation of the project. Direct usage of the Core layer is considered advanced, as its API is subject to change.
    2. Display Layer: Built on top of the Core layer, this provides a stable, easier-to-use API for rendering PDFs and extracting document information. This layer's API is what the project's version numbers track.
    3. Viewer Layer: Built on top of the Display layer, this is the full UI used in Firefox and other browser extensions. It is a complete PDF viewer application. If you embed the viewer in your own site, it is recommended to re-skin or build upon it rather than using an unmodified version.

  2. Understand the binary CMap (bcmap) format

    master
    The bcmap format is a binary representation of CMap files (found in external/cmap) optimized for size. It stores data in network byte order (big-endian). The format consists of a single-byte header followed by a series of records. Each record begins with a header byte that defines its type and structure.

  3. Avoid concurrent rendering on a single canvas

    master
    A single HTML5 canvas cannot be used to draw two pages simultaneously. When implementing navigation (like 'Previous' and 'Next' buttons), you must ensure that the previous rendering operation has completed before starting a new page.render() call on the same canvas context.

  4. Build a custom Chrome extension

    master

    You can build your own Chrome extension using the PDF.js source code:

    1. Get the code using the 'Getting the Code' steps.
    2. Run npx gulp chromium to build the extension.
    3. Open Chrome and navigate to Tools > Extension.
    4. Load the (unpackaged) extension from the build/chromium directory.
    npx gulp chromium

  5. Configure minification for PDF.js Webpack builds

    master
    When using Webpack to generate a minified build of PDF.js, you must configure your minifier (e.g., Terser) to preserve the original class and function names. If names are mangled during minification, the build is not guaranteed to work correctly.

  6. Run the PDF.js Viewer locally

    master

    To try out the viewer using either the prebuilt or source version, open web/viewer.html in a browser.

    Important: The worker is not enabled for file:// URLs. You must serve the files via a web server. If you are using the source build and have Node.js installed, you can start a local server using gulp:

    npx gulp server

  7. Build the quickjs-eval.js file

    master

    To generate the quickjs-eval.js file, you must have a Docker setup installed. Follow these steps:

    1. Clone the specific repository: git clone https://github.com/mozilla/pdf.js.quickjs/
    2. Build the Docker image using the build script: node build.js -C
    3. Compile the sandbox into the target directory: node build.js -co /pdf.js/external/quickjs/
    git clone https://github.com/mozilla/pdf.js.quickjs/
node build.js -C
node build.js -co /pdf.js/external/quickjs/

  8. Find which tests cover a specific line of code

    master

    The coverage_search command allows you to identify which reference tests exercise a specific source line or function. This uses a per-test-index.json file.

    Search for coverage

    Use the --code flag with the format filename.js::line_number or filename.js::function_name:

    npx gulp coverage_search --code="canvas.js::205"
npx gulp coverage_search --code="canvas.js::drawImageAtIntegerCoords"

    Run only relevant tests

    You can run or regenerate reference images for only the tests that touch a specific line by passing the --code option to browsertest or makeref:

    npx gulp browsertest --code="canvas.js::205"
npx gulp makeref --code="canvas.js::205"

    Note: If you want to build the index locally instead of downloading it, use --coverage-per-test with botbrowsertest and then query it with --index=build/coverage/per-test-index.json --no-download.

    npx gulp coverage_search --code="canvas.js::205"

  11. Generate the jbig2.js decoder

    master

    To generate the jbig2.js file, you must first clone the specific jbig2 repository and have a Docker setup configured. The process involves building a Docker image and then compiling the decoder into the target directory.

    # 1. Clone the repository
git clone https://github.com/mozilla/pdf.js.jbig2/

# 2. Build the Docker image
node build.js -C

# 3. Compile the decoder
node build.js -co /pdf.js/external/jbig2/

  12. Use PDF.js in a web application

    master

    You can integrate PDF.js into your web application using pre-built versions or by building from source.

    Using NPM

    Pre-built versions are available via NPM under the pdfjs-dist package name.

    Using a CDN

    You can include PDF.js directly in your project using one of the following CDNs:

    • https://www.jsdelivr.com/package/npm/pdfjs-dist
    • https://cdnjs.cloudflare.com/libraries/pdf.js
    • https://unpkg.com/pdfjs-dist/

    Learning the API