Wie Vue3+Vue-PDF die Online-Vorschau von PDF-Dateien implementiert

Vue3-Projekt erstellen

Wir erstellen zunächst ein Vue3-Projekt, geben den Befehl in das Terminal einVue3 项目, 在终端中输入命令

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

Wählen Sie vue-ts und drücken Sie die Eingabetaste, cd, um das Projektstammverzeichnis einzugeben Verzeichnis und führen Sie pnpm install aus. Warten Sie, bis das Projektabhängigkeitspaket installiert ist.

Nachdem das Projektabhängigkeitspaket installiert ist, starten wir das Projekt und führen den Befehl pnpm run dev aus. Sie können sehen, dass der folgende Inhalt auf der Konsole eingegeben wird:

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

Halten Sie Strg/Befehl + links gedrückt Maustaste

, das Projekt wird im Browser geöffnet

Das Projekt wurde erfolgreich gestartet

Fügen Sie das

PDF-Vorschau-Plug-in hinzu

Nachdem das Projekt erfolgreich gestartet war, haben wir das

PDF

-Vorschau-Plug-in installiert

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

Wir haben es erstellt eine neue unter src Datei src/components/pdfPreview.vue, fügen Sie etwas Code hinzu, initialisieren Sie die vue-pdf-Vorschau, der Code ist wie folgt

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

Nachdem das Hinzufügen abgeschlossen ist, stellen wir die 🎜PDF🎜-Vorschaukomponente vor. Gehen Sie zur Datei App.vue und importieren Sie die vorbereitete 🎜PDF🎜-Datei, 🎜wie unten gezeigt: 🎜🎜

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

🎜 Als nächstes kehren wir zur neu erstellten 🎜PDF🎜-Vorschaukomponentenseite zurück. Um die Vorschaufunktion zu verbessern🎜🎜🎜Wir stellen zunächst das PDF-Vorschau-Plug-in vor: 🎜🎜

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

🎜Verwenden Sie 🎜vue3🎜s reactive um einige Seitenzahlen, Seitenzahlen und PDF-Dateivorschau-Adressvariablen zu definieren🎜rrreee🎜in OnMounted Verwenden Sie 🎜createLoadingTask🎜 in der Hook-Funktion, um die Gesamtzahl der Seiten der Vorschaudatei zu erhalten 🎜rrreee🎜🎜Add Der Vorschau-Plugin-Code zur Vorlage: 🎜🎜rrreee🎜Öffnen Sie den Browser und Sie können sehen, dass der Stil nicht sehr gut aussieht. Wir werden den Stil im nächsten Schritt optimieren die Funktion zum Umblättern, die Zoomfunktion und die Funktion zur Anzeige der aktuellen Seite/Gesamtseitenzahl der PDF-Datei. 🎜🎜 Fügen Sie den folgenden Code zu 🎜tempate hinzu Funktion, Anzeigefunktion für aktuelle Seite/Gesamtseitenzahl hinzugefügt und verbessert🎜rrreee🎜🎜tempalte🎜🎜rrreee

Das obige ist der detaillierte Inhalt vonWie Vue3+Vue-PDF die Online-Vorschau von PDF-Dateien implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!