Skip to main content

Hi, Community 

I need to preview PDF file in LWC as I have the Version data in LWC js and I need to preview the PDF on the button Click Show Pdf

 

 template> 

<lightning-card title="PDF Previewer" icon-name="doctype:pdf">

 <template if:true={pdfData}> <!-- Display PDF preview --> <iframe src= {pdfData} width="100%" height ="100%" frameborder="0"></iframe> <!-- Button to download PDF --> 

<lightning-button label="Download PDF" onclick={downloadPdf} class="slds-m-top_medium"></lightning-button> 

</template> 

</lightning-card> 

</template> 

 import { LightningElement, wire, track } from 'lwc'; import getMuleSoftData from '@salesforce/apex/MuleSoftIntegration.getMuleSoftData'; export default class MuleSoftPdfViewer extends LightningElement { @track pdfData; @track error; @wire(getMuleSoftData) handleResult({ error, data }) { if (data) { try { // Assuming data is a base64-encoded string let decodedData = atob(data); let binaryArray = new Uint8Array(decodedData.length); for (let i = 0; i < decodedData.length; i++) { binaryArray[i] = decodedData.charCodeAt(i); } let blob = new Blob([binaryArray], { type: 'application/pdf' }); this.pdfData = URL.createObjectURL(blob); //this.pdfData = atob(data); //this.pdfData = data:application/pdf;base64,${data}; //console.log('this.pdfData '+this.pdfData); } catch (e) { // Handle errors console.error('Error processing PDF data:', e); this.error = 'Error processing PDF data.'; } } else if (error) { // Handle error console.error('Error retrieving PDF data:', error); this.error = 'Error retrieving PDF data.'; } } downloadPdf() { if (this.pdfData) { // Create a link element and trigger the download const link = document.createElement('a'); link.href = this.pdfData; link.download = 'document.pdf'; // Set default file name document.body.appendChild(link); // Append link to the body link.click(); document.body.removeChild(link); // Remove link from the body } else { this.error = 'No PDF data available to download.'; } } } 

 

using this code for this

 

Thank-You in advance

 

@* Salesforce Developers * 

3 个回答
  1. 2025年12月4日 02:35

    hi @Dhiraj Singh - Greytrix Salesforce i tried your solution, unfortunately i hit error because the url that being generated is too long

    org.lightning.force.com/apex/PdfViewer?pdfData=base64Data.........

    and appear like this 

    HTTP ERROR 500 Response Header Fields Too Large

0/9000