Works! (I think :P)

index.html

@@ -77,6 +77,13 @@
                         <label for="cellNumber">Cell Number</label>
                         <input type="tel" class="form-control" id="cellNumber" name="cellNumber" maxlength="15" required="">
                     </div>
+                    <div class="form-group">
+                        <input type="radio" id="o365" name="outlookVer" value="1">
+                        <label id="o365Label" for="o365">MS Office 365</label>
+                        <br>
+                        <input type="radio" id="o2016" name="outlookVer" value="0">
+                        <label id="o2016Label" for="o2016">MS Office 2016</label>
+                    </div>
                     <button class="btn btn-primary" id="formSubmit">Generate VCard</button>
                 </div>
             </div>

script.js

@@ -12,36 +12,36 @@ function handleCheckbox() {
     }
 }
 
+
 let backendUrl = "http://127.0.0.1:8090"
 let locations = JSON.parse("{}");
 
 function submitForm() {
-    let body = JSON.stringify(
+    let body =
         "{" +
         "\"name\":\"" + document.getElementById("full_name").value + "\"," +
         "\"title\":\"" + document.getElementById("title").value + "\"," +
         "\"email\":\"" + document.getElementById("email").value + "\"," +
-        "\"location\":\"" + document.getElementById("location").value + "\"," +
+        "\"locationId\":\"" + document.getElementById("location").value + "\"," +
         "\"extension\":\"" + document.getElementById("extension").value + "\"," +
-        "\"hasExtension\":\"" + document.getElementById("hasExtension").value + "\"," +
+        "\"directNumber\":\"" + document.getElementById("directLine").value + "\"," +
         "\"cellNumber\":\"" + document.getElementById("cellNumber").value + "\"," +
-        "\"hasCell\":\"" + document.getElementById("hasCell").value + "\"" +
-        "}"
-    );
+        "\"size\":" + document.querySelector('input[name = outlookVer]:checked').value +
+        "}";
 
     console.log(body);
 
-    fetchWithTimeout(backendUrl + "/", {
+    fetchWithTimeout(backendUrl, {
         timeout: 5000,
         method: 'POST',
         mode: 'cors',
-        headers: {
+        Headers: {
             'Accept': 'image/png',
             'Content-Type': 'application/json'
         },
         body: body
-    }).then(response => {
-        console.log(response);
+    }).then(async response => {
+        downloadImage(await response.arrayBuffer());
     });
 }
 
@@ -132,4 +132,19 @@ async function fetchWithTimeout(resource, options = {}) {
     clearTimeout(id);
 
     return response;
+}
+
+function downloadImage(arrayBuffer) {
+    const blob = new Blob([arrayBuffer], { type: "image/png" });
+    const link = document.createElement("a");
+    link.href = URL.createObjectURL(blob);
+    link.download = "vcard.png";
+
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+
+    setTimeout(() => {
+        URL.revokeObjectURL(link.href);
+    }, 100);
 }