【vue && vue-pdf】pdf展示及解决签章不显示的问题

最新推荐文章于 2024-11-21 17:01:22 发布

原创

最新推荐文章于 2024-11-21 17:01:22 发布 · 2.3k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-pdf #vue-pdf签章不显示 #vue-pdf预览pdf #预览pdf

本文档介绍了如何在Vue项目中使用vue-pdf组件来展示PDF文件，并详细阐述了如何解决PDF签章不显示的问题，包括安装依赖、组件引入、页面渲染以及关键代码修改。同时，提供了一种解决签章隐藏的方案，涉及到对pdf.js库的源码调整。

1.下载

npm i vue-pdf
//我使用的是4.2.0版本,版本可能影响问题的解决
npm i vue-pdf@4.2.0

2.作为组件引入

import pdf from 'vue-pdf';


export default {
    components:{
        pdf
    }
}

3.使用

定义pages变量稍后用来获取pdf的页数

<pdf v-for="i in pages" :key="i"  :src="pdfUrl" :page="i"/>

获取pdf页数

export default {
    data(){
        return {
            pages:0
        }
    },
    methods:{
        // 获取pdf页码
        getPages(url){
            let loadingTask = pdf.createLoadingTask(url);
            loadingTask.promise.then(pdf => {
                this.url = loadingTask;
                this.pages = pdf.numPages;
            }).catch((err) => {
                this.$message.error('pdf加载失败');
                console.error('pdf加载