ReferenceError: PDFJS 未定义 Asp.net

Question

我正在尝试使用canvas 和 PDF.JS Stable v.2.2.228 显示 pdf，但是当我执行我的网络表单时，它在控制台中显示此错误：ReferenceError: PDFJS is not defined强>。 我读到了一些关于删除全局 PDFJS 对象的信息，但我找不到正确的语法 [Kinda new in 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。此外，您应该尝试在该函数中的__CURRENT_PAGE = page_no; 下添加行var __CANVAS = $('#pdf-canvas').get(0); 和var __CANVAS_CTX = __CANVAS.getContext('2d');，因为在尝试调用和使用它们之前您没有初始化这些变量。此外，您还需要在顶部该函数中使用的其他两项前面添加 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
                            }
                            );
                        });

                    });