Rumah > Artikel > hujung hadapan web > Cara Vue3+Vue-PDF melaksanakan pratonton dalam talian bagi fail PDF
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 jayanyaTambahpnpm install vue-pdf-embed pnpm install vue3-pdfjsKami 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.vue
PDF 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 OnMounted
createLoadingTask 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 PDFTambahkan 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!