Package Exports

@vue3pdfcomponent/vue3-pdf-viewer
@vue3pdfcomponent/vue3-pdf-viewer/dist/vue3-pdf-viewer.es.js
@vue3pdfcomponent/vue3-pdf-viewer/dist/vue3-pdf-viewer.umd.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@vue3pdfcomponent/vue3-pdf-viewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Vue3 Pdf Viewer Plugin

Vue3 PDF Viewer is a lightweight Vue 3 plugin that allows embedding a PDF viewer in a Vue 3 project.

Installation

Install via npm or yarn or pnpm:

npm install @vue3pdfcomponent/vue3-pdf-viewer@1.0.0
# or
yarn add @vue3pdfcomponent/vue3-pdf-viewer@1.0.0
# or
pnpm add @vue3pdfcomponent/vue3-pdf-viewer@1.0.0

Usage

Import and register the plugin in main.js or main.ts:

import { createApp } from 'vue'
import App from './App.vue'
import Vue3PdfViewer from "@vue3pdfcomponent/vue3-pdf-viewer";
import '@vue3pdfcomponent/vue3-pdf-viewer/dist/vue3-pdf-viewer.css'

const app = createApp(App)
app.use(Vue3PdfViewer)
app.mount('#app')

Then, you can use the <Vue3PdfViewer /> component in your template:

<template>
  <div>
    <Vue3PdfViewer :pdfUrl="pdfUrl" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const pdfUrl = ref('https://example.com/sample.pdf')
</script>

You can import { Vue3PdfViewer } from 'vue3-pdf-viewer' components in your component code.

import {Vue3PdfViewer} from "@vue3pdfcomponent/vue3-pdf-viewer";
import '@vue3pdfcomponent/vue3-pdf-viewer/dist/vue3-pdf-viewer.css'

API

Props

pdfUrl(String Or Blob) : The URL or path to the PDF file.
search(String) : The search property allows highlighting the selected content and scrolling the PDF to the page where the content is found.

Event

loaded: Emitted when the PDF file has been loaded successfully.
initLoad: Emitted when the PDF file has been start loaded.
matchNotFound: Emitted when no match is found in the PDF file's text content.

Notes

Make sure the provided PDF file URL is valid and allows cross-origin requests.
Plugin Dependencies pdfjs-dist@4.9.155

Contributing

If you'd like to contribute to this project, please fork the repository and submit a pull request.