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.

Sample.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>HTMLToPDF JQuery sample</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="html_to_pdf.js" type="text/javascript" encoding="UTF-8"></script>
</head>
<body>

    <form id="form">
        <p>
            <label>Copy-paste your API Key for api.pdf.co here</label>
            <input type="text" id="apiKey" placeholder="API Key" />
        </p>
        <p>
            <label>InputLink</label>
            <input type="text" name="link" id="inputLink" placeholder="https://www.google.com/">
        </p>
        <p>
            <label>or InputValue (HTML code)</label>
            <textarea id="inputValue"></textarea>
        </p>
        <p>
            <label>Margins:</label>
            <label>Left</label>
            <input type="number" id="marginLeft">
            <label>Top</label>
            <input type="number" id="marginTop">
            <label>Right</label>
            <input type="number" id="marginRight">
            <label>Bottom</label>
            <input type="number" id="marginBottom">
        </p>
        <button type="button" id="submit">Convert</button>
    </form>

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

    <div id="resultBlock">
        <h2>Result:</h2>
        <a id="result" href="" target="_blank"></a>
    </div>
</body>
</html>

html_to_pdf.js

$(document).ready(function () {
    $("#resultBlock").hide();
    $("#errorBlock").hide();
});

$(document).on("click", "#submit", function () {
    $("#resultBlock").hide();
    $("#errorBlock").hide();

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

    var url = "https://api.pdf.co/api/v1/htmltopdf/convert?apiKey=" + 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"
    };

    $.ajax({
        url: url,
        type: "POST",
        data: JSON.stringify(options),
        contentType: "application/json",
        success: function (response) {
            $("#resultBlock").show();
            $("#result").attr("href", response).html(response);
        },
        error: function (response) {
            $("#errorBlock").show();
            $("#statusCode").html(response.status);
            $("#errors").html("");
            $.each(response.responseJSON.Errors, function () {
                $("#errors").append($("<li></li>").html(this));
            });
        },
    });
});

Sample.html

html_to_pdf.js

Tutorials:

Web API