pdfvuer

Install pdfvuer based on your Vue version.

For Vue 2:

npm install --save pdfvuer

For Vue 3:

npm i pdfvuer@next --save

The scale prop controls how the PDF is sized within its container. You can provide a specific numeric scale (e.g., 1.5) or use automatic modes:

• 'page-width': Automatically calculates the scale required to make the PDF page match the width of the container.
• 'page-height': Automatically calculates the scale required to make the PDF page match the height of the container.

When using 'page-width' or 'page-height', the component emits an update:scale event with the calculated numeric value, allowing you to sync the state in your parent component.

You can install pdfvuer globally in your Vue application using Vue.use(). This registers the Pdfvuer component automatically, making it available throughout your application.

import Pdfvuer from 'pdfvuer';

// In your Vue entry file (e.g., main.js)
Vue.use(Pdfvuer);

To use pdfvuer in a basic setup, import the component and provide a src prop containing the URL of the PDF file. You can also use the loading slot to display content while the PDF is loading.

Note: import 'pdfjs-dist/build/pdf.worker.entry' is not required since version 1.9.1.

<template>
  <pdf src="./static/relativity.pdf" :page="1">
    <template slot="loading">
      loading content here...
    </template>
  </pdf>
</template>

<script>
import pdf from 'pdfvuer'

export default {
  components: {
    pdf
  }
}
</script>

The createLoadingTask(src) static method creates a PDFJS loading task. This task can be passed directly to the :src prop of the <pdf> component, allowing you to interact with the PDF object (e.g., to get the total number of pages) before or during rendering.

import pdfvuer from 'pdfvuer'

// Create a task that can be used as the :src prop
const pdfdata = pdfvuer.createLoadingTask('./static/relativity.pdf');

// The task returns a promise that resolves to the PDF document
pdfdata.then(pdf => {
  console.log('Total pages:', pdf.numPages);
});

When using pdfvuer in a Vue CLI project, you may need to ensure that pdfjs-dist is transpiled correctly to avoid compatibility issues in certain environments. You can do this by adding 'pdfjs-dist' to the transpileDependencies array in your vue.config.js file.

module.exports = {
    transpileDependencies: [
        'pdfjs-dist'
    ]
}

The <pdf> component emits the following events:

Example: Handling @link-clicked

handle_pdf_link: function (params) {
  // params contains pageNumber
  var page = document.getElementById(String(params.pageNumber));
  page.scrollIntoView();
}

If you prefer not to install the plugin globally, you can import the default export and register it as a local component in your Vue component definition.

import Pdfvuer from 'pdfvuer';

export default {
  components: {
    Pdfvuer
  }
};

The pdfvuer package exports the Vue component as its default export.

import Pdfvuer from 'pdfvuer';