Native JavaScript cloud editor
Just a few lines of code to get started. Works with any modern website.
- Add HTML element:
<textarea></textarea> - Include script:
https://api.pantherpdf.com/v1/editor/pantherpdf.min.js - Initialize:
pantherpdf.init({ ... }) - Provide data and authentication.
- Specify
reportSecret - Or
editorKeyand provide report data inside textarea. Initial data can be empty.
- Specify
In case reports are stored on customer's database, you need to provide data to the textarea element. Textarea value will be automatically updated with every change. You can query it at any time and upload data when required. Or you can use HTML form to submit data to your backend.
You can have multiple editors on one page with different options. Call
pantherpdf.init({ ... }) multiple times each time with a different selector.
In case you want to dinamically change report at runtime (e.g. user selects
different report) you need to reinitialize it. First set value of textarea to
new report and then call pantherpdf.init({ ... }) with same selector as the
first time.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://api.pantherpdf.com/v1/editor/pantherpdf.min.js"></script>
<script>
pantherpdf.init({
selector: '#myreport',
//editorKey: 'my-cloud-editor-key',
reportSecret: 'my-report-secret',
});
</script>
<style>
#myreport-pantherpdf {
width: 100%;
}
</style>
</head>
<body>
<form method="post">
<textarea id="myreport"></textarea>
</form>
</body>
</html>
pantherpdf.init() attributes:
| Parameter | Is required? | Description |
|---|---|---|
selector |
Yes | Selector for <textarea>. |
reportSecret |
Yes when data is managed by PantherPDF managed service. | Access token for a report. |
editorKey |
Yes when data is managed by customer, optional otherwise. | Access token for editor. |
lang |
No | Possible values: en (default, uses metric units) and en-us which uses imperial units. |
Styling
Wrapper creates a new <iframe> element and assigns it an id attribute. It is
derived from <textarea>'s id sttribute by appending -pantherpdf
For example:
- Original element:
<textarea id="reporteditor"></textarea> - Additional element:
<iframe id="reporteditor-pantherpdf"></iframe>
You can specify position, size, borders etc for this additional element.