Guide to Converting HTML to PDF Using Syncfusion API

18 Nov 20184 minutes to read

With the Syncfusion document processing engine, you can easily convert an HTML template or URL to a PDF document. To convert an HTML template to a PDF document, you need to provide both the HTML template file and its assets.

Convert HTML to PDF

To convert HTML to PDF, send a request to the /v1/conversion/html-to-pdf endpoint, including both the HTML file as input and its assets as follows:

curl --location 'http://localhost:8003/v1/conversion/html-to-pdf' \
--form 'Index.html=@"html/index.html"' \
--form 'logo.png=@"html/logo.png"' \
--form 'font=@"html/SourceSansPro-Regular.ttf"' \
--form 'style=@"html/style.css"' \
--form 'settings="{
  \"IndexFile\": \"index.html\",
  \"Assets\": [\"logo.png\", \"font\",\"style\"]
}"'
const formdata = new FormData();
formdata.append("Index.html", fileInput.files[0], "html/index.html");
formdata.append("logo.png", fileInput.files[0], "html/logo.png");
formdata.append("font", fileInput.files[0], "html/SourceSansPro-Regular.ttf");
formdata.append("style", fileInput.files[0], "html/style.css");
formdata.append("settings", "{\n  \"IndexFile\": \"index.html\",\n  \"Assets\": [\"logo.png\", \"font\",\"style\"]\n}");

const requestOptions = {
  method: "POST",
  body: formdata,
  redirect: "follow"
};

fetch("http://localhost:4000/v1/conversion/html-to-pdf", requestOptions)
  .then((response) => response.text())
  .then((result) => console.log(result))
  .catch((error) => console.error(error));
var client = new HttpClient();
var request = new HttpRequestMessage(HttpMethod.Post, "http://localhost:8003/v1/conversion/html-to-pdf");
var content = new MultipartFormDataContent();
content.Add(new StreamContent(File.OpenRead("html/index.html")), "Index.html", "html/index.html");
content.Add(new StreamContent(File.OpenRead("html/logo.png")), "logo.png", "html/logo.png");
content.Add(new StreamContent(File.OpenRead("html/SourceSansPro-Regular.ttf")), "font", "html/SourceSansPro-Regular.ttf");
content.Add(new StreamContent(File.OpenRead("html/style.css")), "style", "html/style.css");
content.Add(new StringContent("{
  \"IndexFile\": \"index.html\",
  \"Assets\": [\"logo.png\", \"font\",\"style\"]
}"), "settings");
request.Content = content;
var response = await client.SendAsync(request);
response.EnsureSuccessStatusCode();
Console.WriteLine(await response.Content.ReadAsStringAsync());

Once the request is sent, it will create a conversion job to convert HTML to PDF and return the job details as follows:

{
    "jobID": "6be827c5-d86d-4fe5-9bd5-c8fd5887a455",
    "status": "requested",
    "createdAt": "2024-05-06T09:39:13.9505828Z"
}

Poll the status of the Conversion Job

Next, you can retrieve the job status by sending a request to the /v1/conversion/status/{jobID} endpoint with the job ID.

curl --location 'http://localhost:8003/v1/conversion/status/ef0766ab-bc74-456c-8143-782e730a89df' \
const requestOptions = {
  method: "GET",
  redirect: "follow"
};

fetch("http://localhost:4000/v1/conversion/status/4413bbb5-6b26-4c07-9af2-c26cd2c42fe3", requestOptions)
  .then((response) => response.text())
  .then((result) => console.log(result))
  .catch((error) => console.error(error));
var client = new HttpClient();
var request = new HttpRequestMessage(HttpMethod.Get, "http://localhost:8003/v1/conversion/status/ef0766ab-bc74-456c-8143-782e730a89df");
var response = await client.SendAsync(request);
response.EnsureSuccessStatusCode();
Console.WriteLine(await response.Content.ReadAsStringAsync());

You will receive one of the following statuses until the job is completed. Upon completion, you will receive the actual output file.

Job Statuses:

  • Queued:
{
    "jobID": "4b2782b2-9f08-478b-98fc-4464bd219ca0",
    "status": "queued"
}
  • In Progress:
{
    "jobID": "ef0766ab-bc74-456c-8143-782e730a89df",
    "status": "in progress"
}
  • Error:
{
    "jobID": "ef0766ab-bc74-456c-8143-782e730a89df",
    "status": "errror",
    "code": "500",
    "message": "Failed to convert the document to PDF"        
}

NOTE

The Syncfusion Document Processing API is now available as a Docker-based solution. Try it out