Vue网页中使用PDF.js弹窗显示pdf文档所有内容

本文中使用的PDF.js组件版本为3.11.174（最新版使用上会有所不同），引入文件如下：

首先页面定义一个隐藏的弹窗块（此处用ElementUI的Dialog组件）

    

        @**@
        
        
    

绑定的Vue Data:

data: function() {
    return {
        pdffile: {},
        isPDFVisible: false,
        pdfPages: 0,
        ..........
    }
}

要展示的文件这里集成在一个上传组件中，如代码所示：

    

        
            @**@
            
            
将文件拖到此处，或点击上传

            

                @**@
                {{file.name}}
                
                    
                        
                    
                    
                        
                    
                    
                        
                    
                
            

        
    

重点是在显示PDF文件内容的方法——handleViewFile(file)：

handleViewFile: function (file) {
    var pThis = this;
    this.pdffile = file;
    this.isPDFVisible = true;
    this.$nextTick(function () {
        //const canvas = document.getElementById('pdf-canvas');
        pdfjsLib.getDocument(file.url).promise.then(function (pdfDoc) {
            pThis.pdfPages = pdfDoc.numPages;
            //由于canvas.getContext('2d')必须是在生成DOM并显示的情况下操作，由此需先"isPDFVisible=true"显示出组件，并在$nextTick完成DOM加载后再处理pdf内容的渲染：
            pThis.$nextTick(function () {
                for (var i = 1; i <= pThis.pdfPages; i++) {
                    const canvas = pThis.$refs["pdf-canvas"][i - 1];
                    pdfDoc.getPage(i).then(function (page) {
                        const viewport = page.getViewport({ scale: 1 });
                        const context = canvas.getContext('2d');
                        canvas.height = viewport.height;
                        canvas.width = viewport.width;
                        page.render({
                            canvasContext: context,
                            viewport: viewport
                        });
                    });
                }
            });
        });
    });
},

参考文章：

PDF.js 示例简介：

https://blog.csdn.net/github_36738403/article/details/131325145

如何显示整体PDF（不仅仅是一页）PDF.JS： 

https://www.codenong.com/cs108161952/