How to HTML to PDF in JavaScript & jQuery using Cloud API (low level)

  • Home
  • /
  • Articles
  • /
  • How to HTML to PDF in JavaScript & jQuery using Cloud API (low level)

Use the sample below to learn how to convert HTML to PDF in JavaScript & jQuery using ByteScout Cloud API (low level).

With Cloud API you can also convert PDF to HTML in JavaScript and jQuery.


<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>HTMLToPDF JQuery sample</title>
    <script src=""></script>
    <script src="html_to_pdf.js" type="text/javascript" encoding="UTF-8"></script>

    <form id="form">
            <label>Copy-paste your API Key for Bytescout.IO here</label>
            <input type="text" id="apiKey" placeholder="API Key" />
            <input type="text" name="link" id="inputLink" placeholder="">
            <label>or InputValue (HTML code)</label>
            <textarea id="inputValue"></textarea>
            <input type="number" id="marginLeft">
            <input type="number" id="marginTop">
            <input type="number" id="marginRight">
            <input type="number" id="marginBottom">
        <button type="button" id="submit">Convert</button>

    <div id="errorBlock">
        <h4>Code: <span id="statusCode"></span></h4>
        <ul id="errors"></ul>

    <div id="resultBlock">
        <a id="result" href="" target="_blank"></a>


$(document).ready(function () {

$(document).on("click", "#submit", function () {

    var apiKey = $("#apiKey").val().trim(); //Get your API key by registering at

    var url = "" + apiKey;

    var options = {
        "properties": {
            "orientation": "Landscape",
            "margin": {
                "top": $("#marginTop").val(),
                "bottom": $("#marginBottom").val(),
                "left": $("#marginLeft").val(),
                "right": $("#marginRight").val()
        "inputType": $("#inputLink").val() ? "link" : "value",
        "input": $("#inputLink").val() || $("#inputValue").val(),
        "outputType": "link"

        url: url,
        type: "POST",
        data: JSON.stringify(options),
        contentType: "application/json",
        success: function (response) {
            $("#result").attr("href", response).html(response);
        error: function (response) {
            $.each(response.responseJSON.Errors, function () {