Nanometer Process Machine

    @certifaction/vue-pdf-viewer

    1.3.0 • Public • Published

    @certifaction/vue-pdf-viewer

    npm lerna

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

    Table of contents

    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
            })
    }

    url

    Type: string | Required: true

    URL of the PDF document which should be displayed.

    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

    License

    Released by Certifaction AG

    Keywords

    none

    Install

    npm i @certifaction/vue-pdf-viewer

    DownloadsWeekly Downloads

    20

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    71.6 kB

    Total Files

    21

    Last publish

    Collaborators

    • bauer00
    • ianaz
    • emeka
    • lukarth
    • alnicoli