vue-pdf-app

library2.1.0jsnpmunverified

vue-pdf-app is a Vue 2 component that integrates Mozilla's PDF.js library to provide a full-featured PDF viewer within web applications. It offers 100% of PDF.js functionality, including zooming, opening, printing, downloading, rotating, text selection, search, password protection, and support for thumbnails, outlines, and annotation layers. The current stable version is 2.1.0, with major updates like v2.0.0 introducing significant changes. While there isn't a strict release cadence, updates are made as needed to introduce new features and address bugs. Key differentiators include an easily localizable and configurable toolbar, custom UI options, built-in TypeScript support, cross-browser compatibility (including IE11 for core functionality, though with some feature limitations), and customizable themes and button icons. The component also supports UMD/Unpkg distribution. It aims to provide a comprehensive and highly customizable PDF viewing experience for Vue 2 applications.

web-framework serialization

npm install vue-pdf-app

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-PDF-APP

vue-pdf-app

web-frameworkjavascriptv2.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

VuePdfApp

✓ import VuePdfApp from 'vue-pdf-app';

✗ import { VuePdfApp } from 'vue-pdf-app';

The component is exported as a default export. For CommonJS, you might need `require('vue-pdf-app').default`.

main.css

✓ import 'vue-pdf-app/dist/icons/main.css';

✗ import 'vue-pdf-app/icons/main.css';

This CSS file is essential for the default toolbar icons to display correctly. It must be imported from the `dist` directory.

Demonstrates how to integrate the `VuePdfApp` component into a Vue 2 application, loading a PDF from a URL and applying default toolbar icons.

<template> <vue-pdf-app pdf="http://example.com/sample.pdf"></vue-pdf-app> </template> <script lang="ts"> import VuePdfApp from "vue-pdf-app"; // import this to use default icons for buttons import "vue-pdf-app/dist/icons/main.css"; export default { components: { VuePdfApp } }; </script>

Debug

Known issues

breakingMajor version `v2.0.0` likely introduced significant breaking changes to the API and component usage, as is common with major version bumps. Always consult the `CHANGELOG.md` when upgrading from `v1.x` to `v2.x` to understand necessary migration steps.

fix

Consult the official CHANGELOG.md for migration instructions and updated API documentation.

affects: >=2.0.0

gotchaWhen providing a PDF document as an `ArrayBuffer` or `TypedArray` to the `pdf` prop, the default filename for downloads will be `document.pdf`. This can be misleading to users.

fix

Set the `:fileName` prop to a descriptive string, e.g., `<vue-pdf-app :pdf="ArrayBuffer" file-name="my-report.pdf" />`.

affects: >=2.1.0

gotchaWhile `vue-pdf-app` supports Internet Explorer 11 for core PDF viewing functionality, specific features like color customization for themes are not supported in this browser.

fix

If targeting IE11, be aware of feature limitations, particularly regarding visual customizations. Ensure fallbacks or alternative experiences for IE11 users.

affects: *

gotchaPDF.js, which `vue-pdf-app` is based on, stores the last viewed page of a document in `window.localStorage`. If you need to force a specific initial page, this local storage value might override your intention.

fix

Explicitly use the `:pageNumber` prop (e.g., `<vue-pdf-app :page-number="1" />`) to override any stored page number and ensure the desired starting page is displayed.

affects: >=2.1.0

Errors

Common errors & fixes

OffsetParent is not set

This error, often related to layout calculations within PDF.js, typically occurs when the component's containing element lacks a proper `offsetParent` (e.g., it's hidden or not yet mounted correctly).

fix

Ensure `vue-pdf-app` is rendered within a visible and properly positioned DOM element. If on an older version, upgrade to `vue-pdf-app@1.0.1` or higher, as a fix for this was included.

Toolbar icons are missing or appear as broken images/text.

The default CSS stylesheet for the toolbar icons has not been imported into your application.

fix

Add `import 'vue-pdf-app/dist/icons/main.css';` to your main application entry file or directly within the `<script>` section of your component, as shown in the quickstart example.

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

23 hits · last 30 days

node

OpenAI (training)

Resources

githubhttps://github.com/sandanat/vue-pdf-app ↗

packagehttps://www.npmjs.com/package/vue-pdf-app ↗