@certifaction/vue-pdf-viewer

PDF-Viewer for Vue.js based on Mozillas PDF.js

Table of contents

• Install
  • As NPM package
• Usage
  • ES6
  • Load locales
  • Load stylesheet
• License

Install

As NPM package

npm install @certifaction/vue-pdf-viewer

# or if using yarn
yarn add @certifaction/vue-pdf-viewer

Usage

ES6

import PDFViewer from '@certifaction/vue-pdf-viewer'

new Vue({
    components: {
        PDFViewer
    }
})

Load locales

Example code how to load the component translations:

import merge from 'lodash.merge'

import pdfViewerEN from '@certifaction/vue-pdf-viewer/src/locales/en.json'
import pdfViewerDE from '@certifaction/vue-pdf-viewer/src/locales/de.json'
import pdfViewerFR from '@certifaction/vue-pdf-viewer/src/locales/fr.json'
import pdfViewerIT from '@certifaction/vue-pdf-viewer/src/locales/it.json'

function loadLocaleMessages() {
    // Load your messages
}

const messages = merge({
    en: pdfViewerEN,
    de: pdfViewerDE,
    fr: pdfViewerFR,
    it: pdfViewerIT
}, loadLocaleMessages())

new VueI18n({
    messages
})

Load stylesheet

$pdf-viewer-asset-base-path: "/node_modules/@certifaction/pdfjs/dist/";
@import "@certifaction/vue-pdf-viewer/src/style/index";

Props

pdfjsWorkerSrc

Type: string | Required: false (either pdfjsWorkerSrc or pdfjsWorkerInstance is required)

URL to the pdfjs.worker.js or pdfjs.worker.min.js.

pdfjsWorkerInstance

Type: Worker | Required: false (either pdfjsWorkerInstance or pdfjsWorkerSrc is required)

When the worker is loaded with the Webpack worker-loader, you can also pass the instance of the worker.

vue.config.js example:

chainWebpack: config => {
    config.module
        .rule('js')
        .exclude.add(/\.worker\.js$/)

    config.module
        .rule('worker')
        .test(/\.worker(\.min)?\.js$/)
        .use('worker-loader')
        .loader('worker-loader')
        .options({ filename: 'js/[name].[hash:8].js' })
        .end()
}

Usage example:

<template>
    <div class="test">
        <PDFViewer :pdfjs-worker-instance="pdfjsWorker"/>
    </div>
</template>

<script>
import PdfjsWorker from '@certifaction/pdfjs/dist/pdfjs.worker.min'

export default {
    name: 'Test',
    components: {
        PDFViewer
    },
    data() {
        return {
            pdfjsWorker: new PdfjsWorker()
        }
    }
}
</script>

pdfjsCMapUrl

Type: string | Required: true

Pass the path where the cmaps can be accessed.

vue.config.js example to copy the cmaps to the dist folder:

chainWebpack: config => {
    config.plugin('copy')
        .tap(args => {
            args[0].push({
                from: '@certifaction/pdfjs/dist/cmaps',
                to: 'pdf/cmaps',
                toType: 'dir',
                context: './node_modules'
            })
            return args
        })
}

source

Type: string or Uint8Array | Required: true

The URL of the PDF document as string or the PDF documents content as Uint8Array which should be displayed.

defaultScale

Type: string or number | Required: false | Default: 'auto'

The PDF Viewer renders the pages initially with the defined defaulScale.

Possible number values: Min = 0.1, Max = 10

Possible string values: 'auto', 'page-actual', 'page-fit', 'page-width'

documentName

Type: string | Required: false | Default: 'pdf-viewer-document.pdf'

The documentName is used for downloadable files.

allowDocumentDownload

Type: boolean | Required: false | Default: false

Shows the document download button if true

pdfjsViewerOptions

Type: Object | Required: false | Default: {}

These options are passed to the constructor of PDFViewer. Possible options are the PDFViewerOptions from https://github.com/mozilla/pdf.js/web/base_viewer.js.

container and eventBus are always overridden by the component.

License

Released by Certifaction AG