vue-pdfjs NPM Version Open on npmx.dev MadeWithVueJs.com shield

Features

Installation

npm install @tuttarealstep/vue-pdf.js

Usage

<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>

With usePDF composable

<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>

License

Credits