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

谭CV

于 2021-02-18 17:39:41 发布

阅读量2.1k

点赞数

分类专栏： vue工作插件文章标签： vue vue-pdf vue-pdf签章不显示 vue-pdf预览pdf 预览pdf

本文链接：https://blog.youkuaiyun.com/THcoding_Cat/article/details/113850101

版权

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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(

最低0.47元/天解锁文章