PDF Preview Issues with pdf.js 1.10.100. How to upgrade share to pdf.js 2.x?

[wuarmin]

Hello, 

I have an Alfresco 5.0 CE application (we use share-frontend) and upgraded to version pdf.js 1.10.100 (with the help of this merge ), because of PDF- rendering issues. 1.10.100 is the last 1.x version of pdf.js. Unfortunately my rendering issues are not resolved completely. So I tried to move to a 2.x (I tested it, there my issues are resolved) version of pdf.js, but I'm struggling with it. I get an Uncaught ReferenceError: PDFJS is not define. I have to adapt the PdfJs.js file.

@afaust Please can you help me? Can you give me some hints? I read, that you did an upgrade of pdf.js, so I think you have a PdfJs-Module, which should work with pdfjs 2.x? It would be very nice, if you could respond. Do you have a recommendation for me?

Thanks!

Best regards 

--wuarmin

[wuarmin]

Hello, 

I have an Alfresco 5.0 CE application (we use share-frontend) and upgraded to version pdf.js 1.10.100 (with the help of this merge ), because of PDF- rendering issues. 1.10.100 is the last 1.x version of pdf.js. Unfortunately my rendering issues are not resolved completely. So I tried to move to a 2.x (I tested it, there my issues are resolved) version of pdf.js, but I'm struggling with it. I get an Uncaught ReferenceError: PDFJS is not define. I have to adapt the PdfJs.js file.

@afaust Please can you help me? Can you give me some hints? I read, that you did an upgrade of pdf.js, so I think you have a PdfJs-Module, which should work with pdfjs 2.x? It would be very nice, if you could respond. Do you have a recommendation for me?

Thanks!

Best regards 

--wuarmin

[wuarmin]

The "crowbar"-solution in our case would simply be to use the viewer of the browser. What do you think about it?

Best regards

--wuarmin

[wuarmin]

Hello,

thank you for the response.

My rendering issues have nothing to do with transformations. It's only about certain PDF's that the old pdf.js (1.x) version can't display. It's really just about an update of the pdf.js lib. With 2.x there were breaking changes and thus replacing the pdf.js lib is not that easy. I have to adapt the Alfresco PdfJS-Module.Maybe someone has already done this job and can help me.

Best regards

--wuarmin

[afaust · Accepted solution]

I extracted a DIFF file from the patched PdfJs.js file for Share (as components/preview/PdfJs.js) and the original for Alfresco 7.0 - note that some changes are only due to my code QA setup with automatic JS linting. Unfortunately I cannot attach text-based files, so it'll have to be an inline code block:

38d37
<  // File patched by Axel Faust (Acosix GmbH) to upgrade PDFJS to 2.6.347
43a43
>    var K_CSS_UNITS = 96.0 / 72.0;
59,61d58
<    // Note: PDFJS may be loaded out-of-order with this file
<    var PDFJS;
< 
71,85d67
<       // lazy lookup
<       if (!PDFJS) {
<          // newer PDFJS (2.x) may be caught by Aikau's global AMD define (amd.js typically loaded before most other dependencies)
<          // Aikau's included PDFJS is actually older than Share's default (1.3.91 vs 1.10.100) and does not hook into AMD define
<          if (typeof pdfjsLib !== 'undefined') {
<             PDFJS = pdfjsLib;
<          } else if (typeof require === 'function') {
<             require(['pdfjs-dist/build/pdf'], function(pdfjs) {
<                 PDFJS = pdfjs;
<             });
<          } else {
<             console.error('Neither PDFJS nor AMD require available');
<          }
<       }
< 
618c600
<          this.onPdfLoaded.subscribe(function onPdfLoadEnableButtons() {
---
>          this.onPdfLoaded.subscribe(function onPdfLoadEnableButtons(p_type, p_args) {
692c674
<             fn: function () {
---
>             fn: function (e) {
728c710,711
<                var docHeight = Dom.getDocumentHeight(),
---
>                var sourceYuiEl = new YAHOO.util.Element(this.wp.getPreviewerElement()),
>                    docHeight = Dom.getDocumentHeight(),
773c756,757
<                   var docHeight = Dom.getDocumentHeight(),
---
>                   var sourceYuiEl = new YAHOO.util.Element(this.wp.getPreviewerElement()),
>                       docHeight = Dom.getDocumentHeight(),
817c801
<          var fileurl = this.attributes.src ? this.wp.getThumbnailUrl(this.attributes.src) : this.wp.getContentUrl();
---
>          var me = this, fileurl = this.attributes.src ? this.wp.getThumbnailUrl(this.attributes.src) : this.wp.getContentUrl();
850c834
<             this.onPdfLoaded.subscribe(function onPdfLoadStopSpinner() {
---
>             this.onPdfLoaded.subscribe(function onPdfLoadStopSpinner(p_type, p_args) {
860,861c844
<          PDFJS.GlobalWorkerOptions.workersrc=this.workerSrc;
< 
---
>          PDFJS.workersrc=this.workerSrc;
863,864c846,847
<          params.cMapUrl = './cmaps/';
<          params.cMapPacked = true;
---
>          PDFJS.cMapUrl = './cmaps/';
>          PDFJS.cMapPacked = true;
867c850,851
<          if (this.attributes.progressiveLoading == "true")
---
>          // We also test if it may already be set to true by compatibility.js tests, some browsers do not support it.
>          if (this.attributes.progressiveLoading == "true" && PDFJS.disableRange != true)
869c853
<              params.disableRange = false;
---
>              PDFJS.disableRange = false;
871c855
<              params.disableAutoFetch = false;
---
>              PDFJS.disableAutoFetch = false;
875c859
<              params.disableRange = true;
---
>              PDFJS.disableRange = true;
880c864
<             Alfresco.logger.debug("Using PDFJS params.disableRange=" + params.disableRange + " params.disableAutoFetch:" + params.disableAutoFetch);
---
>             Alfresco.logger.debug("Using PDFJS.disableRange=" + PDFJS.disableRange + " PDFJS.disableAutoFetch:" + PDFJS.disableAutoFetch);
884c868
<          PDFJS.getDocument(params).promise.then
---
>          PDFJS.getDocument(params).then
928c912
<                var id = Alfresco.util.generateDomId(),
---
>                var me = this, id = Alfresco.util.generateDomId(),
969c953
<                }, function onPasswordEnter() {
---
>                }, function onPasswordEnter(e) {
1124c1108
<       _updateZoomControls : function PdfJs__updateZoomControls()
---
>       _updateZoomControls : function PdfJs__updateZoomControls(n)
1297c1281
<       onSidebarToggle : function PdfJs_onSidebarToggle()
---
>       onSidebarToggle : function PdfJs_onSidebarToggle(e_obj)
1325a1310,1314
>          var goToPage = function goToPage(e, obj) {
>             YAHOO.util.Event.stopEvent(e);
>             this._scrollToPage(obj.pn);
>          };
> 
1351c1340
<       onPagePrevious : function PdfJs_onPagePrevious()
---
>       onPagePrevious : function PdfJs_onPagePrevious(e_obj)
1364c1353
<       onPageNext : function PdfJs_onPageNext()
---
>       onPageNext : function PdfJs_onPageNext(e_obj)
1378c1367
<       onFullScreen : function PdfJs_onFullScreen()
---
>       onFullScreen : function PdfJs_onFullScreen(e_obj)
1560c1549
<       onFindChangeMatchCase : function PdfJs_onFindChangeMatchCase()
---
>       onFindChangeMatchCase : function PdfJs_onFindChangeMatchCase(e_obj)
1565c1554
<       onFindChangeHighlight : function PdfJs_onFindChangeHighlight()
---
>       onFindChangeHighlight : function PdfJs_onFindChangeHighlight(e_obj)
1643c1632
<       onZoomOut : function PdfJs_onZoomOut()
---
>       onZoomOut : function PdfJs_onZoomOut(p_obj)
1656c1645
<       onZoomIn : function PdfJs_onZoomIn()
---
>       onZoomIn : function PdfJs_onZoomIn(p_obj)
1671c1660,1661
<          var oMenuItem = p_aArgs[1];   // MenuItem instance that was the target of the event
---
>          var oEvent = p_aArgs[0],      // DOM event
>              oMenuItem = p_aArgs[1];   // MenuItem instance that was the target of the event
1684c1674
<       onDownloadClick : function PdfJs_onDownloadClick()
---
>       onDownloadClick : function PdfJs_onDownloadClick(p_obj)
1694c1684
<       onDownloadPDFClick : function PdfJs_onDownloadPDFClick()
---
>       onDownloadPDFClick : function PdfJs_onDownloadPDFClick(p_obj)
1704c1694
<       onMaximizeClick : function PdfJs_onMaximizeClick()
---
>       onMaximizeClick : function PdfJs_onMaximizeClick(p_obj)
1751c1741
<       onLinkClick : function PdfJs_onLinkClick()
---
>       onLinkClick : function PdfJs_onLinkClick(p_obj)
1777a1768
>             var slideurl = window.location.href.replace(window.location.hash, "") + "#page=" + this.pageNum;
1830c1821
<       onRecalculatePreviewLayout : function PdfJs_onRecalculatePreviewLayout()
---
>       onRecalculatePreviewLayout : function PdfJs_onRecalculatePreviewLayout(p_obj)
1858c1849
<       onWindowHashChange : function PdfJs_onWindowHashChange()
---
>       onWindowHashChange : function PdfJs_onWindowHashChange(p_obj)
1969c1960
<       getVPos : function DocumentPage_getVPos()
---
>       getVPos : function DocumentPage_getVPos(page)
1996c1987
<          var viewport = this.content.getViewport({scale: this.parent.currentScale});
---
>          var viewport = this.content.getViewport(this.parent.currentScale);
2007a1999
>              view = content.view,
2058c2050
<       _setPageSize : function DocumentPage__setPageSize()
---
>       _setPageSize : function DocumentPage__setPageSize(page)
2060c2052
<          var viewPort = this.content.getViewport({scale: this.parent.currentScale});
---
>          var viewPort = this.content.getViewport(this.parent.currentScale);
2436,2438c2428,2430
<                 contentWidth = parseInt(currentPage.content.view[2]),
<                 contentHeight = parseInt(currentPage.content.view[3]),
<                 rotation = currentPage.content.rotate,
---
>                 contentWidth = parseInt(currentPage.content.pageInfo.view[2]),
>                 contentHeight = parseInt(currentPage.content.pageInfo.view[3]),
>                 rotation = currentPage.content.pageInfo.rotate,
2594c2586
<       onScroll : function DocumentView_onScroll()
---
>       onScroll : function DocumentView_onScroll(e_obj)

[wuarmin]

Hey @afaust ,

thank you very much. That is exactly what I need.

Best regards