vuetify-pdfjs

nice but Simple PDF viewer.

This project demonstrates how a simple PDF viewer could be implemented using Vue, Vuetify and PDF.js. This is not a fully-featured PDF document viewer with sophisticated controls, but could serve as the basis for one.

Versions

1.2 : FOR VUE2 ONLY
1.2.3 : Blurred pages corrected
1.2.4 : Correct paginator color
1.2.5 : Update vue version to 2.7.14
1.2.6 : Come back to vue version 2.6.14

1.3 : FOR VUE3 ONLY
1.3.0 : renewed
1.3.1 : reduce bundle size
1.3.2 : bugs corrected, optimized, add buttonColor prop
1.3.3 : BAD NPM PUBLISHING 1.3.4 : Add vite-plugin-resolve + Correct bug "Invalid workerSrc type"

Setup for NUXT 3

To install the plugin inside your project :

$ npm install vuetify-pdfjs@latest

$ npm install nuxt                  (tested with version 3.11.2)
$ npm install vuetify-nuxt-module   (tested with version 0.13.2)

And, in your nuxt.config.ts file :

export default defineNuxtConfig( {
  ...,
  vite: {
    optimizeDeps: {
      esbuildOptions: {
          target: "esnext",
      },
    },
  },
  ...
})

Create a plugins/vuetifyPdfjs.ts file with this code :

import VuetifyPdfjs from 'vuetify-pdfjs'

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.use( VuetifyPdfjs )
})

Then, copy this code where you want inside you project (nested in v-app component) :

<template>
  <v-app>
    ...
    <VuetifyPdfJs :url="url" buttonColor="#888888" thumbnailColor="#999999" backgroundColor="#DEDEDE" previewColor="#999999"/>
    ... 
  </v-app>
</template>

<script>
export default {
  data: () => ({
    url:'https://cors-anywhere.herokuapp.com/YourUrl.pdf'
  })
}
</script>

Props :

| Name | Type | Default | | :---: | :---: | :---: | | url | string | null | | buttonColor | #000000 | #888888 | | thumbnailColor | #000000 | #999999 | | backgroundColor | #000000 | #DEDEDE | | previewColor | #000000 | #999999 |