How can I use pdfjs-dist with Velo?

Ask the community
, ,
1

I would like to render pdfs that are stored in a document collection. I have installed pdfjs-dist and require. In the following example I make an attempt to call getDocument from the pdfjsLib with a base64 encoded pdf taken from this example.

var pdflib = require('pdfjs-dist/build/pdf.js');
pdflib.GlobalWorkerOptions.workerSrc = "pdfjs-dist/build/pdf.worker.js";

var pdfData = atob(
  'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
  'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
  'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
  'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
  'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
  'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
  'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
  'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
  'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
  'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
  'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
  'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
  'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');

pdfjsLib.getDocument({data: pdfData}).promise.then(pdfDoc_ => {
    pdfDoc = pdfDoc_;
    console.log("inside getDocument", pdfDoc);
});

Which results in the following error:

Uncaught (in promise) Error: Setting up fake worker failed: "Cannot load script at: https://static.parastorage.com/services/wix-ui-santa/1.1515.0/assets/CustomElement/pdfjs-dist/build/pdf.worker.js".
    _setupFakeWorker pdf.js:3008
pdf.js:3008

I also tried to set the GlobalWorkerOptions.port:

var pdflib = require('pdfjs-dist/build/pdf.js');
var pdfjsWorker = require('pdfjs-dist/build/pdf.worker.entry.js');
pdflib.GlobalWorkerOptions.workerPort = pdfjsWorker;

var pdfData = atob(
  'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
  'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
  'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
  'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
  'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
  'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
  'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
  'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
  'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
  'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
  'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
  'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
  'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');

pdfjsLib.getDocument({data: pdfData}).promise.then(pdfDoc_ => {
    pdfDoc = pdfDoc_;
    console.log("inside getDocument", pdfDoc);
});

Which resulted in:

Uncaught TypeError: comObj.addEventListener is not a function
    MessageHandler pdf.js:6902
pdf.js:6902

Ideally I would import the pdfjs-dist/webpack module, but that depends on the worker-loader package which is not available in Velo. I am guessing that there is a way to load the pdfjs-dist though, since it was approved. My assumption is that someone tested it out.

2

Another way to initialize the pdfjslib is by setting the GlobalWorkerOptions.workerSrc path to the pdf.worker.js file.

var pdflib = require('pdfjs-dist/build/pdf');
pdflib.GlobalWorkerOptions.workerSrc = '/node_modules/pdfjs-dist/build/pdf.worker.js';

I don’t think that Wix gives us access to this path though. The closest I could find was webpack://document-viewer/npm-path//WC_BEGIN/pdfjs-dist/2.5.207/WC_END/pdfjs-dist/build/pdf.js’, but trying to load that script raises a security error. If anyone knows of a way to initialize pdf-dist.js on wix I would greatly appreciate your guidance.

3

Would be great to solve this, having same issue

4

Would be great to solve this, having same issue