Estoy enfrentando grandes problemas de rendimiento al cargar documentos pdf grandes (alrededor de 30/40 MB) usando pdf.js. Soy nuevo en la forma en que funciona y leí mucho al respecto, pero nada ayudó.

A continuación se muestran mis ejemplos de código. En archivo HTML

 <div id="divCanvasTemplate"> <div id="divCanvasContainer-{pageIndex}" class="canvas-container"> <canvas id="cnvDesigner-{pageIndex} class="canvas-designer"></canvas> </div> </div>

En el archivo JS, tengo el siguiente método.

 var _loadFile = function() { var pdfjsLib = window['pdfjs-dist/build/pdf']; pdfjsLib.GlobalWorkerOptions.workerSrc = _workerUrl; $ajax({ url: "GEtPDFFileBytes", type: "GET", data: { "documentid": _documentId }, success: function(result) { var raw = atob(result); var loadintask = pdfjsLib.getDocument({ data: raw }); loadingtask.promise.then(function(pdfDoc_) { _pageCount = pdfDoc_._pdfInfo.numPages; _currentpageNumber = _getbasePage(); var canvasTemplate = $("#divCanvasTemplate").html(); var activeRange = _getActiveRange(_currentpageNumber); for (let pagenumber = 1; pagenumber <= _pagecount; pagenumber++) { var canvashtml = canvasTemplate.replace(/pageindex}/g, pagenumber); $("#divMasterCanvas").append(canvasHtml); pdfDoc = PdfDoc_; renderPDFPage(pageNumber); } }); } }); } } function renderPDFPage(num) { pdfDoc.getPage(num).then(function(page) { var currentpagenumber = page._pageindex + 1; var viewport = page.getViewPort({ scale: scale }); var canvas = document.getelementbyid('cnvDesigner-' + currentpagenumber); var context = canvas.getcontext('2d'); canvas.height = viewport.height; canvas.width = viewport.width; var rendercontext = { canvasContext: context, viewport: viewport }; var rendertask = page.render(rendercontext); } }); }

Leí sobre el uso de getImageData() y putImageData() en contexto para usar en tal escenario, pero no pude hacerlo funcionar. Cualquier ayuda sería muy apreciada.