vue-pdfjs

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";importenUS_FTLfrom"@tuttarealstep/vue-pdf.js/l10n/en-US/viewer.ftl?raw";const pdf=newURL("./path/to/custom.pdf",import.meta.url).href;const vuepdfjs=useTemplateRef<typeofVuePDFjs>("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>  <divid="app">    <VuePDFjsref="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";importenUS_FTLfrom"@tuttarealstep/vue-pdf.js/l10n/en-US/viewer.ftl?raw";const vuepdfjs=useTemplateRef<typeofVuePDFjs>("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(newURL("./path/to/custom.pdf",import.meta.url).href);// or any other source typeconsole.log(document,info,pages);</script><template>  <divid="app">    <VuePDFjsref="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