nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Alfresco Content Services

Accepted answers

afaust

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)

All comments

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

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

amanda_roberts

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!

wuarmin

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

uo67113

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