How to implement PDF online preview using vue-pdf-embed

1. Preface

The core logic of vue-pdf-embed introduced in this blog is to obtain the pdf content and render each page of it on the canvas canvas to display it in a picture-like way. pdf is placed in the project as a local resource.

2. What is vue-pdf-embed

vue-pdf-embed is a plug-in that is specifically designed for embedding and presenting PDF files in Vue applications. It uses libraries to render PDF files, providing a simple and easy-to-use interface, allowing developers to quickly integrate PDF display functions in Vue projects.

1. Function and scenario

vue-pdf-embed is mainly used in the following scenarios:

Online document management system: Users can view, read and manage PDF documents directly in the browser.

Online Book Reader: Provides a smooth online reading experience for PDF books.

Report display system: used to display reports, analyze documents, etc. in PDF format.

Electronic signature system: allows users to view and sign PDF documents online.

2. Advantages of vue-pdf-embed

Easy to integrate: Provides a simple interface for easy and fast integration into Vue projects.

Comprehensive functions: supports a variety of PDF operation functions, such as paging, scaling, etc., to meet diverse needs.

High performance: Ensure fast rendering and display of PDF files through paging loading and caching optimization.

Good documentation support: Provide detailed documentation and examples for developers to get started.

Use the library to render the contents of a PDF file directly in the browser. is a universal PDF reader that displays vector PDF files on web pages without any plug-ins.

The advantage of using vue-pdf-embed is that it maintains the original quality of the PDF and can utilize powerful functions such as document encryption, form filling, etc. Additionally, since it is based on Canvas, it supports responsive design, allowing dynamically adjusting the display size of the page according to the container size.

3. Project initialization and dependency installation

First, we need to initialize a Vue project and install the necessary dependencies.

1. Initialize the Vue project

Use the Vue CLI to initialize a new Vue project / use vite to initialize a new Vue3 project. During the creation process, just select the default Vue3 configuration.

vue create vue-pdf-demo
// Or npm create vitecd vue-pdf-demo

2. Installation dependencies

Next, install the vue-pdf-embed plugin:

npm install vue-pdf-embed

3. Create a display component

<template>
  <div class="page-tool">
    <div class="page-tool-item" @click="lastPage">Previous page</div>
    <div class="page-tool-item" @click="nextPage">Next page</div>
    <div class="page-tool-item">{{  }}/{{  }}</div>
    <div class="page-tool-item" @click="pageZoomOut">enlarge</div>
    <div class="page-tool-item" @click="pageZoomIn">Shrink</div> 
  </div>
  <div class="pdf-preview">
    <div class="pdf-wrap">
      <vue-pdf-embed :source="" :style="scale" class="vue-pdf-embed" :page="" />
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted, computed } from "vue";
import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs";

const props = defineProps({
  pdfUrl: {
    type: String,
    required: true,
  },
});

const state = reactive({
  source: , //Preview the pdf file address  pageNum: 1, //Current page  scale: 1, // Scaling  numPages: 0, // Total page count});

const scale = computed(() => `transform:scale(${})`);

onMounted(() => {
  const loadingTask = createLoadingTask();
  ((pdf) => {
     = ;
  });
});

function lastPage() {
  if ( > 1) {
     -= 1;
  }
}

function nextPage() {
  if ( < ) {
     += 1;
  }
}

function pageZoomOut() {
  if ( < 2) {
     += 0.1;
  }
}

function pageZoomIn() {
  if ( > 1) {
     -= 0.1;
  }
}

</script>

<style lang="less" scoped>
.pdf-preview {
  margin-top: 10px;
  padding:0;
  height: 100vh;
  box-sizing: border-box;
  background-color:  #fff;
}

.pdf-wrap {
  overflow-y: auto;
}

.vue-pdf-embed {
  text-align: center;
  width: 100%;
  border: 1px solid #e5e5e5;
  margin: 0 auto;
  box-sizing: border-box;
}

.page-tool {
  padding-left: 10px;
  padding-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgb(66, 66, 66);
  color: white;
  border-radius: 19px;
  margin-left: 10%;
  margin-right: 10%;
}

.page-tool-item {
  padding: 10px 0;
  padding-left: 10px;
  width: 33%;
  text-align: center;
}
</style>

4. Use

<template>
    <div>
        <PDFView  :pdfUrl="folderSource" />
    </div>
</template>

<script>
import { ref } from "vue";
export default {
   name: "pdf",
   setup() {
     const  folderSource = ref('/path/to/your/pdf/');
    
     return{
        folderSource
   }
}
</script>

This is the end of this article about how to use vue-pdf-embed to achieve PDF online preview. For more related vue-pdf-embed PDF online preview content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!