0

I'm trying to display a pdf in Lightning web component and i'm getting the below error in console.Not able to understand the root cause.I'm importing pdf.js and pdf.worker.js files.

  import { LightningElement} from 'lwc';
  import PDFJS from '@salesforce/resourceUrl/pdfJS';
  import PDFWORKER from '@salesforce/resourceUrl/pdfWorker'
  import { loadStyle,  loadScript } from 'lightning/platformResourceLoader';
  
  export default class pDFfilePreviewer extends LightningElement {
    urls = 'https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/examples/learning/helloworld.pdf';
    pdfjsvar;
    connectedCallback() {
      Promise.all([
        loadScript(this, PDFJS),
        loadScript(this, PDFWORKER),
      ]).then(() => {
        console.log('PDF JS loaded');
        pdfjsLib.GlobalWorkerOptions.workerSrc = PDFWORKER;
        this.pdfjsvar = pdfjsLib;
      }).catch((error) => {
        console.log(' Error loading scripts ' + error);
      })
    }
    handleClick(event) {
      this.showPdf(this.pdfjsvar);
    }

    showPdf(pdfjsLib) {
      console.log('PDF JS loaded' + JSON.stringify(pdfjsLib));
      var pdfData = atob(
        'JVBERi0xLjcKCjEgMCBvYmogICUgZW50cnkgcG9pbnQKPDwKICAvVHlwZSAvQ2F0YWxvZwog' +
        'IC9QYWdlcyAyIDAgUgo+PgplbmRvYmoKCjIgMCBvYmoKPDwKICAvVHlwZSAvUGFnZXMKICAv' +
        'TWVkaWFCb3ggWyAwIDAgMjAwIDIwMCBdCiAgL0NvdW50IDEKICAvS2lkcyBbIDMgMCBSIF0K' +
        'Pj4KZW5kb2JqCgozIDAgb2JqCjw8CiAgL1R5cGUgL1BhZ2UKICAvUGFyZW50IDIgMCBSCiAg' +
        'L1Jlc291cmNlcyA8PAogICAgL0ZvbnQgPDwKICAgICAgL0YxIDQgMCBSIAogICAgPj4KICA+' +
        'PgogIC9Db250ZW50cyA1IDAgUgo+PgplbmRvYmoKCjQgMCBvYmoKPDwKICAvVHlwZSAvRm9u' +
        'dAogIC9TdWJ0eXBlIC9UeXBlMQogIC9CYXNlRm9udCAvVGltZXMtUm9tYW4KPj4KZW5kb2Jq' +
        'Cgo1IDAgb2JqICAlIHBhZ2UgY29udGVudAo8PAogIC9MZW5ndGggNDQKPj4Kc3RyZWFtCkJU' +
        'CjcwIDUwIFRECi9GMSAxMiBUZgooSGVsbG8sIHdvcmxkISkgVGoKRVQKZW5kc3RyZWFtCmVu' +
        'ZG9iagoKeHJlZgowIDYKMDAwMDAwMDAwMCA2NTUzNSBmIAowMDAwMDAwMDEwIDAwMDAwIG4g' +
        'CjAwMDAwMDAwNzkgMDAwMDAgbiAKMDAwMDAwMDE3MyAwMDAwMCBuIAowMDAwMDAwMzAxIDAw' +
        'MDAwIG4gCjAwMDAwMDAzODAgMDAwMDAgbiAKdHJhaWxlcgo8PAogIC9TaXplIDYKICAvUm9v' +
        'dCAxIDAgUgo+PgpzdGFydHhyZWYKNDkyCiUlRU9G');
      var loadingTask = pdfjsLib.getDocument({
        data: pdfData
      });
      var canvas = this.template.querySelector('canvas.secondclass');
      var ctx = canvas.getContext('2d');
      loadingTask.promise.then(function(pdf) {
        pdf.getPage(1).then(function(page) {
          var scale = 1.5;
          var viewport = page.getViewport({
            scale: scale
          });
          canvas.height = viewport.height;
          canvas.width = viewport.width;
          var renderContext = {
            canvasContext: ctx,
            viewport: viewport
          };

          page.render(renderContext).then(function() {
            alert("Working");
          });
        });
      }, function(reason) {
        console.error(reason);
      });
    }
  }

enter image description here

1
  • Did you every resolve this issue @vikrantkumar? – Coogie7 Nov 9 '20 at 16:47
0

Workers are not supported in Lightning (see the Locker API Viewer). I see it says that it set up a fake worker, but I suspect that is the source of your problem. Use the normal API instead of the worker API, and that should resolve your problem.

1
  • Could you provide an example of using the "normal API" versus "worker API" for PDF.js in LWC? I'm actually encountering the same issue and stuck. – Coogie7 Nov 6 '20 at 14:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.