NASA's Punk Music

    pdf-viewer-vue
    TypeScript icon, indicating that this package has built-in type declarations

    0.2.7 • Public • Published

    📄 pdf-viewer-vue

    PDF viewer component for Vue 2 and Vue 3

    npm npm Github Repo stars npm

    Compatibility

    This package is compatible with both Vue 2 and Vue 3. The default exported build is for Vue 3, but dist directory also contains a build for Vue 2 (dist/vue2-pdf-viewer.js). See the example in Usage section.

    Installation

    Depending on the environment, the package can be installed in one of the following ways:

    npm install pdf-viewer-vue
    
    yarn add pdf-viewer-vue
    
    <script src="https://unpkg.com/pdf-viewer-vue"></script>

    Usage

    <template>
      <div>
        <h1>File</h1>
    
        <PDFViewer
          :source="url"
          style="height: 100vh; width: 100vw"
          @download="handleDownload"
        />
    
        <h1>Base64</h1>
    
        <PDFViewer
          :source="base64"
          style="height: 100vh; width: 100vw"
          @download="handleDownload"
        />
      </div>
    </template>
    
    <script>
    import PDFViewer from 'pdf-viewer-vue'
    
    // OR THE FOLLOWING IMPORT FOR VUE 2
    // import PDFViewer from 'pdf-viewer-vue/dist/vue2-pdf-viewer'
    
    export default {
      components: {
        PDFViewer,
      },
    
      data() {
        return {
          url: '<PDF_URL>',
          base64: '<BASE64_ENCODED_PDF>',
        }
      },
    }
    </script>

    Props

    Name Type Accepted values Description
    source string document URL or Base64 source of document
    controls string[] [
    'download',
    'print',
    'rotate',
    'zoom',
    'catalog',
    'switchPage',
    ]
    visible controls
    loading-text string - loading text
    rendering-text string - rendering text
    settings { defaultZoom: number } - default settings

    Events

    Name Value Description
    download {source: string; filename: string;} pdf file base info
    loaded {total: number} document load completed
    loading-failed Error failed to load document
    rendered - finished rendering the document
    rendering-failed Error failed to render document

    Examples

    TODO: CodeSandbox or JSFiddle
    

    License

    MIT License. Please see LICENSE file for more information.

    Keywords

    Install

    npm i pdf-viewer-vue

    DownloadsWeekly Downloads

    723

    Version

    0.2.7

    License

    MIT

    Unpacked Size

    4.16 MB

    Total Files

    35

    Last publish

    Collaborators

    • dingrui12138