ReferenceError: PDF JS не определено Asp.net - PullRequest
Новая
       56

ReferenceError: PDF JS не определено Asp.net

1 голос
/ 30 января 2020

Я пытаюсь отобразить PDF, используя canvas и PDF. JS Стабильный v.2.2.228, но когда я выполняю свою веб-форму, в консоли отображается эта ошибка: ReferenceError: PDF JS не определено . Я что-то читал об удалении глобального объекта PDF JS, но не могу найти правильный синтаксис [Вроде нового в 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>

1 Ответ

1 голос
/ 30 января 2020

Вы должны изменить 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
                            }
                            );
                        });

                    });
...