Add function to download pdf and download based the downloadBtn parameter

A new taxonomy for the download button should be added in the base configuration file.
eg downloadable = "downloadBtn"
When this downloadBtn is added in the front matter of any of the content files, it will be displayed.
eg downloadBtn: "true"
Adding it to the archetypes and setting it to false by default be awesome.

Signed-off-by: Ida Delphine <mida@unicef.org>

2 files changed, 24 insertions, 3 deletions

diff --git a/assets/js/script.js b/assets/js/script.js
index e8e111e..b53232d 100644
--- a/assets/js/script.js
+++ b/assets/js/script.js
@@ -127,4 +127,23 @@
     $(this).removeClass('active')
   })
 
+
+  // Download page to pdf format
+  window.onload = function() {
+      document.getElementById("generatePDF")
+          .addEventListener("click", () => {
+              const content = this.document.getElementById("content");
+              console.log(content);
+              console.log(window);
+              var opt = {
+                  margin: 1,
+                  filename: document.querySelector('#title').innerHTML,
+                  image: { type: 'jpeg', quality: 0.98 },
+                  html2canvas: { scale: 2 },
+                  jsPDF: { unit: 'in', format: 'letter', orientation: 'portrait' }
+              };
+              html2pdf().from(content).set(opt).save();
+          })
+    }
+
 })(jQuery);
\ No newline at end of file
diff --git a/layouts/partials/default.html b/layouts/partials/default.html
index 8bd157c..7614269 100644
--- a/layouts/partials/default.html
+++ b/layouts/partials/default.html
@@ -13,9 +13,11 @@
               {{ end }}
             {{ end }}
             {{ if .Content }}
-            <div>
-                <button class="btn btn-primary btn-block" id="generatePDF" > Get Pdf  </button>
-            </div>
+              {{ if eq .Params.downloadBtn "true" }}
+                <div>
+                    <button class="btn btn-primary btn-block" id="generatePDF" > Get Pdf  </button>
+                </div>
+              {{ end }}
             {{ end }}
           </ul>
         </div>