vue中實現在線預覽pdf文件

方法1：使用插件pdfObject（Safari不能正常顯示，安卓手機的支持也不好）

npm i pdfobject -S

main.js

Vue.prototype.$PDFObject = PDFObject;

 

<div id="example1" style="height:600px;width: 80%;margin: 0 auto"></div>

mounted(){
      let _this=this;
      this.$nextTick(function(){
        _this.$PDFObject.embed('/pdf/test.pdf', "#example1");
      });
     
    },

我這里用的是vue3,pdf文件放在public文件夾下

 

 對於兼容問題的解決辦法，可以參考：https://www.cnblogs.com/wuhuacong/p/9566764.html

方法2 使用插件vue-pdf

npm i vue-pdf -S

在使用的地方：

import pdf from 'vue-pdf'

注冊組件：

components:{pdf},

<ul class="pdf_pager">
            <li @click="scaleD">
                <p>放大</p>
            </li>
            <li @click="scaleX">
                <p>縮小</p>
            </li>
            <li  @click="changePdfPage(0)">
                <p>上一頁</p>
            </li>
            <li @click="changePdfPage(1)">
                <p>下一頁</p>
            </li>
        </ul>
        <pdf src="/pdf/test.pdf" :page="currentPage" @progress="loadedRatio = $event" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler" ref="wrapper" class="pdf"></pdf>

 

可以實現翻頁和放大 縮小

方法：

// vue-pdf 改變PDF頁碼,val傳過來區分上一頁下一頁的值,0上一頁,1下一頁
            changePdfPage(val) {
                if(val === 0 && this.currentPage > 1) {
                    this.currentPage--;
                }
                if(val === 1 && this.currentPage < this.pageCount) {
                    this.currentPage++;
                }
            },
            // pdf加載時
            loadPdfHandler(e) {
                this.currentPage = 1; // 加載的時候先加載第一頁
            },
            //放大
            scaleD() {
                this.scale += 5;
                // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
                this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
            },
             //縮小
            scaleX() {
                if(this.scale == 100) {
                    return;
                }
                this.scale += -5;
                this.$refs.wrapper.$el.style.width = parseInt(this.scale) + "%";
                // this.$refs.wrapper.$el.style.transform = "scale(" + this.scale + ")";
            }
            // vue-pdf 改變PDF頁碼,val傳過來區分上一頁下一頁的值,0上一頁,1下一頁