Comment Vue3+Vue-PDF implémente l'aperçu en ligne des fichiers PDF

Créer un projet vue3

Nous créons d'abord un projet Vue3, entrons la commande dans le terminalVue3 项目, 在终端中输入命令

pnpm create vite vue-pdf-preview

选择 vue-ts 回车，cd 进入项目根目录，执行 pnpm install, 等待项目依赖包安装完成。

项目依赖包安装完成后，我们来启动项目, 执行命令 pnpm run dev ,可以看到控制台输入出了如下内容

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

按住 control/command + 鼠标左键，项目在浏览器中打开了

项目启动成功

添加 PDF 预览插件

项目启动成功后，我们安装 PDF 预览插件

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

我们在 src 下新建一个文件 src/components/pdfPreview.vue，添加一些代码，初始化 vue-pdf 预览，代码如下

<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>

添加完成后，我们将 PDF 预览组件引入到 App.vue 文件中，并将提前准备的 PDF 文件也引入，如下所示：

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

接下来我们回到刚刚新建的 PDF 预览组件页面，来完善预览功能

我们先引入 PDF 预览插件：

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

使用 vue3 的 reactive 定义一些页数，页码，PDF文件预览地址变量

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

在 OnMounted

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

Sélectionnez vue-ts et appuyez sur Entrée, cd pour entrer la racine du projet répertoire et exécutez pnpm install, attendez que le package de dépendances du projet soit installé.

Une fois le package de dépendances du projet installé, démarrons le projet et exécutons la commande pnpm run dev. Vous pouvez voir que le contenu suivant est entré sur la console

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

Maintenez control/command + gauche. bouton de la souris

, le projet est ouvert dans le navigateur

Le projet a démarré avec succès

Ajoutez le plug-in de prévisualisation

PDF

Après le démarrage réussi du projet, nous avons installé le plug-in de prévisualisation

PDF

<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>

Nous avons créé un nouveau sous src Fichier src/components/pdfPreview.vue, ajoutez du code, initialisez l'aperçu vue-pdf, le code est le suivant

.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;
}

Une fois l'ajout terminé, nous présenterons le composant d'aperçu 🎜PDF🎜. Accédez au fichier App.vue et importez le fichier 🎜PDF🎜 préparé à l'avance, 🎜comme indiqué ci-dessous : 🎜🎜

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;
    }
}

🎜Ensuite, nous revenons à la page du composant d'aperçu 🎜PDF🎜 nouvellement créée. Pour améliorer la fonction d'aperçu🎜🎜🎜Nous introduisons d'abord le plug-in d'aperçu PDF : 🎜🎜

<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>

🎜Utilisez le réactif de 🎜vue3🎜. code> pour définir un numéro de page, un numéro de page, des variables d'adresse d'aperçu du fichier PDF🎜rrreee🎜dans <code> OnMounted Utilisez 🎜createLoadingTask🎜 dans la fonction hook pour obtenir le nombre total de pages du fichier d'aperçu 🎜rrreee🎜 🎜Ajoutez le code du plug-in d'aperçu au modèle : 🎜🎜rrreee🎜Ouvrez le navigateur et vous pouvez voir que le fichier PDF a été chargé. Mais le style n'est pas très beau. Nous optimiserons le style à l'étape suivante. et améliorez la fonction de tournage de page, la fonction de zoom et la fonction d'affichage de la page actuelle/du nombre total de pages du fichier PDF🎜🎜Ajoutez le code suivant à 🎜tempate🎜🎜rrreee🎜🎜 Style d'embellissement : 🎜🎜rrreee🎜Ajoutez une fonction de rotation de fichier, fonction zoom, fonction d'affichage de la page actuelle/du nombre total de pages ajoutée et améliorée🎜rrreee🎜🎜tempalte🎜🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!