項(xiàng)目用到pdf預(yù)覽，試了pdf-dist和vue-pdf，總結(jié)下來(lái)，vue-pdf更好用。
具體文檔https://www.npmjs.com/package/vue-pdf

安裝

npm i vue-pdf

具體用法

<template>
    <div>
        <div id="tools">
            <div class="flex">
                <div class="flex-1" @click="previous">
                    <span class="iconfont fz-24 text-6 tool">&#xe615;</span>
                </div>
                <div class="flex-1" @click="next">
                    <span class="iconfont fz-24 text-6 tool">&#xe616;</span>
                </div>
                <div class="flex-1" @click="scaleD">
                    <span class="iconfont fz-24 text-6 tool">&#xe65d;</span>
                </div>
                <div class="flex-1" @click="scaleX">
                    <span class="iconfont fz-24 text-6 tool">&#xe607;</span>
                </div>
            </div>
        </div>
        <div id="container">
            <pdf :src="pdfSrc" :page="currentPage" :roate="rotate" @progress="onprogress" @num-pages="pageCount = $event" @page-loaded="loadPage" @loaded="loadPdfHandler" @error="loadError" ref="wrapper" class="pdf h-100"></pdf>
        </div>

        <van-overlay :show="showLoading" :z-index="3000">
            <div class="h-100 flex-center">
                <van-loading size="24px" type="spinner" vertical>已加載{{process}}%</van-loading>
            </div>
        </van-overlay>
    </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
    components: {
        pdf
    },

    data () {
        return {
            currentPage: 1,
            pageCount: 0,
            src: "", // pdf文件地址
            scale: 100, //放大系數(shù)
            idx: -1,
            clauseTitle: "",
            loadedRatio: 0,
            rotate: 0,

            showLoading: false,
            process: 0,
            pdfSrc: '',
        }
    },

    created () {
        
    },

    methods: {
        // 改變PDF頁(yè)碼,val傳過(guò)來(lái)區(qū)分上一頁(yè)下一頁(yè)的值,0上一頁(yè),1下一頁(yè)
        changePdfPage(val) {
            if(val === 0 && this.currentPage > 1) {
                this.currentPage--;
            }
            if(val === 1 && this.currentPage < this.pageCount) {
                this.currentPage++;
            }
        },
        goBack() {
            this.$router.go(-1);
        },

        loadPage (e){
            // console.log(e);
        },

        // 上一頁(yè)
        previous (){
            if (this.currentPage == 1) return
            this.currentPage -= 1
        },

        // 下一頁(yè)
        next (){
            if (this.currentPage == this.pageCount) return
            this.currentPage += 1
        },

        // pdf加載時(shí)
        loadPdfHandler(e) {            
            this.currentPage = 1; // 加載的時(shí)候先加載第一頁(yè)
        },
        onprogress (e){
            // console.log(e);
            this.showLoading = true
            this.process = (e*100).toFixed(0)
            if (e == 1){
                this.showLoading = false
            }
        },

        // 加載失敗
        loadError (e){
            console.log(123);
            
            console.log(e); 
        },

        //放大
        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 + ")";
        }
    },

    activated (){
        let pdfurl = this.$route.params.url
        console.log(pdfurl);
        
        
        if (pdfurl){
            this.pdfSrc = decodeURIComponent(pdfurl)
        }else {
            this.$toast('無(wú)效的pdf')
            this.$router.go(-1)
        }
    },
}
</script>

<style lang="less" scoped>
#container {
    margin-top: 52px;
    text-align: center;
    overflow: auto;
}

#tools {
    background: white;
    position: fixed;
    z-index: 9;
    width: 100%;
    height: 51px;
    overflow: hidden;
    top: 0;
    left: 0;
    text-align: center;
    border-bottom: 1px solid #eee;

    .tool{
        height: 51px;
        line-height: 51px;
    }
}
</style>

如果pdf中存在電子簽章的話，控制臺(tái)會(huì)報(bào)錯(cuò)

Warning: Unimplemented widget field type "Sig", falling back to base field type. 

解決辦法，找到node_modules里pdf-dist/build/pdf.worker.js，搜索AnnotationFlag.HIDDEN，找到類型下面的代碼， 把那行注釋掉即可。

if (data.fieldType === 'Sig') {
      data.fieldValue = null;
      // 此行注釋掉即可
      // _this3.setFlags(_util.AnnotationFlag.HIDDEN);
    }

    return _this3;
}