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

2
  • Did you every resolve this issue @vikrantkumar?
    – Coogle
    Nov 9, 2020 at 16:47
  • @vikrantkumar Have you resolve this issue ? May 20, 2021 at 6:57

1 Answer 1

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.
    – Coogle
    Nov 6, 2020 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.