pdfjs-dist 后端返回文件前端实现预览pdf

pdfjs-dist锁定版本号2.2.228，别的都不太好使，各种各样的报错

不锁定的时候升高版本出现pdf预览不了

引用的时候 import pdfjsLib from 'pdfjs-dist/build/pdf.js'

import pdfjsLib from 'pdfjs-dist/webpack'这样写会报错，偶尔会报错，找不到问题，所以还是用上面的引用

 

 

function renderPdf(pdf) {

                let pdfDoc = pdf;

                let fragment = document.createDocumentFragment();

                console.log('frage', fragment);

                for (let i = 1; i <= pdfDoc.numPages; i++) {

                    let canvas = document.createElement('canvas')

                    let canvasContext = canvas.getContext('2d')

                    pdfDoc.getPage(i).then((page) => {

                        var viewport = page.getViewport(1); // 页面缩放比例，值越大越清晰

                        canvas.height = viewport.height;

                        canvas.width = viewport.width;

                        canvas.style.width = document.body.clientWidth + "px";

                        canvas.style.height = document.body.clientWidth * (viewport.height / viewport.width) + "px";

                        canvasContext.clearRect(0, 0, canvas.width, canvas.height);

                        var renderContext = {

                            canvasContext: canvasContext,

                            viewport: viewport,

                            rotate: 90,

                        };

                    page.render(renderContext) })

                    fragment.appendChild(canvas)

                }

                document.getElementById('pdf-box').appendChild(fragment)

            }

            const loadingTask = pdfjsLib.getDocument(this.getImageUrl(this.pdfFile));

            loadingTask.promise.then((pdfDocument) => {

                this.numPages = pdfDocument.numPages;

                renderPdf(pdfDocument)

            })

 

this.pdfFile在这里是后端返回的ali文件信息   

this.getImageUrl(this.pdfFile)是返回一个图片地址