Rendering whitepaper data
To post whitepapers to the website, the whitepaper data is defined and prepared on the website to display these documents. First, create a new \data folder at the project root. The information on available whitepapers comes from a new file named data.json, which is put in the data folder.
To give the web app a nice, polished look, install the Bootstrap and Font Awesome front-end libraries.
npm install bootstrap
npm install font-awesome
Open the app.js file and include these directories as sources for static files, placing them after the existing `express.static`
line.
app.use(express.static(path.join(__dirname, '/node_modules/bootstrap/dist')));
app.use(express.static(path.join(__dirname, '/node_modules/font-awesome')));
To include the PDF documents, create a folder named \pdfs under the project’s \public folder. Instead of creating the PDFs and the thumbnails by yourself, you can copy them from this GitHub repository folder to the \pdfs and \image folders.
The \public\pdfs folder now contains the PDF documents:
While the \public\images folder should contain the thumbnails for each of the PDF documents:
Now, open the \routes\index.js file, which contains the logic for routing the home page. To use the whitepaper data from the data.json file, you must load the Node.js module responsible for accessing and interacting with the file system. Then, declare the fs
constant in the first line of the \routes\index.js file, as follows:
const fs = require('fs');
Then, read and parse the data.json file and store them in the papers variable:
let rawdata = fs.readFileSync('data/data.json');
let papers = JSON.parse(rawdata);
Now modify the line to invoke the render method for the index view, passing the papers collection as the model for the index view.
res.render('index', { title: 'Embedding PDF', papers: papers });
To render the collection of whitepapers on the homepage, open the \views\index.ejs file and replace the existing code with the code from your project’s index file.
Now, rerun npm start and open http://localhost:3000 to view your collection of available whitepapers.
In the next sections involve enhancing the website and using PDF Embed API to display the PDF documents the web page. PDF Embed API is free to use — you just need to obtain an API credential.
Getting a PDF Embed API credential
To get a free PDF Embed API credential, visit the Get Started page after signing up for a new account or logging in to your existing account.
Click Create New Credentials and then Get Started:
At this point, you are asked to register for a free account if you don’t have one.
Select PDF Embed API, then type your credentials name and application domain. Use the localhost domain because of testing the web app locally.
Click the Create Credentials button to access your PDF credentials and get the Client ID (API KEY).
In your Node.js project, create a file named .ENV in the application’s root folder and declare the environment variable for your PDF Embed Client ID with the value of the API KEY credential from the previous step.
PDF_EMBED_CLIENT_ID=**********************************************
Later you use this client ID to access PDF Embed API. Install the dotenv package to access this environment variable using Node.js code.
npm install dotenv
Now, open the app.js file and add the following line at the top of the file so Node.js can load the dotenv module:
require('dotenv').config();
Displaying PDFs in the Web App
Now use PDF Embed API to display PDFs on the site. Open the live PDF Embed API Demo.
On the left panel, you can choose the embed mode that best fits your website needs:
-
Full Window: the PDF covers all the web page space
-
Sized Container: the PDF displays inside the webpage, one page at a time, in a div with limited size
-
In-Line: the entire PDF displays in a div inside the webpage
-
Lightbox: the PDF displays as a layer on top of your webpage
It is recommended to use the in-line embed mode for whitepapers and the code generator later to embed a PDF in the application.