How Vue3+Vue-PDF implements online preview of PDF files

Create vue3 project

We first create a Vue3 project, enter the command

pnpm create vite vue-pdf-preview

in the terminal, select vue-ts and press Enter , cd to enter the project root directory, execute pnpm install, and wait for the project dependency package to be installed.

After the project dependency package is installed, let’s start the project and execute the command pnpm run dev. You can see that the following content is entered on the console

  vite v2.9.9 dev server running at:
  > Local: http://localhost:3000/
  > Network: use `--host` to expose
  ready in 780ms.

Hold down control/command left mouse button, the project was opened in the browser

Project started successfully

Add PDF Preview plug-in

After the project is successfully started, we install the PDF preview plug-in

pnpm install vue-pdf-embed
pnpm install vue3-pdfjs

We create a new file under src src/ components/pdfPreview.vue, add some code to initialize the vue-pdf preview, the code is as follows

<template>
    <div class="pdf-preview">

    </div>
</template>
<script setup lang="ts">
import { reactive, onMounted, computed } from "vue";

const props = defineProps({
    pdfUrl: {
        type: String,
        required: true
    }
})
onMounted(() => {
});
</script>
<style lang="css" scoped>
.pdf-preview {
    position: relative;
    height: 100vh;
    padding: 20px 0;
    box-sizing: border-box;
    background: rgb(66, 66, 66);
}
.vue-pdf-embed {
    text-align: center;
    width: 515px;
    border: 1px solid #e5e5e5;
    margin: 0 auto;
    box-sizing: border-box;
}
</style>

After the addition is completed, we will introduce the PDF preview component Go to the App.vue file, and import the prepared PDF file, as shown below:

<template>
<div>
    <PDFView :pdfUrl="jsPdf" />
</div>
</template>
<script setup lang="ts">
import PDFView from "./components/pdfPreview.vue"
import jsPdf from "./Javascript.pdf"
</script>

Next we go back Go to the newly created PDF preview component page to improve the preview function

We first introduce the PDF preview plug-in:

import VuePdfEmbed from "vue-pdf-embed";
import { createLoadingTask } from "vue3-pdfjs/esm"; // 获得总页数

Use vue3 reactive Define some page number, page number, PDF file preview address variables

const state = reactive({
    source: props.pdfUrl, 预览pdf文件地址
    pageNum: 1, 当前页面
    scale: 1, // 缩放比例
    numPages: 0, // 总页数
});

Use createLoadingTask in the OnMounted hook function to obtain Download the total number of pages of the preview file

 const loadingTask = createLoadingTask(state.source);
    loadingTask.promise.then((pdf:{numPages: number}) => {
        state.numPages = pdf.numPages;
    });

Add the preview plug-in code to the template:

 <div class="pdf-wrap">
     <vue-pdf-embed :source="state.source"  : class="vue-pdf-embed" :page="state.pageNum" />
</div>

Open the browser and you can see that the PDF file has been loaded, but The style is not very good-looking. We will optimize the style in the next step and improve the page turning function, zoom function, and current page/total number of pages display function of the PDF file

Add the following code to tempate中

<div class="page-tool">
    <div class="page-tool-item" >上一页</div>
    <div class="page-tool-item">下一页</div>
    <div class="page-tool-item">{{state.pageNum}}/{{state.numPages}}</div>
    <div class="page-tool-item" >放大</div>
    <div class="page-tool-item">缩小</div>
</div>

Beautification style:

.pdf-preview {
    position: relative;
    height: 100vh;
    padding: 20px 0;
    box-sizing: border-box;
    background-color: e9e9e9;
}
.pdf-wrap{
    overflow-y:auto ;
}
.vue-pdf-embed {
    text-align: center;
    width: 515px;
    border: 1px solid #e5e5e5;
    margin: 0 auto;
    box-sizing: border-box;
}

.page-tool {
    position: absolute;
    bottom: 35px;
    padding-left: 15px;
    padding-right: 15px;
    display: flex;
    align-items: center;
    background: rgb(66, 66, 66);
    color: white;
    border-radius: 19px;
    z-index: 100;
    cursor: pointer;
    margin-left: 50%;
    transform: translateX(-50%);
}
.page-tool-item {
    padding: 8px 15px;
    padding-left: 10px;
    cursor: pointer;
}

Add the page turning function of the file, the zoom function, the current page/total number of pages display function have been added and improved

const scale = computed(() => `transform:scale(${state.scale})`)
function lastPage() {
    if (state.pageNum > 1) {
        state.pageNum -= 1;
    }
}
function nextPage() {
    if (state.pageNum < state.numPages) {
        state.pageNum += 1;
    }
}
function pageZoomOut() {
    if (state.scale < 2) {
        state.scale += 0.1;
    }
}
function pageZoomIn() {
    if (state.scale > 1) {
        state.scale -= 0.1;
    }
}

tempalte

<div class="page-tool-item" @click="lastPage">上一页</div>
<div class="page-tool-item" @click="nextPage">下一页</div>
<div class="page-tool-item">{{state.pageNum}}/{{state.numPages}}</div>
<div class="page-tool-item" @click="pageZoomOut">放大</div>
<div class="page-tool-item" @click="pageZoomIn">缩小</div>

The above is the detailed content of How Vue3+Vue-PDF implements online preview of PDF files. For more information, please follow other related articles on the PHP Chinese website!