JavaScript

This is an experimental feature and script tags may change in the future. However, please give it a try and feel free to provide feedback.

PDF supports JavaScript for various purposes, such as form validation. However, please note that typeset.sh itself does not parse JavaScript like a browser would. Instead, scripts are attached to the PDF and executed by the client's PDF viewer application.

Not all viewer support all futures and events.

To include <script> tags, the data-pdf attribute must be present. This precaution is taken to avoid including any scripts by default.

PDF supports document event handlers that can be subscribed to by adding the attribute data-on="EventType". The following event types are available:

WillClose
WillSave
DidSave
WillPrint
DidPrint

Ohter ineraction events (onclick, onmousedown, etc.) only work on form fields.

Simple JavaScript Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript.html</title>
    <style>
        @page {
            size: A4;
            margin: 10mm;
        }
    </style>
    <script type="text/javascript" data-pdf>
        var counter = 0;
        function test(event) {
            app.alert((++counter) + " Hello from "+app.viewerType+" by clicking "+event.target.name);
        }

        function validate() {
            app.alert("Email: " + this.getField("email").value);
        }
    </script>

    <script type="text/javascript" data-pdf data-on="didSave">
        app.alert("Saving complete");
    </script>

</head>
<body>
    <div>
        <input type="checkbox" name="foo" value="1" onclick="test(event)" />

        <input type="radio" name="bar" value="1" onclick="test(event)" checked />
        <input type="radio" name="bar" value="2" onclick="test(event)" />

        <input type="text" 
               name="email" 
               onmouseenter="console.println('email onmouseenter')"
               onmousedown="console.println('email onmousedown')"
               onmouseleave="console.println('email onmouseleave')"
               onmouseover="console.println('email onmouseover')"
               onmouseup="console.println('email onmouseup')"
               onfocus="console.println('email onfocus')"
               onblur="console.println('email onblur')"
               onkeystroke="console.println('email onkeystroke')"
               onvalidate="console.println('email onvalidate')"
               oncalculate="console.println('email oncalculate')"
               value="[email protected]" />
    </div>
    <div>
        <button onclick="validate()">Validate</button>
    </div>
</body>
</html>

More information can be found here: https://opensource.adobe.com/dc-acrobat-sdk-docs/acrobatsdk/pdfs/acrobatsdk_jsapiref.pdf

PreviousColor profiles NextCommon Object/Classes

Last updated 2 years ago

hashtagSimple JavaScript Example

Simple JavaScript Example