Cara Vue3+Vue-PDF melaksanakan pratonton dalam talian bagi fail PDF

Buat projek vue3

Kami mula-mula membuat projek Vue3, masukkan arahan

pnpm create vite vue-pdf-preview

dalam terminal, pilih vue-ts dan tekan Enter, cd untuk memasuki direktori akar projek dan jalankan pnpm install, Tunggu pemasangan pakej kebergantungan projek selesai.

Selepas pakej kebergantungan projek dipasang, mari mulakan projek dan laksanakan arahan pnpm run dev Anda boleh melihat bahawa kandungan berikut dimasukkan pada konsol

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

Tekan dan tahan kawalan/arahan + Butang tetikus kiri , projek dibuka dalam penyemak imbas

Projek dimulakan dengan jayanya

Tambah

PDF pemalam pratonton

Selepas projek berjaya dilancarkan, kami memasang pemalam pratonton

PDF

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

Kami mencipta fail baharu

di bawah src, tambah beberapa kod, mulakan src/components/pdfPreview.vue pratonton, Kod adalah seperti berikut 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>

Selepas menambahnya, kami akan memperkenalkan komponen pratonton

PDF ke dalam fail , dan juga memperkenalkan fail App.vuePDF yang disediakan lebih awal, Seperti yang ditunjukkan di bawah:

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

Seterusnya kita kembali ke komponen pratonton

PDF yang baru dibuat halaman untuk menambah baik fungsi pratonton

Kami mula-mula memperkenalkan pemalam pratonton PDF:

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

menggunakan

vue3 untuk mentakrifkan beberapa nombor halaman, nombor halaman dan pembolehubah alamat pratonton fail PDF reactive

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

dalam cangkuk

Gunakan OnMountedcreateLoadingTask dalam fungsi untuk mendapatkan jumlah bilangan halaman fail pratonton

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

Tambah kod pemalam pratonton pada templat:

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

Buka penyemak imbas, Anda dapat melihat bahawa fail PDF telah dimuatkan, tetapi gayanya tidak begitu baik . Kami akan mengoptimumkan gaya dalam langkah seterusnya dan menambah baik fungsi membelok halaman, fungsi zum dan fungsi paparan halaman/jumlah halaman semasa fail PDF

Tambahkan kod berikut pada

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>

Cantikkan gaya:

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

Tambah fungsi membelok halaman fail, fungsi zum, halaman semasa/ Jumlah bilangan fungsi paparan halaman telah ditambah dan diperbaiki

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>

Atas ialah kandungan terperinci Cara Vue3+Vue-PDF melaksanakan pratonton dalam talian bagi fail PDF. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!