zugferd-api-examples/javascript/embed.html at main · InvoiceXML/zugferd-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
59
60
61
62
63
64
65
<!DOCTYPE html>
<meta charset="utf-8">
<title>Embed CII XML into a PDF (ZUGFeRD) with the InvoiceXML API</title>
<!--
  Embed an existing UN/CEFACT CII XML into an existing PDF, producing a
  ZUGFeRD 2.x compliant PDF/A-3 hybrid invoice.

  Your PDF keeps its exact layout, fonts, and branding; the API promotes the
  container to PDF/A-3 and attaches the XML as factur-x.xml (the attachment
  name the ZUGFeRD specification prescribes since 2.2). The XML is validated
  with the full /v1/validate/zugferd rule set first, so a non-compliant
  invoice never leaves the API.

  Get API key: https://www.invoicexml.com/account/authentication
  Docs:        https://www.invoicexml.com/docs/api/embed/zugferd

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

<h1>Embed CII XML into a PDF (ZUGFeRD)</h1>
<label>PDF (visual layer): <input type="file" id="pdf" accept="application/pdf"></label>
<label>CII XML: <input type="file" id="xml" accept=".xml,application/xml,text/xml"></label>
<button id="run">Embed</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 pdf = document.getElementById('pdf').files[0];
    const xml = document.getElementById('xml').files[0];
    if (!pdf || !xml) return alert('Choose both a PDF and a CII XML file.');
    const status = document.getElementById('status');
    status.textContent = 'Embedding...';

    const form = new FormData();
    form.append('pdf', pdf);
    form.append('xml', xml);
    // Optional. 'true' packages the XML without EN 16931 business-rule checks;
    // structural checks (CII root, BT-24 profile URN, XSD) still run.
    form.append('skipValidation', 'false');

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

    if (!response.ok) {
        // 400 with errorCode 4001 lists every failed business rule;
        // 4017 means BT-24 is not an official ZUGFeRD profile URN.
        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-zugferd.pdf';
    a.click();
    status.textContent = `Downloaded invoice-zugferd.pdf (${blob.size} bytes).`;
});
</script>