vue路由中pdfjs插件使用及找不到 viewer.html解決

官方下載：

https://mozilla.github.io/pdf.js/getting_started/#download

同目錄下pdfjs-2.12.313-dist.zip為官方下載包

此包為pdf白色背景

 

使用中遇到問題：找不到viewer.html

解決方法：把里面的viewer copy出來扔到public或者static里面

 

 

static下pdfjs

 

 

上代碼

<template>
    <div class="pdfjs">
       <iframe width="100%" frameborder="0" style="width: 100%; height: 100%;"
           v-if ="src" :src="pdfSrc"></iframe>
    </div>
</template>

<script>
    export default {
        components: {

        },
        data() {
            return {
                // 參數展示pdf地址
                 src: "https://aaeasy-file.newbanker.cn/pic/testforyuhan/裴士傑的專屬報告_2021-11-02_11_17_21.pdf",
                 // pdfjs模板
                 viewerUrl: '/static/pdfjs/web/viewer.html',
                 pdfSrc: '',
            };
        },
        methods: {
            loadPDF() {
                this.pdfSrc=`${this.viewerUrl}?file=${encodeURIComponent(this.src)}`

            },
        },
        mounted: function() {
             this.loadPDF();
        },
    };
</script>
<style lang="scss" scoped>
   .pdfjs {width:100%;    height: 90vh;}
</style>