pdf saver

index.html

@@ -8,7 +8,6 @@
     BODY {
            font-family: sans-serif;
            background-color: lightcyan;
-           width: 100%;
            }
     TEXTAREA { font-family: sans-serif; width: 100%;
                -webkit-border-radius: 5px;
@@ -51,9 +50,7 @@
         display: none;
     }
     #barcodes {
-        margin-top: 1em;
+        margin: 1em;
-        margin-bottom: 1em;
-        width: 100%;
         opacity: 1;
         transition: opacity 0.2s;
     }
@@ -66,7 +63,6 @@
     #lasku {
         border: 1px solid;
         border-collapse: collapse;
-        width: 100%;
     }
     #lasku th, #lasku td {
         border: 1px solid;
@@ -92,6 +88,15 @@
     .print_help {
         display: none;
     }
+    .kayttaja_pdf {
+            display: none;
+    }
+    .print_help_pdf {
+        display: block;
+        overflow: visible;
+        white-space: pre;
+        white-space: pre-wrap;
+    }
     @media print {
         .no-print, .no-print * {
             display: none !important;
@@ -113,8 +118,11 @@
 
     }
 
+
 </STYLE>
 <script src="https://cdn.jsdelivr.net/npm/jsbarcode@3.11.5/dist/barcodes/JsBarcode.code128.min.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+
 
 <script>
 let state = {
@@ -324,6 +332,34 @@ function clear_lasku() {
     }
 }
 
+function lasku_pdf() {
+    var element = document.getElementById('barcodes');
+    const editables = document.getElementsByClassName("kayttaja");
+    const printables = document.getElementsByClassName("print_help");
+
+    for (let i = 0; i < editables.length; i++) {
+        editables[i].classList.add("kayttaja_pdf");
+    }
+    for (let i = 0; i < printables.length; i++) {
+        printables[i].classList.add("print_help_pdf");
+    }
+    var opt = {
+      margin:       10,
+      filename:     `lasku-${state['paiva']}-${state['viite']}.pdf`,
+      html2canvas:  { scale: 2 },
+      jsPDF:        { unit: 'mm', format: 'A4', orientation: 'portrait' }
+    };
+    html2pdf().set(opt).from(element).save().then(function(results){
+        for (let i = 0; i < editables.length; i++) {
+            editables[i].classList.remove("kayttaja_pdf");
+        }
+        for (let i = 0; i < printables.length; i++) {
+            printables[i].classList.remove("print_help_pdf");
+        }
+    });
+
+}
+
 function init() {
     const date = new Date();
     document.getElementById('paiva').value = date.toISOString().substring(0,10);
@@ -393,6 +429,9 @@ function reversed(str) {
     </div>
     <br>
     <div class="no-print">
+
+        <input type="submit" onclick="lasku_pdf()" value="Tallenna lasku PDF"/>
+        <br><br>
         <label>Virtuaaliviivakoodi:</label><br>
         <input id="virtuaali" size=54 /><br>
         <label>&nbsp;</label><span id="virtuaali_error" class="error" ></span><br>