Vue使用vue-pdf實(shí)現(xiàn)PDF文件預(yù)覽
前言
vue-pdf npm文檔 https://www.npmjs.com/package/vue-pdf
先看下效果
安裝
npm install vue-pdf
頁(yè)面按需引入并注冊(cè)
import Pdf from "vue-pdf" export default { components: { Pdf } }
完整代碼
<template> <div class="global"> <div class="preview"> <el-button type="success" @click="isShow = true">開(kāi)始預(yù)覽</el-button> </div> <div class="pdfContainer" v-if="isShow"> <div class="button"> <el-button type="success" @click="prev()">上一頁(yè)</el-button> <el-button type="success" @click="next()">下一頁(yè)</el-button> <el-button type="success" @click="scaleD()">放大</el-button> <el-button type="success" @click="scaleX()">縮小</el-button> <el-button type="success" @click="clockwise()">順時(shí)針</el-button> <el-button type="success" @click="antiClockwise()">逆時(shí)針</el-button> </div> <div class="pdf"> <pdf ref="pdf" :src="src" :page="currentPage" :rotate="pageRotate" @num-pages="pageCount = $event" @page-loaded="currentPage = $event" @loaded="loadPdfHandler" ></pdf> </div> <div class="page"> <span class="pageNum">{{ currentPage }}</span> <span class="pageNum">/</span> <span class="pageNum">{{ pageCount }}</span> </div> </div> </div> </template> <script> import Pdf from "vue-pdf"; export default { data() { return { src: "http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf", // pdf的路徑 實(shí)際項(xiàng)目后端返回 currentPage: 0, // pdf文件頁(yè)碼 pageCount: 0, // pdf文件總頁(yè)數(shù) scale: 100, // 開(kāi)始的時(shí)候默認(rèn)和容器一樣大即寬高都是100% pageRotate: 0, // 旋轉(zhuǎn)角度 isShow: false }; }, components: { Pdf }, mounted() { console.log(Pdf, "Pdf----->>>"); }, methods: { // pdf加載時(shí) loadPdfHandler(e) { this.currentPage = 1; // 加載的時(shí)候先加載第一頁(yè) this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%"; this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%"; }, // 上一頁(yè) prev() { if (this.currentPage > 1) { this.currentPage--; } }, // 下一頁(yè) next() { if (this.currentPage < this.pageCount) { this.currentPage++; } }, //放大 scaleD() { if(this.scale == 100) return this.$message.warning('已經(jīng)是最大嘍~~') this.scale += 10; this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%"; this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%"; }, //縮小 scaleX() { if(this.scale == 40) return this.$message.warning('已經(jīng)是最小嘍~~') this.scale += -10; this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%"; this.$refs.pdf.$el.style.height = parseInt(this.scale) + "%"; }, // 順時(shí)針 clockwise() { this.pageRotate += 90; }, // 逆時(shí)針 antiClockwise() { this.pageRotate -= 90; }, }, }; </script> <style scoped> .global { width: 100%; height: 100%; } .preview { width: 100%; height: 50px; } .pdfContainer { width: 100%; height: calc(100% - 50px); } .pdfContainer .button { width: 100%; height: 50px; display: flex; align-items: center; } .pdfContainer .pdf { width: 100%; height: calc(100% - 100px); overflow-y: auto; } .pdfContainer .page { width: 100%; height: 50px; } .pageNum { font-size: 28px; } </style>
到此這篇關(guān)于Vue使用vue-pdf實(shí)現(xiàn)PDF文件預(yù)覽的文章就介紹到這了,更多相關(guān)Vue PDF文件預(yù)覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
程序員應(yīng)該知道的vuex冷門(mén)小技巧(超好用)
Vue基本用法很容易上手,但是有很多優(yōu)化的寫(xiě)法你就不一定知道了,下面這篇文章主要給大家介紹了關(guān)于程序員應(yīng)該知道的vuex冷門(mén)小技巧的相關(guān)資料,需要的朋友可以參考下2022-05-05解決vux 中popup 組件Mask 遮罩在最上層的問(wèn)題
這篇文章主要介紹了解決vux 中popup 組件Mask 遮罩在最上層的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11vue2.5.2使用http請(qǐng)求獲取靜態(tài)json數(shù)據(jù)的實(shí)例代碼
這篇文章主要介紹了vue2.5.2使用http請(qǐng)求獲取靜態(tài)json數(shù)據(jù)的實(shí)例代碼,需要的朋友可以參考下2018-02-02vue不通過(guò)路由直接獲取url中參數(shù)的方法示例
通過(guò)url傳遞參數(shù)是我們?cè)陂_(kāi)發(fā)中經(jīng)常用到的一種傳參方法,但通過(guò)url傳遞后改如果獲取呢?下面這篇文章主要給大家介紹了關(guān)于vue如何不通過(guò)路由直接獲取url中參數(shù)的相關(guān)資料,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-08-08vue點(diǎn)擊按鈕跳轉(zhuǎn)到另一個(gè)vue頁(yè)面實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于vue點(diǎn)擊按鈕跳轉(zhuǎn)到另一個(gè)vue頁(yè)面的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-08-08Vue項(xiàng)目添加前綴,ngnix發(fā)布相關(guān)修改問(wèn)題
這篇文章主要介紹了Vue項(xiàng)目添加前綴,ngnix發(fā)布相關(guān)修改問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07Vue官方推薦AJAX組件axios.js使用方法詳解與API
axios是Vue官方推薦AJAX組件,下面為大家介紹axios.js庫(kù)的詳細(xì)使用方法與API介紹2018-10-10