cii-api-examples/javascript/render.html at main · InvoiceXML/cii-api-examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
<meta charset="utf-8">
<title>Render CII to PDF with InvoiceXML API</title>
<!--
  Render a CII XML file into a human-readable PDF preview.
  The XML file remains the authoritative invoice; the PDF is for reading only.

  Get API key: https://www.invoicexml.com/account/authentication
  Docs:        https://www.invoicexml.com/docs/api/render/cii/to/pdf

  WARNING: do not ship API keys in production browser code. Proxy through
  your own backend so the key stays server-side.
-->

<h1>Render CII to a readable PDF</h1>
<input type="file" id="file" accept=".xml,application/xml,text/xml">
<label for="language">Language</label>
<select id="language">
    <option value="en">English</option>
    <option value="de">Deutsch</option>
    <option value="fr">Français</option>
</select>
<button id="run">Render</button>
<p id="status"></p>

<script>
// Raw key only, without the "Bearer " prefix (it is added below).
const apiKey = 'YOUR_API_KEY';

document.getElementById('run').addEventListener('click', async () => {
    const file = document.getElementById('file').files[0];
    if (!file) return alert('Choose an XML file first.');
    const status = document.getElementById('status');
    status.textContent = 'Rendering...';

    const form = new FormData();
    form.append('file', file);
    form.append('language', document.getElementById('language').value);

    const response = await fetch('https://api.invoicexml.com/v1/render/cii/to/pdf', {
        method: 'POST',
        headers: { Authorization: 'Bearer ' + apiKey },
        body: form,
    });

    if (!response.ok) {
        status.textContent = `InvoiceXML API error ${response.status}: ${await response.text()}`;
        return;
    }

    const blob = await response.blob();
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = 'invoice-preview.pdf';
    a.click();
    status.textContent = `Downloaded invoice-preview.pdf (${blob.size} bytes)`;
});
</script>