参考错误：PDFJS 未定义 Asp.net

Question

我正在尝试使用canvas和 PDF.JS Stable v.2.2.228 显示 pdf，但是当我执行我的网络表单时，它在控制台中显示此错误： ReferenceError: PDFJS is not defined 。 我阅读了有关被删除的全局 PDFJS 对象的一些内容，但我找不到正确的语法[JS 中的新内容] 。 任何建议都非常感谢

我正在关注这个例子，以防万一： https : //usefulangle.com/post/20/pdfjs-tutorial-1-preview-pdf-during-upload-wih-next-prev-buttons

JS代码：

   function showPDF(pdf_url) {

            PDFJS.getDocument({ url: pdf_url }).then(function (pdf_doc) {
                __PDF_DOC = pdf_doc;
                __TOTAL_PAGES = __PDF_DOC.numPages;

                // Show the first page
                showPage(1);
            }).catch(function (error) {
                // If error re-show the upload button

                alert(error.message);
            });;

        }

        function showPage(page_no) {
            __PAGE_RENDERING_IN_PROGRESS = 1;
            __CURRENT_PAGE = page_no;

            __PDF_DOC.getPage(page_no).then(function (page) {
                // As the canvas is of a fixed width we need to set the scale of the viewport accordingly
                var scale_required = __CANVAS.width / page.getViewport(1).width;

                // Get viewport of the page at required scale
                var viewport = page.getViewport(scale_required);

                // Set canvas height
                __CANVAS.height = viewport.height;

                var renderContext = {
                    canvasContext: __CANVAS_CTX,
                    viewport: viewport
                };

                page.render(renderContext).then(function () {
                    __PAGE_RENDERING_IN_PROGRESS = 0;

                    // Show the canvas and hide the page loader
                    $("#pdf-canvas").show();
                });
            });
        }

        function ValidateFileUpload() {
            var fuData = document.getElementById('FileUpload1');
            var FileUploadPath = fuData.value;

            //To check if user upload any file
            if (FileUploadPath == '') {
                alert("Por favor subir un archivo");

            } else {
                var Extension = FileUploadPath.substring(
                    FileUploadPath.lastIndexOf('.') + 1).toLowerCase();

                //The file uploaded is an image

                if (Extension == "png" || Extension == "jpeg" || Extension == "jpg" || Extension == "gif" || Extension == "jfif") {

                    // To Display
                    if (fuData.files && fuData.files[0]) {
                        var reader = new FileReader();

                        reader.onload = function (e) {
                            $('#ImgPreview').attr('src', e.target.result);
                            //document.getElementById('ImgPreview').files[0].name;
                           var nombre= document.getElementById('ImgPreview').files[0].name;
                            document.querySelector('#LblFileupload').innerText = nombre;
                        }

                        reader.readAsDataURL(fuData.files[0]);
                    }

                }

                else if (Extension == "pdf") {

                    var __PDF_DOC,
                        __CURRENT_PAGE,
                        __TOTAL_PAGES,
                        __PAGE_RENDERING_IN_PROGRESS = 0,
                        __CANVAS = $('#pdf-canvas').get(0),
                        __CANVAS_CTX = __CANVAS.getContext('2d');

                    showPDF(URL.createObjectURL($("#FileUpload1").get(0).files[0]));

                }


                //The file upload is NOT an image
                else {
                    alert("Solo se aceptan archivos en formato .JPG - .PNG - .JPEG - .GIF - .JFIF");

                }
            }
        }

HTML :

 <asp:FileUpload ID="FileUpload1" runat="server" accept="image/*"   onchange="return ValidateFileUpload()" Visible="true" />
<asp:Image ID="ImgPreview" runat="server" Height="600px" Width="500px" />
 <canvas id="pdf-canvas" width="400"> </canvas>

Answer 1

您应该将PDFJS更改为pdfjsLib 。 你也应该尝试添加行var __CANVAS = $('#pdf-canvas').get(0); 和var __CANVAS_CTX = __CANVAS.getContext('2d'); 在__CURRENT_PAGE = page_no; 在该函数中，因为您在尝试调用和使用它们之前没有初始化这些变量。 此外，您还需要在顶部该函数中使用的其他两个项目前添加 var。

所以它应该看起来像：

pdfjsLib.getDocument(URL.createObjectURL($("#FileUpload1").get(0).files[0])).then(doc => {
                        console.log("This file has " + doc._pdfInfo.numPages + "pages");

                        doc.getPage(1).then(page => {
                            var myCanvas = document.getElementById('pdf-canvas');
                            var context = myCanvas.getContext('2d');

                            var viewport = page.getViewport(1);
                            myCanvas.width = viewport.width;
                            myCanvas.height = viewport.height;

                            page.render({
                                canvasContext: context,
                                viewport : viewport
                            }
                            );
                        });

                    });