Description: This Salesforce LWC component allows you to create an action button on a record that provides the ability to preview a PDF document with save functionality.
Github: https://github.com/brbjr1/LWC-PDF-Reader-with-Save
Deployment instructions:
- Install package
- Production: https://login.salesforce.com/packagingSetupUI/ipLanding.app?apvId=04t6g000006xy8CAAQ
- Sandbox: https://test.salesforce.com/packagingSetupUI/ipLanding.app?apvId=04t6g000006xy8CAAQ
- Create a visualforce page to generate the PDF document.
- Example:
- Name: AccountReport
- Code:
<apex:page standardcontroller="Account"
title="Test Account Report"
lightningstylesheets="false"
renderAs="pdf"
applybodytag="false">
<!--applybodytag="false" is used to make sure that styles are correctly applied to the generated pdf-->
<!--standardcontroller="Account" allows getting data from the account object without writing a class-->
<head>
<style type="text/css">
.rpt * {
padding: 0;
margin: 0;
}
.rpt-page {
font: 9pt 'Open Sans', Arial, sans-serif;
line-height: 1.4em;
}
.rpt-page-header {
overflow: auto;
}
.rpt-page-header .rpt-header {
width: auto;
margin: 0;
}
.rpt-page {
width: 7.4in;
overflow: hidden;
margin: .5in;
}
</style>
</head>
<body>
<div class="rpt">
<div class="rpt-page">
<div class="rpt-header">
My Test Report
</div>
<table>
<tbody>
<tr>
<td>Name:</td>
<td>
<apex:outputText value="{!Account.Name}"/>
</td>
</tr>
<tr>
<td>Create Date:</td>
<td>
<apex:outputText value="{0, date, MM'/'dd'/'yyyy}">
<apex:param value="{!Account.CreatedDate}" />
</apex:outputtext>
</td>
</tr>
</tbody>
</table>
<!--End rpt-page-->
</div>
<!--End rpt-->
</div>
</body>
</apex:page>- Create a Lightning Component (aura component, at the time of this writing quick actions are not possible to create on LWC).
- Open the Salesforce development console and click on File => New => Lightning Component
- Enter a name (this is going to be used by our record action button)
- Check Lightning Record Page and Lightning Quick Action
- Update the Component markup to:
<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId">
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<c:lwcpdfReaderWithSave aura:id="my-viewer" onclose="{!c.handleClose}" showConsoleLogs="false" recordId="{!v.recordId}" />
<aura:attribute name="isLoading" type="Boolean" default="true" />
<aura:if isTrue="{!v.isLoading}">
<div>
<lightning:spinner alternativeText="Loading" size="small" />
</div>
</aura:if>
</aura:component>
- Update the Controller (Modify line “myviewer.doOpen({'documentsaveFormulaField':'','documentsaveName':'Document.pdf','VFReportPageName':'AccountReport','modalTitle':'Account Report'});” for your report)
- Configuration Options:
- documentsaveFormulaField: Used to dynamically create a document name for the saved report. The document name is queried from the record you are generating the report from. This value needs to be the field API name. An example, on the sample account report if you enter Name the saved file name will equal the accounts name with the extension .pdf or using a custom formula field would allow adding dates or other attributues to the name. (enter a blank value to disable)
- documentsaveName: Enter a static name to save the document as. (enter a blank value if using documentsaveFormulaField)
- VFReportPageName: Enter the name of the visualforce page that generates the pdf.
- modalTitle: Enter the name that displays on the top of the preview modal.
({
doInit : function(component, event, helper) {
window.setTimeout(
$A.getCallback(function() {
let myviewer = component.find("my-viewer");
myviewer.doOpen({'documentsaveFormulaField':'','documentsaveName':'Document.pdf','VFReportPageName':'AccountReport','modalTitle':'Account Report'});
component.set("v.isLoading", false);
}), 0
);
},
handleClose : function(component, event, helper) {
$A.get("e.force:closeQuickAction").fire();
}
})
-
Create an action button on the target object and add the button to the target page layout
-
Test