How to Convert PDF to PNG with JavaScript in NodeJS

Why Convert PDF to PNG with JavaScript?

The pdfRest PDF to Images API Tool allows developers to convert PDF documents into image files, such as PNG, with ease. This tutorial will show you how to send an API call to the PDF to Images endpoint using JavaScript. By leveraging this API, you can automate the conversion process, integrate it into your web applications, and handle PDF files programmatically.

Imagine you are developing a web application that allows users to upload PDF documents and view them as images. This is particularly useful for applications where users need to preview documents before downloading or for creating image thumbnails of PDF pages. The PDF to Images API can streamline this process, making it efficient and user-friendly.

PDF to PNG with JavaScript Code Example

// This request demonstrates how to convert a PDF into PNG image files, one per PDF page.
var axios = require('axios');
var FormData = require('form-data');
var fs = require('fs');

// Create a new form data instance and append the file and parameters to it
var data = new FormData();
data.append('file', fs.createReadStream('/path/to/file')); 
data.append('pages', '1-last');
data.append('resolution', '300');
data.append('color_model', 'rgb');
data.append('output', 'pdfrest_png');

// define configuration options for axios request
var config = {
  method: 'post',
  maxBodyLength: Infinity, // set maximum length of the request body
  url: 'https://api.pdfrest.com/png', 
  headers: { 
    'Api-Key': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', // Replace with your API key
    ...data.getHeaders() // set headers for the request
  },
  data : data // set the data to be sent with the request
};

// send request and handle response or error
axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error); 
});


// If you would like to download the file instead of getting the JSON response, please see the 'get-resource-id-endpoint.js' sample.

Source: GitHub

Breaking Down the Code

Let's break down the code into smaller parts to understand how it works:

var axios = require('axios');
var FormData = require('form-data');
var fs = require('fs');

Here, we are importing the necessary modules: axios for making HTTP requests, form-data for handling multipart form data, and fs for file system operations.

var data = new FormData();
data.append('file', fs.createReadStream('/path/to/file')); 
data.append('pages', '1-last');
data.append('resolution', '300');
data.append('color_model', 'rgb');
data.append('output', 'pdfrest_png');

We create a new instance of FormData and append the necessary fields:

• file: The PDF file to be converted, read as a stream.
• pages: Specifies which pages to convert, in this case, all pages from 1 to the last.
• resolution: The resolution of the output images, set to 300 DPI.
• color_model: The color model for the output images, set to RGB.
• output: The desired output format, specified as pdfrest_png.

var config = {
  method: 'post',
  maxBodyLength: Infinity,
  url: 'https://api.pdfrest.com/png', 
  headers: { 
    'Api-Key': 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', 
    ...data.getHeaders() 
  },
  data : data 
};

We define the configuration options for the axios request:

• method: The HTTP method, set to post.
• maxBodyLength: Sets the maximum length of the request body to infinity.
• url: The endpoint URL for the PDF to Images API.
• headers: Includes the API key and headers from the FormData instance.
• data: The form data to be sent with the request.

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error); 
});

We send the request using axios and handle the response or any errors. The response data is logged to the console.

Beyond the Tutorial

In this tutorial, we demonstrated how to use JavaScript to call the pdfRest PDF to Images API and convert a PDF document into PNG images. This example can be extended to handle various other functionalities provided by pdfRest.

We encourage you to explore all the pdfRest API Tools in the API Lab. For more detailed information, refer to the API Reference Guide.

Note: This is an example of a multipart API call. Code samples using JSON payloads can be found at GitHub.