1

Tengo este código javascript para visualizar fotos y cuando se suba un pdf poder visualizarlo en un canvas usando PDF.JS en su ultima versión 2.2.228 , pero cuando ejecuto mi programa , en la consola me muestra el siguiente error a pesar de que ya se encuentra definido al momento de ingresar a la condicional pdf : __CANVAS is not defined

Estaba siguiendo este ejemplo , en caso sea necesario : https://usefulangle.com/post/20/pdfjs-tutorial-1-preview-pdf-during-upload-wih-next-prev-buttons

He probado poniendo las variables que se encuentran dentro de la condicional de extension 'pdf' , de manera global al inicio del script pero sigue saliendo el mismo error ,

Cualquier sugerencia es bienvenida.

Java Script :

 <script>



        function showPDF(pdf_url) {

            pdfjsLib.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");

                }
            }
        }

    </script>

1 respuesta 1

1

Al final cambie todo el código de Javascript, es prácticamente el mismo enfoque que el código de arriba pero un poco más resumido.

Espero que alguien pueda hacer buen uso de esto :

 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
                            }
                            );
                        });

                    });

2
  • en 23 horas marca tu respuesta como aceptada :D
    – fredyfx
    Commented el 30 ene. 2020 a las 16:34
  • Si, toca esperar :^) Commented el 30 ene. 2020 a las 17:52

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.