10-12-2021 03:47 AM
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
10-13-2021 12:50 AM
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)
10-12-2021 04:40 AM
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
10-12-2021 05:24 AM
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
10-13-2021 12:50 AM
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)
10-14-2021 07:23 AM
Hey @afaust ,
thank you very much. That is exactly what I need.
Best regards
10-15-2021 08:33 AM
10-18-2021 02:21 AM
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;
to
PDFJS.GlobalWorkerOptions.workersrc=this.workerSrc;
10-18-2021 04:14 AM
If there's supposed to be a change in case, I must admit, I cannot see it. Both lines are identical.
10-18-2021 06:14 AM
Sorry , my mistake, here once again:
PDFJS.GlobalWorkerOptions.workersrc=this.workerSrc;
to
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
04-27-2022 05:26 AM
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
Explore our Alfresco products with the links below. Use labels to filter content by product module.