Vue 2 PDF Viewer

2.1.0 verified Sat Apr 25 auth: no javascript

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.

Common errors

error OffsetParent is not set ↓

cause 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.

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

cause 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.

Warnings

breaking Major 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.

gotcha When 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" />`.

gotcha While `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.

gotcha PDF.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.

Install

npm install vue-pdf-app

yarn add vue-pdf-app

pnpm add vue-pdf-app

Imports

VuePdfApp
wrong
```
import { VuePdfApp } from 'vue-pdf-app';
```
correct
```
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
wrong
```
import 'vue-pdf-app/icons/main.css';
```
correct
```
import 'vue-pdf-app/dist/icons/main.css';
```
This CSS file is essential for the default toolbar icons to display correctly. It must be imported from the `dist` directory.

Quickstart

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>