vue-pdfjs is a Vue 3 component for displaying PDF files using the standard pdf.js viewer. This package provides a simple and powerful integration to embed PDF viewers in Vue applications.
- Display PDF files with
pdf.js - Localization support
- Modular components for easy customization
- Compatible with Vue 3 and Vite
To install the package, run:
npm install @tuttarealstep/vue-pdf.js<script setup lang="ts">
import { reactive, useTemplateRef } from "vue";
import { VuePDFjs } from "@tuttarealstep/vue-pdf.js";
import "@tuttarealstep/vue-pdf.js/dist/style.css";
import enUS_FTL from "@tuttarealstep/vue-pdf.js/l10n/en-US/viewer.ftl?raw";
const pdf = new URL("./path/to/custom.pdf", import.meta.url).href;
const vuepdfjs = useTemplateRef<typeof VuePDFjs>("vuepdfjs");
const options = reactive({
locale: {
code: "en-US",
ftl: enUS_FTL,
},
});
const onPdfAppLoaded = () => {
console.log("pdf-app:loaded");
console.log(vuepdfjs.value?.pdfApp);
if (!vuepdfjs.value?.pdfApp) {
return;
}
vuepdfjs.value.pdfApp.eventBus.on("pagesloaded", (e: any) => {
vuepdfjs.value?.pdfApp.eventBus.dispatch("find", {
query: [
"Dynamic languages such as JavaScript are more difficult to compile than statically typed ones.",
],
caseSensitive: false,
entireWord: false,
highlightAll: true,
});
});
};
</script>
<template>
<div id="app">
<VuePDFjs
ref="vuepdfjs"
:source="pdf"
:options="options"
@pdf-app:loaded="onPdfAppLoaded"
/>
</div>
</template>
<style>
html,
body,
#app {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
}
</style><script setup lang="ts">
import { reactive, useTemplateRef } from "vue";
import { VuePDFjs, usePDF } from "@tuttarealstep/vue-pdf.js";
import "@tuttarealstep/vue-pdf.js/dist/style.css";
import enUS_FTL from "@tuttarealstep/vue-pdf.js/l10n/en-US/viewer.ftl?raw";
const vuepdfjs = useTemplateRef<typeof VuePDFjs>("vuepdfjs");
const options = reactive({
locale: {
code: "en-US",
ftl: enUS_FTL,
},
});
const onPdfAppLoaded = () => {
console.log("pdf-app:loaded");
console.log(vuepdfjs.value?.pdfApp);
if (!vuepdfjs.value?.pdfApp) {
return;
}
vuepdfjs.value.pdfApp.eventBus.on("pagesloaded", (e: any) => {
vuepdfjs.value?.pdfApp.eventBus.dispatch("find", {
query: [
"Dynamic languages such as JavaScript are more difficult to compile than statically typed ones.",
],
caseSensitive: false,
entireWord: false,
highlightAll: true,
});
});
};
const { pdf, info, pages } = usePDF(
new URL("./path/to/custom.pdf", import.meta.url).href
); // or any other source type
console.log(document, info, pages);
</script>
<template>
<div id="app">
<VuePDFjs
ref="vuepdfjs"
:source="pdf"
:options="options"
@pdf-app:loaded="onPdfAppLoaded"
/>
</div>
</template>
<style>
html,
body,
#app {
height: 100%;
width: 100%;
}
body {
margin: 0;
padding: 0;
}
</style>MIT