AnswerBun.com

I can't load PDF.js lib in Lightning Web Component

Salesforce Asked by Alef Ribeiro on January 2, 2022

I’m creating an lwc component that shows a pdf with canvas, the lib I’m using is this:PDF,js
when trying to load lib, returns me an undefined error, can someone help me how to load correctly

enter image description here
enter image description here

My Html

<template>
<lightning-card>
    <div class="container">
        <canvas id="the-canvas" class="canvas" lwc:dom="manual"></canvas>
    </div>
</lightning-card>    
</template>

My Js

import { LightningElement } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { loadScript } from 'lightning/platformResourceLoader';
import PdfViewerJs from '@salesforce/resourceUrl/pdfViewer';

export default class compC21Body extends LightningElement {

 renderedCallback() {
    const jsPath = PdfViewerJs + '/pdf.js';
    window.console.log(jsPath);

    loadScript(this, jsPath).then(() => {
        window.console.log('success');
    }).catch(error => {
        window.console.log(error);
        this.dispatchEvent(
            new ShowToastEvent({
                title: 'Error Pdf Viewer',
                message: error ? error.message : 'We get error to load some script :/',
                variant: 'error',
            }),
        );
    });
  }
}

I put the lib build folder inside the statistic feature in salesforce
Inside the static resource folder we have the files

  • pdf.js
  • pdf.js.map
  • pdf.worker.js
  • pdf.worker.js.map

if you have any library suggestions, I just need it to use canvas and not iframe

error update
enter image description here
SecureElement does not allow access to charset

enter image description here
Failed to load script at /resource/1573759295000/pdfViewer/pdf.js: regeneratorRuntime is not defined [regeneratorRuntime is not defined]

One Answer

Try uploading just the pdf js file in a separate static resource and pdf worker js in a separate static resource and load pdf js first and worker js next.

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 PdfPoc extends LightningElement {
    scale = 1;
    connectedCallback(){
        Promise.all([loadScript(this, PDFJS), loadScript(this, PDFWORKER )]).then(()=>{
            console.log('PDF JS loaded');
            pdfjsLib.GlobalWorkerOptions.workerSrc = PDFWORKER;
            this.paintCanvas();
        }).catch((error)=>{
            console.log(' Error loading scripts '+ error);
        })
    }

Answered by Manjunatha V P on January 2, 2022

Add your own answers!

Related Questions

Email images not displaying ONLY in Outlook Desktop

0  Asked on December 30, 2020 by curious-blueprints

     

How treat columns with colons in SQL

1  Asked on December 30, 2020 by greg-beazley

   

Why some classes cannot be constructed?

1  Asked on December 27, 2020 by andrii-pytel

     

Test Class not working (Case/Event)

0  Asked on December 27, 2020 by marvv

       

Find Parent Event of Child Event

2  Asked on December 27, 2020 by abhinav-gupta

 

Field output order when conver object to JSON

3  Asked on December 27, 2020 by ling

 

Unpackage an unlocked package

0  Asked on December 26, 2020 by an-le

   

Changing a multi-select picklist to a single select

0  Asked on December 24, 2020 by user88750

 

Ask a Question

Get help from others!

© 2023 AnswerBun.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP