项目用到pdf预览，试了pdf-dist和vue-pdf，总结下来，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, //放大系数
            idx: -1,
            clauseTitle: "",
            loadedRatio: 0,
            rotate: 0,

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

    created () {
        
    },

    methods: {
        // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
        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);
        },

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

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

        // pdf加载时
        loadPdfHandler(e) {            
            this.currentPage = 1; // 加载的时候先加载第一页
        },
        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('无效的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中存在电子签章的话，控制台会报错

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;
}