vue-pdf简单用法

1.先下载

cnpm install vue-pdf --save-dev

2.在局部引入,使用

<template>
  <pdf src="./static/relativity.pdf"></pdf>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  }
}
</script>

例子：可实现放大缩小，翻页功能

<template>
    <div class="all">
        <!-- <Mheader status="useAgreement" class="head" /> -->
        <header>
            <router-link to="/main/mine" slot="left" class="sprites_all sprites_back"></router-link>
            <div class="newbankCard">
                <span class="sprites_all sprites_back" @click="goBack"></span>
                <span class="pf_thick">{{clauseTitle}}</span>
            </div>
        </header>
        <div class="main">
            <!-- {{currentPage}} / {{pageCount}} -->
            <pdf :src="src" :page="currentPage" @progress="loadedRatio = $event" @num-pages="pageCount=$event" @page-loaded="currentPage=$event" @loaded="loadPdfHandler" ref="wrapper" class="pdf"></pdf>
            <!-- <button @click="changePdfPage(1)">+</button> -->
        </div>
        <ul class="footers">
            <li :class="{select:idx==0}" @touchstart="idx=0" @touchend="idx=-1" @click="scaleD">
                <p>放大</p>
            </li>
            <li :class="{select:idx==1}" @touchstart="idx=1" @touchend="idx=-1" @click="scaleX">
                <p>缩小</p>
            </li>
            <li :class="{select:idx==2}" @touchstart="idx=2" @touchend="idx=-1" @click="changePdfPage(0)">
                <p>上一页</p>
            </li>
            <li :class="{select:idx==3}" @touchstart="idx=3" @touchend="idx=-1" @click="changePdfPage(1)">
                <p>下一页</p>
            </li>
        </ul>

    </div>
</template>

<script>
    import pdf from "vue-pdf";
    import Mheader from "../Mheader";
    export default {
        components: {
            pdf,
            Mheader
        },
        data() {
            return {
                currentPage: 1,
                pageCount: 0,
                src: "", // pdf文件地址
                scale: 100, //放大系数
                idx: -1,
                clauseTitle: "",
                loadedRatio: 0
            };
        },
        created() {
            // 有时PDF文件地址会出现跨域的情况,这里最好处理一下
            let clause = this.$route.query.clause + "";
            switch(clause) {
                case "0":
                    this.src = "../../../../static/clause/A1.pdf";
                    this.clauseTitle = "使用者协定";
                    break;
                case "1":
                    this.src = "../../../../static/clause/A2.pdf";
                    this.clauseTitle = "私隐政策声明";
                    break;
                case "2":
                    this.src = "../../../../static/clause/C1.pdf";
                    this.clauseTitle = "产品披露及风险声明";
                    break;
                case "3":
                    this.src = "../../../../static/clause/C2.pdf";
                    this.clauseTitle = "反洗钱及反恐融资声明";
                    break;
                case "4":
                    this.src = "../../../../static/clause/C3.pdf";
                    this.clauseTitle = "私隐政策声明";
                    break;
                case "5":
                    this.src = "../../../../static/clause/C4.pdf";
                    this.clauseTitle = "客户协议";
                    break;
                case "6":
                    this.src = "../../../../static/clause/C5.pdf";
                    this.clauseTitle = "使用者协定";
                    break;
                case "7":
                    this.src = "";
                    this.clauseTitle = "积分计划";
                    break;
                default:
                    this.src = "../../../../static/clause/A1.pdf";
            }
            // this.src = pdf.createLoadingTask(this.src);
        },
        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);
            },
            // 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 + ")";
            }
        },
        mounted() {}
    };
</script>
<style lang="scss" scoped>
    @import "../../../assets/css/reset.scss";
    .all {
        padding: 0 0 rem(80);
        header {
            height: rem(88);
            position: sticky;
            top: 0;
            background-color: #fff;
            width: 100%;
            z-index: 400;
            .sprites_all {
                position: absolute;
                left: rem(30);
                top: rem(24);
                display: inline-block;
                width: rem(40);
                height: rem(40);
                background: url("../../../assets/img/transaction/transaction_icon.png") no-repeat;
                background-size: rem(400);
                vertical-align: bottom;
                background-position: 0 rem(-50);
            }
            .sprites_back {
                background-position: rem(-50) 0;
            }
            span {
                line-height: rem(86);
                font-size: rem(30);
                color: $text_3;
                // font-weight: bold;
            }
            border-bottom: 1px solid $line_color;
            .newbankCard {
                border-bottom: 1px solid $line_color;
            }
        }
        .main {
            overflow: auto;
        }
        .head {
            position: fixed;
            top: 0;
            height: rem(88);
        }
        .footers {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: rem(100);
            display: flex;
            z-index: 100;
            color: #333;
            border-top: 1px solid #f0f0f0;
            line-height: rem(80);
            background-color: #fff;
            li {
                text-align: center;
                flex: 1;
                padding: rem(10) 0;
                p {
                    border-right: 1px solid #f0f0f0;
                }
            }
            li:last-child {
                p {
                    border-right: 0 none;
                }
            }
            .select {
                color: #fff;
                background-color: #c59c5a;
                p {
                    border-right: 0 none;
                }
            }
        }
    }
</style>

参考链接：https://www.npmjs.com/package/vue-pdf