Vue.js PDF viewer
Display PDFs in your Vue.js applications
Easily create a Vue.js PDF viewer with GemBox.PdfViewer, a customizable JavaScript UI library. By using just a short code snippet, you can display PDF documents in your Vue.js web apps. A large set of features like search, print, save, digital signing, custom theme support, text selection, navigation and more add the look and feel of standalone PDF applications to your Vue.js apps.
Here is the live demo that shows the GemBox.PdfViewer in action:
How to add the PDF Viewer to your Vue.js application?
1. Install GemBox.PdfViewer
To add GemBox.PdfViewer to your Vue.js application using NPM or Yarn, use the following commands:
npm install @gembox/pdfviewer
# or
yarn add @gembox/pdfviewer2. Create the reusable Vue.js PDF Viewer component
Now you can use GemBox.PdfViewer in your Vue.js components. The following example is a basic PDF Viewer component that displays an existing PDF file:
<template>
<div ref="viewerElement" class="viewer"></div>
</template>
<script setup>
import { onMounted, ref, defineProps } from "vue";
import { GemBoxPdfViewer } from '@gembox/pdfviewer'
import '@gembox/pdfviewer/dist/es/pdfviewer.css';
const props = defineProps({
initialDocument: {
type: String,
default: null
}
});
GemBoxPdfViewer.setLicense("FREE-LIMITED-KEY");
const viewerElement = ref(null)
onMounted(() => {
GemBoxPdfViewer.create({
container: viewerElement.value,
initialDocument: props.initialDocument
});
});
</script>
<style scoped>
.viewer {
width: 600px;
height: 350px;
}
</style>
You can save this component as PdfViewer.vue and use it throughout your Vue.js application as needed.
3. Display PDF files in your Vue.js app
To display existing PDF documents you can use the Vue.js component created in the previous step:
<template>
<!-- Initializes PDF Viewer with a HelloWorld.pdf file -->
<PdfViewer initial-document="/HelloWorld.pdf"/>
<!-- Shows empty PDF Viewer -->
<!--<PdfViewer/> -->
</template>
<script setup>
import PdfViewer from "/src/components/PdfViewer.vue";
</script>
What next?
With GemBox.PdfViewer, you make it possible for your users to read existing PDF documents from your Vue.js apps. For more information on the library's rich set of features and customizations that enable you to tailor the PDF viewer to your specific requirements, please see the other examples.
