Display PDF Files with Lightning Web Components
Did you ever wanted to see an uploaded PDF file on Salesforce on a lightning page? The recent release of the Salesforce Lightning Web Components enables you to upgrade your Salesforce fix so that it supports the latest Web Viewer. It ensures that you enjoy better rendering accuracy and get access to the newer and better web features, like the salesforce pdf generation app.
If you want to plugin a professional MS Office and PDF Viewer into your Salesforce, then you should keep on reading. This article will reveal the deeper secrets of Salesforce and will show you the tricks of adding PDF Tron WebVIewer to Salesforce as the Salesforce Lightning Web Component.
To start the journey, you have to clone the sample Lightning web Component project from the Github. You should also download the web viewer.
Setting Up Salesforce DX
In the next step, you have to set up the Salesforce DX for your organization. You can do that but signing it up for a Dev Hub trial or through your existing Salesforce Dev Hub. You should check and follow the instructions available in the Salesforce DX set up guide to get started.
Optimize the Web Viewer Source Code
Now you have to optimize the salesforce pdf generation app web viewer code for Salesforce. Extract the webviewr.zip from your earlier downloads to make this work. Once done, run the NPM script.
After you get the prompts, always answer with ‘Y’ when you are asked whether you need to deploy it to Salesforce. Once you do that, the script will get optimized, and it will zip the source code that you will need in the future. The zip file that you will get from this should be small enough to be uploaded to your Salesforce.
Installing the Sample LWC App
The following steps will help you to configure and clone the samples of web viewer-Salesforce project.
- First of all, go to the Github repo and clone the web viewer-Salesforce.
- Copy all the zip files which generate by running the npm optimizing scripts from the output folder.
- Add the license key of Webviewer in the web viewer constructor.
- Otherwise, authenticate your hug org and offer it with an alias from your cmd or terminal.
- Put in your Dev Hub Org credential into the browser that pops. Type the word dev hub in the search bar and toggle it enabled.
- Using config/project-scratch-def.json, just create a scratch org and set the user name. You can also assign an alias to it by replacing the my-scratch-org.
- Just need to push the app to the scratch org and open it.
- A browser will pop open. You need to select the app launcher icon and then click on the PDF Butler App on Salesforce.
Key Factors You Should Remember
You should use the setup to change the default attitude of PDF file URLs in salesforce. If you don’t do that, when a user goes to the file via an URL, the default action will be to download the file. You can further customize the file according to your requirements.
Now that you know the steps of displaying the salesforce pdf generation app with Lightning web component, it’ time for you to experiment yourself. Start coding and have fun.