topic Re: PDF Preview Issues with pdf.js 1.10.100. How to upgrade share to pdf.js 2.x? in Alfresco Forum

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

wuarmin — Tue, 12 Oct 2021 10:47:59 GMT

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

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

wuarmin — Tue, 12 Oct 2021 11:40:47 GMT

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

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

wuarmin — Tue, 12 Oct 2021 12:24:37 GMT

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

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

afaust — Wed, 13 Oct 2021 07:50:30 GMT

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)

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

wuarmin — Thu, 14 Oct 2021 14:23:42 GMT

Hey @afaust ,

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

Best regards

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

amanda_roberts — Fri, 15 Oct 2021 15:33:03 GMT

Hi @wuarmin - great to hear that @afaust's solution helped! Please feel free to mark his answer as a solution to this question to help others out who may have a similar issue.

Thanks!

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

wuarmin — Mon, 18 Oct 2021 09:21:09 GMT

Hey, @afaust and @amanda_roberts ,

thanks again, I just noticed that I had to change the following line (keyword: camelcase) so that an update of the library would work.

PDFJS.GlobalWorkerOptions.workersrc=this.workerSrc;

PDFJS.GlobalWorkerOptions.workersrc=this.workerSrc;

Can you explain that to yourself?

Best regards

wuarmin

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

afaust — Mon, 18 Oct 2021 11:14:29 GMT

If there's supposed to be a change in case, I must admit, I cannot see it. Both lines are identical.

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

wuarmin — Mon, 18 Oct 2021 13:14:35 GMT

Sorry , my mistake, here once again:

PDFJS.GlobalWorkerOptions.workersrc=this.workerSrc;

PDFJS.GlobalWorkerOptions.workersrc=this.workerSrc;

Update:

That should be an alfresco hub problem. I can't capitalize the S in the term: PDFJS.GlobalWorkerOptions.workerSrc. In the preview it looks ok, but if I save it, it goes away. Maybe the same issue in your DIFF.

PDFJS.GlobalWorkerOptions.workersrc=this.workerSrc;

best regards

wuarmin

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

uo67113 — Wed, 27 Apr 2022 12:26:44 GMT

Hello Axel,

Thanks for your patch, it works for me! However in my case I ended up hardcoding some paths in the PdfJs script, for instance

 // lazy lookup
 .../...
    } else if (typeof require === 'function') {
      require(['/share/res/components/preview/pdfjs/pdf.js'], function (pdfjs) {
        console.log('Loading /share/res/components/preview/ module');
        PDFJS = pdfjs;
        console.log('Loaded ' + pdfjs.toString());
      });
    } else {
      console.error('Neither PDFJS nor AMD require available');
    }
  }

I had also changed the define path in the webpackUniversalModuleDefinition

(function webpackUniversalModuleDefinition(root, factory) {
	if(typeof exports === 'object' && typeof module === 'object')
		module.exports = factory();
	else if(typeof define === 'function' && define.amd)
		define("/share/res/components/preview/pdfjs/pdf.js", [], factory);
.../...

This makes me think that I must be missing something, I do not believe that I should be doing all these hacks

Any thoughts on this?

Thanks in advance,

Cheers,

Luis