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);
});
}
}