This tutorial and the sample source code elaborate the process of generating a PDF file from a web URL using PDF.co web APIs in JavaScript (Node js). Users can use this web API to store critical information available on the web pages on their local storage or the cloud in PDF files.
- Features of PDF from the URL Endpoint
- Endpoint Parameters
- How to Inject Printing Values into the Header and Footer
- An Example Using Javascript
- Source Code
- Output Document
- Sample Header and Footer
- Code Snippet
- Code Screenshots
- Full Demonstration
- Note
Features of PDF from the URL Endpoint
Users can use this PDF from the URL endpoint of PDF.co web API to generate PDF files from the web URL or link to HTML pages. This endpoint takes the URL link and other optional parameters to generate an output link to a PDF file. Moreover, the users can set the header and footer of the PDF files of their choice. Finally, the users can choose to download the file using various filing modules to store them on local storage.
Endpoint Parameters
Following are the parameters of PDF from the URL endpoint:
1. url
It is a required parameter: a string containing the web URL or the HTML file that the user wants to convert. Users can also provide links to their other files hosted on online storage systems such as Google Drive, Dropbox, and PDF.co cloud storage.
2. async
It is an optional parameter that the users can set to “true” to run it asynchronously. Users may encounter the error “405” if they try to process large documents synchronously. Therefore, they must set it to “true” to convert those documents or web pages or specify the page range.
3. name
It is an optional parameter, a string containing the name of the output file. It is set to “result.pdf” by default.
4. expiration
It is an optional parameter defining the output file’s link expiration in minutes. It is set to 60 minutes by default, and the users can set it to different periods depending on their subscription plan. The files get automatically deleted from the cloud after this period. However, the users can permanently store them using the pdf.co built-in files storage system.
5. margins
It is an optional parameter containing the margins of the output PDF file. The users can set the margins as they do in CSS styling. For example, they can write “2px, 2px, 2px, 2px” to adjust the top, right, bottom, and left margins.
6. paperSize
It is an optional parameter to set the paper size of the output file. It is set to “Letter” by default. However, users can set it to “Letter”, “Legal”, “Tabloid”, “Ledger”, “A0”, “A1”, “A2”, “A3”, “A4”, “A5”, “A6” or any custom size. The custom sizes can be in px (pixels), mm (millimeters), or in (inches). For instance, 100px, 200px to set width and height respectively.
7. orientation
It is an optional parameter to define the orientation of the output file’s pages. The users can set it to “Landscape” or “Portrait”, which is the default setting.
8. printBackground
It is an optional parameter to disable or enable the background printing. It is set to “true” by default.
9. DoNotWaitFullLoad
To manage the total conversion time, this optional parameter explicitly controls whether to wait or skip the wait for a full load, such as in the cases of large images and videos. It is set to “false” by default.
10. profiles
It is a string that allows the users to set custom configurations. This is another optional parameter.
11. header
It is an optional parameter to set the header of the output PDF file (every page of the file). The users can use HTML elements to design the header.
12. footer
It is an optional parameter to set the footer of the output PDF file (every page of the file). This parameter accepts HTML to apply at the end of the pages.
Note: The upper and lower margins are important while setting the footer and header of the page, because they may overlap with the page content, thus, making it unreadable.
How to Inject Printing Values into the Header and Footer
The users can use the following classes to inject the printing values into the header and footer:
1. date
This class prints the formatted date
2. title
This class prints the document title.
3. url
This class prints the document location.
4. pageNumber
This class prints the current pageNumber of the document.
5. totalPages
This class prints the total pages in the document.
Note: You can read more about the classes and see examples here.
An Example Using Javascript
The following source code explains to users how to generate PDF files from a web URL using PDF.co web API. This code takes the website URL of Wikipedia’s main page and converts it to a PDF file. Moreover, the parameter “DoNotWaitFullLoad” is set to “true” to reduce the time; the API needs to convert the whole website page to a PDF file.
Finally, the users can see the output URL in their terminal and use that link to see the resulting file. They may also opt to use the Javascript file stream module to download the file contents and store them on local storage as a PDF file.
Source Code
Below is the sample code to generate PDF from a URL:
var request = require('request'); var API_KEY = '******************************' var options = { 'method': 'POST', 'url': 'https://api.pdf.co/v1/pdf/convert/from/url', 'headers': { 'x-api-key': API_KEY }, formData: { 'url': 'https://en.wikipedia.org/wiki/Main_Page', 'name': 'result.pdf', 'DoNotWaitFullLoad': 'true', } }; request(options, function (error, response) { if (error) throw new Error(error); console.log(response.body) });
Output Document
Below are the screenshots of the code output and the output file obtained in the API response:
Sample Header and Footer
Below is the source code containing the header and footer parameters in addition to the above parameters. These HTML codes set the header to write the “left subheader” and “right subheader” at the top left and top right sections of every page respectively.
Similarly, the footer code utilizes the classes “pageNumber” and “totalPages” to write “page N of NN” at the bottom right of each page. Moreover, the users can see from the coding example and the screenshot that they can style these spans and divs as they do in writing regular HTML
Code Snippet
var request = require('request'); var API_KEY = '******************' var options = { 'method': 'POST', 'url': 'https://api.pdf.co/v1/pdf/convert/from/url', 'headers': { 'x-api-key': API_KEY }, formData: { 'url': 'https://en.wikipedia.org/wiki/Main_Page', 'name': 'result.pdf', 'DoNotWaitFullLoad': 'true', "header": "<div style='width:100%'><span style='font-size:10px;margin-left:20px;width:50%;float:left'>LEFT SUBHEADER</span><span style='font-size:8px;width:30%;float:right'>RIGHT SUBHEADER</span></div>", "footer": "<div style='width:100%;text-align:right'><span style='font-size:10px;margin-right:20px'>Page <span class='pageNumber'></span> of <span class='totalPages'></span>.</span></div>" } }; request(options, function (error, response) { if (error) throw new Error(error); console.log(response.body) });
Code Screenshots
Below are the screenshots of the code output and the output file obtained in the API response:
Full Demonstration
Below is the gif to demonstrate the working of the code:
Note
The users can find the advanced example with the file downloading functions here.
The PDF.co Web API can help you do a lot more in terms of generating PDFs from other file forms, not just from URLs. It includes:
- Generating PDFs with QR codes from HTML templates;
- Generating PDFs from email using JavaScript;
- Generating PDFs by merging different file formats;
- And, many others.