pdfjsLib Implementation

ijs0 · October 22, 2024, 4:10pm

I am trying to use pdfjsLib as a PDF viewer inside a Retool app. However I haven't been able to get it to render a PDF and I'm not totally sure how to (or if I can) proceed.

This is a sample app for debugging:
https://xpdynamics.retool.com/apps/6e964ff0-907a-11ef-a647-2f7cc3dcdb59/PDFJSLib%20Testing

I have two libraries enabled:

For testing/debugging, I have two custom HTML components.

First one:

<!-- Manually include PDF.js library and worker directly in the HTML component -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
<script>
  // Set worker source manually as well
  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';

  // Test if PDF.js is loaded
  console.log("PDF.js Library Loaded:", typeof pdfjsLib);

  // Define the PDF URL
  const pdfUrl = "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";

  // Load and render the PDF document
  const loadingTask = pdfjsLib.getDocument(pdfUrl);
  loadingTask.promise.then(function(pdf) {
    // Load the first page
    pdf.getPage(1).then(function(page) {
      const scale = 1.5;
      const viewport = page.getViewport({ scale: scale });

      // Set up the canvas and its context
      const canvas = document.getElementById('pdfCanvas');
      const context = canvas.getContext('2d');
      canvas.width = viewport.width;
      canvas.height = viewport.height;

      // Render the page
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      const renderTask = page.render(renderContext);

      // Log when rendering is finished
      renderTask.promise.then(function() {
        console.log('Page rendered');
      });
    });
  }).catch(function(error) {
    console.error('Error loading PDF:', error);
  });
</script>

<!-- Add a canvas to render the PDF -->
<canvas id="pdfCanvas" style="border: 1px solid black;"></canvas>

Second approach:

<script>
  // Fetch the PDF.js library dynamically
  fetch('https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js')
    .then(response => response.text())
    .then(text => {
      // Create a script tag with the fetched library code
      const script = document.createElement('script');
      script.text = text;
      document.head.appendChild(script);

      // After PDF.js is loaded, set the worker source
      script.onload = function() {
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';
        console.log("PDF.js dynamically loaded:", typeof pdfjsLib);

        // Now proceed to load the PDF document
        const pdfUrl = "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";
        const loadingTask = pdfjsLib.getDocument(pdfUrl);

        loadingTask.promise.then(function(pdf) {
          // Load and render the first page
          pdf.getPage(1).then(function(page) {
            const scale = 1.5;
            const viewport = page.getViewport({ scale: scale });

            const canvas = document.getElementById('pdfCanvas');
            const context = canvas.getContext('2d');
            canvas.width = viewport.width;
            canvas.height = viewport.height;

            const renderContext = {
              canvasContext: context,
              viewport: viewport
            };
            const renderTask = page.render(renderContext);

            renderTask.promise.then(function() {
              console.log("Page rendered");
            });
          });
        });
      };
    }).catch(err => console.error("Error loading PDF.js:", err));
</script>

<!-- Canvas for PDF rendering -->
<canvas id="pdfCanvas" style="border: 1px solid black;"></canvas>

Any suggestions on how to get this up and running?

{"uuid":"6e964ff0-907a-11ef-a647-2f7cc3dcdb59","page":{"id":333435914,"data":{"appState":"[\"~#iR\",[\"^ \",\"n\",\"appTemplate\",\"v\",[\"^ \",\"appMaxWidth\",\"100%\",\"appStyles\",\"\",\"appTesting\",null,\"appThemeId\",null,\"appThemeModeId\",null,\"appThemeName\",null,\"createdAt\",null,\"customComponentCollections\",[],\"customDocumentTitle\",\"\",\"customDocumentTitleEnabled\",false,\"customShortcuts\",[],\"experimentalDataTabEnabled\",true,\"experimentalFeatures\",[\"^ \",\"disableMultiplayerEditing\",false,\"multiplayerEditingEnabled\",false,\"sourceControlTemplateDehydration\",false],\"folders\",[\"~#iL\",[]],\"formAppSettings\",[\"^ \",\"customRedirectUrl\",\"\"],\"inAppRetoolPillAppearance\",\"NO_OVERRIDE\",\"instrumentationEnabled\",false,\"internationalizationSettings\",[\"^ \",\"internationalizationEnabled\",false,\"internationalizationFiles\",[]],\"isFetching\",false,\"isFormApp\",false,\"isGlobalWidget\",false,\"isMobileApp\",false,\"loadingIndicatorsDisabled\",false,\"markdownLinkBehavior\",\"auto\",\"mobileAppSettings\",[\"^ \",\"displaySetting\",[\"^ \",\"landscapeMode\",false,\"tabletMode\",false],\"mobileOfflineModeBannerMode\",\"default\",\"mobileOfflineModeDelaySync\",false,\"mobileOfflineModeEnabled\",false],\"multiScreenMobileApp\",false,\"notificationsSettings\",[\"^ \",\"globalQueryShowFailureToast\",true,\"globalQueryShowSuccessToast\",false,\"globalQueryToastDuration\",4.5,\"globalToastPosition\",\"bottomRight\"],\"pageCodeFolders\",[\"^ \"],\"pageLoadValueOverrides\",[\"^B\",[]],\"plugins\",[\"~#iOM\",[\"html1\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"html1\",\"uuid\",\"6c2d09fc-8a1a-45c8-a297-78c35e846209\",\"type\",\"widget\",\"subtype\",\"HTMLWidget\",\"namespace\",null,\"resourceName\",null,\"resourceDisplayName\",null,\"template\",[\"^14\",[\"clickable\",false,\"css\",\".myClass {\\n  text-align: center;\\n}\",\"hidden\",false,\"html\",\"<!-- Manually include PDF.js library and worker directly in the HTML component -->\\n<script src=\\\"https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js\\\"></script>\\n<script>\\n  // Set worker source manually as well\\n  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';\\n\\n  // Test if PDF.js is loaded\\n  console.log(\\\"PDF.js Library Loaded:\\\", typeof pdfjsLib);\\n\\n  // Define the PDF URL\\n  const pdfUrl = \\\"https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf\\\";\\n\\n  // Load and render the PDF document\\n  const loadingTask = pdfjsLib.getDocument(pdfUrl);\\n  loadingTask.promise.then(function(pdf) {\\n    // Load the first page\\n    pdf.getPage(1).then(function(page) {\\n      const scale = 1.5;\\n      const viewport = page.getViewport({ scale: scale });\\n\\n      // Set up the canvas and its context\\n      const canvas = document.getElementById('pdfCanvas');\\n      const context = canvas.getContext('2d');\\n      canvas.width = viewport.width;\\n      canvas.height = viewport.height;\\n\\n      // Render the page\\n      const renderContext = {\\n        canvasContext: context,\\n        viewport: viewport\\n      };\\n      const renderTask = page.render(renderContext);\\n\\n      // Log when rendering is finished\\n      renderTask.promise.then(function() {\\n        console.log('Page rendered');\\n      });\\n    });\\n  }).catch(function(error) {\\n    console.error('Error loading PDF:', error);\\n  });\\n</script>\\n\\n<!-- Add a canvas to render the PDF -->\\n<canvas id=\\\"pdfCanvas\\\" style=\\\"border: 1px solid black;\\\"></canvas>\",\"margin\",\"4px 8px\",\"showInEditor\",false,\"tooltipText\",\"\",\"events\",[\"^14\",[]],\"maintainSpaceWhenHidden\",false]],\"style\",[\"^14\",[]],\"position2\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^16\",\"grid\",\"container\",\"\",\"rowGroup\",\"body\",\"subcontainer\",\"\",\"row\",1,\"col\",1,\"height\",0.2,\"width\",6,\"tabNum\",0,\"stackPosition\",null]]],\"mobilePosition2\",null,\"mobileAppPosition\",null,\"tabIndex\",null,\"^1>\",\"\",\"^7\",\"~m1729604158492\",\"updatedAt\",\"~m1729604166562\",\"folder\",\"\",\"screen\",null]]],\"$main\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"$main\",\"^15\",null,\"^16\",\"frame\",\"^17\",\"Frame\",\"^18\",null,\"^19\",null,\"^1:\",null,\"^1;\",[\"^14\",[\"type\",\"main\",\"sticky\",null,\"padding\",\"8px 12px\",\"enableFullBleed\",false,\"isHiddenOnDesktop\",false,\"isHiddenOnMobile\",false]],\"^1<\",[\"^14\",[]],\"^1=\",null,\"^1E\",null,\"^1F\",null,\"^1G\",null,\"^1>\",\"\",\"^7\",\"~m1729604158495\",\"^1H\",\"~m1729604158495\",\"^1I\",\"\",\"^1J\",null]]],\"html2\",[\"^0\",[\"^ \",\"n\",\"pluginTemplate\",\"v\",[\"^ \",\"id\",\"html2\",\"^15\",\"14658651-ce78-4b6e-a959-d05ccd839d52\",\"^16\",\"widget\",\"^17\",\"HTMLWidget\",\"^18\",null,\"^19\",null,\"^1:\",null,\"^1;\",[\"^14\",[\"clickable\",false,\"css\",\".myClass {\\n  text-align: center;\\n}\",\"hidden\",false,\"html\",\"<script>\\n  // Fetch the PDF.js library dynamically\\n  fetch('https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js')\\n    .then(response => response.text())\\n    .then(text => {\\n      // Create a script tag with the fetched library code\\n      const script = document.createElement('script');\\n      script.text = text;\\n      document.head.appendChild(script);\\n\\n      // After PDF.js is loaded, set the worker source\\n      script.onload = function() {\\n        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';\\n        console.log(\\\"PDF.js dynamically loaded:\\\", typeof pdfjsLib);\\n\\n        // Now proceed to load the PDF document\\n        const pdfUrl = \\\"https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf\\\";\\n        const loadingTask = pdfjsLib.getDocument(pdfUrl);\\n\\n        loadingTask.promise.then(function(pdf) {\\n          // Load and render the first page\\n          pdf.getPage(1).then(function(page) {\\n            const scale = 1.5;\\n            const viewport = page.getViewport({ scale: scale });\\n\\n            const canvas = document.getElementById('pdfCanvas');\\n            const context = canvas.getContext('2d');\\n            canvas.width = viewport.width;\\n            canvas.height = viewport.height;\\n\\n            const renderContext = {\\n              canvasContext: context,\\n              viewport: viewport\\n            };\\n            const renderTask = page.render(renderContext);\\n\\n            renderTask.promise.then(function() {\\n              console.log(\\\"Page rendered\\\");\\n            });\\n          });\\n        });\\n      };\\n    }).catch(err => console.error(\\\"Error loading PDF.js:\\\", err));\\n</script>\\n\\n<!-- Canvas for PDF rendering -->\\n<canvas id=\\\"pdfCanvas\\\" style=\\\"border: 1px solid black;\\\"></canvas>\\n\",\"margin\",\"4px 8px\",\"showInEditor\",false,\"tooltipText\",\"\",\"events\",[\"^14\",[]],\"maintainSpaceWhenHidden\",false]],\"^1<\",[\"^14\",[]],\"^1=\",[\"^0\",[\"^ \",\"n\",\"position2\",\"v\",[\"^ \",\"^16\",\"grid\",\"^1>\",\"\",\"^1?\",\"body\",\"^1@\",\"\",\"row\",10.8,\"col\",1,\"^1A\",0.2,\"^1B\",3,\"^1C\",0,\"^1D\",null]]],\"^1E\",null,\"^1F\",null,\"^1G\",null,\"^1>\",\"\",\"^7\",\"~m1729604205069\",\"^1H\",\"~m1729604207029\",\"^1I\",\"\",\"^1J\",null]]]]],\"preloadedAppJavaScript\",null,\"preloadedAppJSLinks\",[\"https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js\",\"https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js\"],\"queryStatusVisibility\",false,\"responsiveLayoutDisabled\",false,\"rootScreen\",null,\"savePlatform\",\"web\",\"shortlink\",null,\"testEntities\",[],\"tests\",[],\"urlFragmentDefinitions\",[\"^B\",[]],\"version\",\"3.107.0\"]]]"},"changesRecord":[{"type":"MIGRATIONS_UP_TO_DATE","payload":{"migratedAppTemplate":{"tests":[],"folders":[],"plugins":{"$main":{"id":"$main","type":"frame","uuid":null,"style":{},"folder":"","screen":null,"subtype":"Frame","tabIndex":null,"template":{"type":"main","sticky":null,"padding":"8px 12px","enableFullBleed":false,"isHiddenOnMobile":false,"isHiddenOnDesktop":false},"container":"","createdAt":"2024-10-22T13:35:58.495Z","namespace":null,"position2":null,"updatedAt":"2024-10-22T13:35:58.495Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"html1":{"id":"html1","type":"widget","uuid":"6c2d09fc-8a1a-45c8-a297-78c35e846209","style":{},"folder":"","screen":null,"subtype":"HTMLWidget","tabIndex":null,"template":{"css":".myClass {\n  text-align: center;\n}","html":"<!-- Manually include PDF.js library and worker directly in the HTML component -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js\"></script>\n<script>\n  // Set worker source manually as well\n  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';\n\n  // Test if PDF.js is loaded\n  console.log(\"PDF.js Library Loaded:\", typeof pdfjsLib);\n\n  // Define the PDF URL\n  const pdfUrl = \"https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf\";\n\n  // Load and render the PDF document\n  const loadingTask = pdfjsLib.getDocument(pdfUrl);\n  loadingTask.promise.then(function(pdf) {\n    // Load the first page\n    pdf.getPage(1).then(function(page) {\n      const scale = 1.5;\n      const viewport = page.getViewport({ scale: scale });\n\n      // Set up the canvas and its context\n      const canvas = document.getElementById('pdfCanvas');\n      const context = canvas.getContext('2d');\n      canvas.width = viewport.width;\n      canvas.height = viewport.height;\n\n      // Render the page\n      const renderContext = {\n        canvasContext: context,\n        viewport: viewport\n      };\n      const renderTask = page.render(renderContext);\n\n      // Log when rendering is finished\n      renderTask.promise.then(function() {\n        console.log('Page rendered');\n      });\n    });\n  }).catch(function(error) {\n    console.error('Error loading PDF:', error);\n  });\n</script>\n\n<!-- Add a canvas to render the PDF -->\n<canvas id=\"pdfCanvas\" style=\"border: 1px solid black;\"></canvas>","events":{},"hidden":false,"margin":"4px 8px","clickable":false,"tooltipText":"","showInEditor":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2024-10-22T13:35:58.492Z","namespace":null,"position2":{"col":1,"row":3.8,"type":"grid","width":6,"height":0.2,"tabNum":0,"rowGroup":"body","container":"","subcontainer":"","stackPosition":null},"updatedAt":"2024-10-22T13:36:06.562Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"html2":{"id":"html2","type":"widget","uuid":"14658651-ce78-4b6e-a959-d05ccd839d52","style":{},"folder":"","screen":null,"subtype":"HTMLWidget","tabIndex":null,"template":{"css":".myClass {\n  text-align: center;\n}","html":"<script>\n  // Fetch the PDF.js library dynamically\n  fetch('https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js')\n    .then(response => response.text())\n    .then(text => {\n      // Create a script tag with the fetched library code\n      const script = document.createElement('script');\n      script.text = text;\n      document.head.appendChild(script);\n\n      // After PDF.js is loaded, set the worker source\n      script.onload = function() {\n        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';\n        console.log(\"PDF.js dynamically loaded:\", typeof pdfjsLib);\n\n        // Now proceed to load the PDF document\n        const pdfUrl = \"https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf\";\n        const loadingTask = pdfjsLib.getDocument(pdfUrl);\n\n        loadingTask.promise.then(function(pdf) {\n          // Load and render the first page\n          pdf.getPage(1).then(function(page) {\n            const scale = 1.5;\n            const viewport = page.getViewport({ scale: scale });\n\n            const canvas = document.getElementById('pdfCanvas');\n            const context = canvas.getContext('2d');\n            canvas.width = viewport.width;\n            canvas.height = viewport.height;\n\n            const renderContext = {\n              canvasContext: context,\n              viewport: viewport\n            };\n            const renderTask = page.render(renderContext);\n\n            renderTask.promise.then(function() {\n              console.log(\"Page rendered\");\n            });\n          });\n        });\n      };\n    }).catch(err => console.error(\"Error loading PDF.js:\", err));\n</script>\n\n<!-- Canvas for PDF rendering -->\n<canvas id=\"pdfCanvas\" style=\"border: 1px solid black;\"></canvas>\n","events":{},"hidden":false,"margin":"4px 8px","clickable":false,"tooltipText":"","showInEditor":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2024-10-22T13:36:45.069Z","namespace":null,"position2":{"col":1,"row":10.8,"type":"grid","width":3,"height":0.2,"tabNum":0,"rowGroup":"body","container":"","subcontainer":"","stackPosition":null},"updatedAt":"2024-10-22T13:36:47.029Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null}},"version":"3.107.0","appStyles":"","createdAt":null,"isFormApp":false,"shortlink":null,"appTesting":null,"appThemeId":null,"isFetching":false,"rootScreen":null,"appMaxWidth":"100%","isMobileApp":false,"appThemeName":null,"savePlatform":"web","testEntities":[],"appThemeModeId":null,"isGlobalWidget":false,"customShortcuts":[],"formAppSettings":{"customRedirectUrl":""},"pageCodeFolders":{},"mobileAppSettings":{"displaySetting":{"tabletMode":false,"landscapeMode":false},"mobileOfflineModeEnabled":false,"mobileOfflineModeDelaySync":false,"mobileOfflineModeBannerMode":"default"},"customDocumentTitle":"","preloadedAppJSLinks":["https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js","https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js"],"experimentalFeatures":{"disableMultiplayerEditing":false,"multiplayerEditingEnabled":false,"sourceControlTemplateDehydration":false},"markdownLinkBehavior":"auto","multiScreenMobileApp":false,"notificationsSettings":{"globalToastPosition":"bottomRight","globalQueryToastDuration":4.5,"globalQueryShowFailureToast":true,"globalQueryShowSuccessToast":false},"queryStatusVisibility":false,"instrumentationEnabled":false,"pageLoadValueOverrides":[],"preloadedAppJavaScript":null,"urlFragmentDefinitions":[],"responsiveLayoutDisabled":false,"inAppRetoolPillAppearance":"NO_OVERRIDE","loadingIndicatorsDisabled":false,"customComponentCollections":[],"customDocumentTitleEnabled":false,"experimentalDataTabEnabled":true,"internationalizationSettings":{"internationalizationFiles":[],"internationalizationEnabled":false}}}},{"type":"MIGRATIONS_UP_TO_DATE","payload":{"migratedAppTemplate":{"tests":[],"folders":[],"plugins":{"$main":{"id":"$main","type":"frame","uuid":null,"style":{},"folder":"","screen":null,"subtype":"Frame","tabIndex":null,"template":{"type":"main","sticky":null,"padding":"8px 12px","enableFullBleed":false,"isHiddenOnMobile":false,"isHiddenOnDesktop":false},"container":"","createdAt":"2024-10-22T13:35:58.495Z","namespace":null,"position2":null,"updatedAt":"2024-10-22T13:35:58.495Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"html1":{"id":"html1","type":"widget","uuid":"6c2d09fc-8a1a-45c8-a297-78c35e846209","style":{},"folder":"","screen":null,"subtype":"HTMLWidget","tabIndex":null,"template":{"css":".myClass {\n  text-align: center;\n}","html":"<!-- Manually include PDF.js library and worker directly in the HTML component -->\n<script src=\"https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js\"></script>\n<script>\n  // Set worker source manually as well\n  pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';\n\n  // Test if PDF.js is loaded\n  console.log(\"PDF.js Library Loaded:\", typeof pdfjsLib);\n\n  // Define the PDF URL\n  const pdfUrl = \"https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf\";\n\n  // Load and render the PDF document\n  const loadingTask = pdfjsLib.getDocument(pdfUrl);\n  loadingTask.promise.then(function(pdf) {\n    // Load the first page\n    pdf.getPage(1).then(function(page) {\n      const scale = 1.5;\n      const viewport = page.getViewport({ scale: scale });\n\n      // Set up the canvas and its context\n      const canvas = document.getElementById('pdfCanvas');\n      const context = canvas.getContext('2d');\n      canvas.width = viewport.width;\n      canvas.height = viewport.height;\n\n      // Render the page\n      const renderContext = {\n        canvasContext: context,\n        viewport: viewport\n      };\n      const renderTask = page.render(renderContext);\n\n      // Log when rendering is finished\n      renderTask.promise.then(function() {\n        console.log('Page rendered');\n      });\n    });\n  }).catch(function(error) {\n    console.error('Error loading PDF:', error);\n  });\n</script>\n\n<!-- Add a canvas to render the PDF -->\n<canvas id=\"pdfCanvas\" style=\"border: 1px solid black;\"></canvas>","events":{},"hidden":false,"margin":"4px 8px","clickable":false,"tooltipText":"","showInEditor":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2024-10-22T13:35:58.492Z","namespace":null,"position2":{"col":1,"row":3.8,"type":"grid","width":6,"height":0.2,"tabNum":0,"rowGroup":"body","container":"","subcontainer":"","stackPosition":null},"updatedAt":"2024-10-22T13:36:06.562Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null},"html2":{"id":"html2","type":"widget","uuid":"14658651-ce78-4b6e-a959-d05ccd839d52","style":{},"folder":"","screen":null,"subtype":"HTMLWidget","tabIndex":null,"template":{"css":".myClass {\n  text-align: center;\n}","html":"<script>\n  // Fetch the PDF.js library dynamically\n  fetch('https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js')\n    .then(response => response.text())\n    .then(text => {\n      // Create a script tag with the fetched library code\n      const script = document.createElement('script');\n      script.text = text;\n      document.head.appendChild(script);\n\n      // After PDF.js is loaded, set the worker source\n      script.onload = function() {\n        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';\n        console.log(\"PDF.js dynamically loaded:\", typeof pdfjsLib);\n\n        // Now proceed to load the PDF document\n        const pdfUrl = \"https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf\";\n        const loadingTask = pdfjsLib.getDocument(pdfUrl);\n\n        loadingTask.promise.then(function(pdf) {\n          // Load and render the first page\n          pdf.getPage(1).then(function(page) {\n            const scale = 1.5;\n            const viewport = page.getViewport({ scale: scale });\n\n            const canvas = document.getElementById('pdfCanvas');\n            const context = canvas.getContext('2d');\n            canvas.width = viewport.width;\n            canvas.height = viewport.height;\n\n            const renderContext = {\n              canvasContext: context,\n              viewport: viewport\n            };\n            const renderTask = page.render(renderContext);\n\n            renderTask.promise.then(function() {\n              console.log(\"Page rendered\");\n            });\n          });\n        });\n      };\n    }).catch(err => console.error(\"Error loading PDF.js:\", err));\n</script>\n\n<!-- Canvas for PDF rendering -->\n<canvas id=\"pdfCanvas\" style=\"border: 1px solid black;\"></canvas>\n","events":{},"hidden":false,"margin":"4px 8px","clickable":false,"tooltipText":"","showInEditor":false,"maintainSpaceWhenHidden":false},"container":"","createdAt":"2024-10-22T13:36:45.069Z","namespace":null,"position2":{"col":1,"row":10.8,"type":"grid","width":3,"height":0.2,"tabNum":0,"rowGroup":"body","container":"","subcontainer":"","stackPosition":null},"updatedAt":"2024-10-22T13:36:47.029Z","resourceName":null,"mobilePosition2":null,"mobileAppPosition":null,"resourceDisplayName":null}},"version":"3.107.0","appStyles":"","createdAt":null,"isFormApp":false,"shortlink":null,"appTesting":null,"appThemeId":null,"isFetching":false,"rootScreen":null,"appMaxWidth":"100%","isMobileApp":false,"appThemeName":null,"savePlatform":"web","testEntities":[],"appThemeModeId":null,"isGlobalWidget":false,"customShortcuts":[],"formAppSettings":{"customRedirectUrl":""},"pageCodeFolders":{},"mobileAppSettings":{"displaySetting":{"tabletMode":false,"landscapeMode":false},"mobileOfflineModeEnabled":false,"mobileOfflineModeDelaySync":false,"mobileOfflineModeBannerMode":"default"},"customDocumentTitle":"","preloadedAppJSLinks":["https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js","https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js"],"experimentalFeatures":{"disableMultiplayerEditing":false,"multiplayerEditingEnabled":false,"sourceControlTemplateDehydration":false},"markdownLinkBehavior":"auto","multiScreenMobileApp":false,"notificationsSettings":{"globalToastPosition":"bottomRight","globalQueryToastDuration":4.5,"globalQueryShowFailureToast":true,"globalQueryShowSuccessToast":false},"queryStatusVisibility":false,"instrumentationEnabled":false,"pageLoadValueOverrides":[],"preloadedAppJavaScript":null,"urlFragmentDefinitions":[],"responsiveLayoutDisabled":false,"inAppRetoolPillAppearance":"NO_OVERRIDE","loadingIndicatorsDisabled":false,"customComponentCollections":[],"customDocumentTitleEnabled":false,"experimentalDataTabEnabled":true,"internationalizationSettings":{"internationalizationFiles":[],"internationalizationEnabled":false}}}},{"type":"WIDGET_REPOSITION2","payload":{"moves":[{"move":{"col":0,"row":-14,"width":0,"height":0,"rowGroup":"body","container":"","subcontainer":""},"screen":{"descendentIds":[]},"moveType":"drag","widgetIds":["html1"],"widgetTypes":["HTMLWidget"]}],"largeScreen":true},"hideChangelogEntry":false}],"gitSha":null,"checksum":null,"createdAt":"2024-10-22T13:37:57.430Z","updatedAt":"2024-10-22T13:37:57.430Z","pageId":3554764,"userId":620620},"modules":{}}```

AbbeyHernandez · October 28, 2024, 10:10pm

Hi @ijs0

I'll do some testing to try your configuration. In the meantime we actually have a walk-through that might help unblock you while I dig into this!

julius_jet · October 29, 2024, 10:27pm

I think ijs0 wanted to render pdfs. That link is for extracting data from pdfs.

ZeroCodez · October 30, 2024, 6:17am

Hi @ijs0,

The HTML component does not allow JavaScript code within it. You will need to either use the deprecated custom component or create your own custom component.