@360learning/vue-pdf-viewer

vue-pdf-viewer

vue-pdf-viewer is Vue component using to https://mozilla.github.io/pdf.js/ to implement a PDF viewer.

Installation

Use npm for easy install:

npm install @360learning/vue-pdf-viewer

Use

Simply import the component:

import PDFViewer from "@360learning/vue-pdf-viewer";

and then you can use it like any Vue component once registered:

<template>
    <div class="pdf">
        <PDFViewer
            :url="url"
        >
        </PDFViewer>
    </div>
</template>

 <script>
    import PDFViewer from "@360learning/vue-pdf-viewer";

    export default {
        components: {
            PDFViewer
        },
        data() {
            const url = "http://www.africau.edu/images/default/sample.pdf";
            return {
                url
            };
        }
    };
</script>

Acknowledgement

This library takes as it's starting point the excellent demo done by Ross Kaffenberger.

To learn more, checkout the series of posts describing how his project was implemented.

1. Basic page rendering
2. Fetching and rendering lazily
3. Extracting a data component
4. Refactoring to nested abstract components

License

MIT