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

2022-01-14 11:02:42 阅读：288 来源： 互联网

标签：插件 vue viewer html static file pdf pdfjs

官方下载： 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>

标签：插件,vue,viewer,html,static,file,pdf,pdfjs
来源： https://www.cnblogs.com/liuyjui/p/15801023.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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