npm i vue3-pdfjs
or
yarn add vue3-pdfjsDemo code can be found under the docs section here.
import { createApp } from 'vue'
import App from './App.vue'
import VuePdf from 'vue3-pdfjs'
const app = createApp(App)
app.use(VuePdf)
app.mount('#app')Import components from the esm folder to enable tree shaking.
Please note that Mozilla's pdfjs npm package does not export tree-shakeable ES modules. Info here - mozilla/pdf.js#12900
<script lang="ts">
import { defineComponent, onMounted, reactive, ref } from 'vue';
import { VuePdf, createLoadingTask } from 'vue3-pdfjs/esm';
import { VuePdfPropsType } from 'vue3-pdfjs/components/vue-pdf/vue-pdf-props'; // Prop type definitions can also be imported
import { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api';
export default defineComponent({
name: 'Home',
components: { VuePdf },
setup() {
const pdfSrc = ref<VuePdfPropsType['src']>('https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf')
const numOfPages = ref(0)
onMounted(() => {
const loadingTask = createLoadingTask(pdfSrc.value)
loadingTask.promise.then((pdf: PDFDocumentProxy) => {
numOfPages.value = pdf.numPages
})
})
return {
pdfSrc,
numOfPages
}
}
});
</script>
<template>
<VuePdf v-for="page in numOfPages" :key="page" :src="pdfSrc" :page="page" />
</template>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent