我們先建立一個的 Vue3
專案, 在終端機中輸入指令
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 預覽外掛程式
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 鉤子函數中使用
createLoadingTask 取得下預覽檔案的總頁數
const loadingTask = createLoadingTask(state.source); loadingTask.promise.then((pdf:{numPages: number}) => { state.numPages = pdf.numPages; });
在template中加入預覽外掛程式碼:
<div class="pdf-wrap"> <vue-pdf-embed :source="state.source" : class="vue-pdf-embed" :page="state.pageNum" /> </div>開啟瀏覽器,可以看到PDF 檔案已經載入出來了,但是樣式不是很好看,我們下一步將樣式優化下,並將PDF 文件的翻頁功能,縮放功能,當前頁面/總頁數展示功能添加完善添加如下代碼到
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>
美化樣式:
.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; }#新增檔案的翻頁功能,縮放功能,目前頁面/總頁數展示功能新增完善
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>
以上是Vue3+Vue-PDF怎麼實現PDF檔案線上預覽的詳細內容。更多資訊請關注PHP中文網其他相關文章!