feat: export certificate

lms/lms/doctype/lms_certificate/lms_certificate.py

@@ -42,3 +42,9 @@ def create_certificate(course):
         })
         certificate.save(ignore_permissions=True)
         return certificate
+
+@frappe.whitelist()
+def get_certificate_pdf(html):
+    frappe.local.response.filename = "certificate.pdf"
+    frappe.local.response.filecontent = get_pdf(html, {"orientation": "LandScape"})
+    frappe.local.response.type = "pdf"

lms/public/css/style.css

@@ -829,7 +829,7 @@ pre {
 
 .certificate-content {
     background-color: #FFFFFF;
-    border-width: 100px;
+    border-width: 10px;
     border-style: solid;
 }
 

lms/templates/certificate.html

@@ -1,30 +1,35 @@
-<div class="certificate-card">
+
-    <div class="certificate-content" style="border-image: url(/assets/lms/images/border.png) 13% round;">
+<div id="certificate-card" style="background: #FFFFFF; border-radius: 0.5rem; position: relative;
-        <img src="{{ logo }}" class="certificate-logo">
+    box-shadow: 0px 1px 2px rgba(25, 39, 52, 0.05), 0px 0px 4px rgba(25, 39, 52, 0.1); padding: 1rem;">
-        <div class="mt-16">
+    <div style="border: 10px solid var(--primary-color); display: flex; flex-direction: column; align-items: center; padding: 4rem;
+        justify-content: center; background-color: #FFFFFF;">
+        <img src="{{ logo }}" style="height: 1.5rem;">
+        <div style="margin-top: 4rem;">
             {{ _("This certifies that") }}
         </div>
-        <div class="certificate-heading"> {{ member.full_name }} </div>
+        <div style="font-size: 2rem; font-weight: 500; color: #192734;"> {{ member.full_name }} </div>
-        <div class="mt-2"> {{ _("has successfully completed the course on") }}
+        <div style="margin-top: 0.5rem;"> {{ _("has successfully completed the course on") }}
             <b> {{ course.title }} </b> on {{ frappe.utils.format_date(certificate.issue_date, "medium") }}. </div>
 
-        <div class="certificate-footer">
+        <div style="display: flex; justify-content: center; margin: 4rem auto 0; width: fit-content;">
 
             {% if instructors %}
-            <div class="">
+            <div>
-                <span class="certificate-footer-item"> {{ instructors }} </span>
+                <div style="color: #192734; font-weight: bold; font-family: cursive; font-size: 1.25rem;">
-                <hr class="mt-2 mb-2">
+                    {{ instructors }}
-                <div class=""> {{ _("Course Instructor") }} </div>
+                </div>
+                <hr style="margin: 0.5rem 0;">
+                <div> {{ _("Course Instructor") }} </div>
             </div>
             {% endif %}
 
             {% if certificate.expiry_date %}
-            <div class="ml-8">
+            <div style="margin-left: 2rem;">
-            <div class="certificate-footer-item">
+            <div style="color: #192734; font-weight: bold; font-family: cursive; font-size: 1.25rem;">
                 {{ frappe.utils.format_date(certificate.expiry_date, "medium") }}
             </div>
-            <hr class="mt-2 mb-2">
+            <hr style="margin: 0.5rem 0;">
-            <div class=""> {{ _("Expiry date") }} </div>
+            <div> {{ _("Expiry date") }} </div>
             </div>
             {% endif %}
 

lms/www/courses/certificate.html

@@ -5,10 +5,10 @@
 <div class="common-page-style">
   <div class="container certificate-page">
 
-    <!-- {% if certificate.member == frappe.session.user %}
+    {% if certificate.member == frappe.session.user %}
-    <div class="button is-secondary pull-right mt-4" id="export-as-pdf" data-certificate="{{ certificate.name }}"
+    <div class="button is-secondary pull-right" id="export-as-pdf" data-certificate="{{ certificate.name }}"
         data-certificate-name="{{ member.full_name }} - {{ course.title }}">{{ _("Export") }}</div>
-    {% endif %} -->
+    {% endif %}
 
     <div class="breadcrumb">
         <a class="dark-links" href="/courses">{{ _("All Courses") }}</a>

lms/www/courses/certificate.js

@@ -1,25 +1,53 @@
 frappe.ready(() => {
 
     $("#export-as-pdf").click((e) => {
-        export_as_pdf(e);
+        export_as_png(e);
     })
 
 });
 
 const export_as_pdf = (e) => {
+
+    var formData = new FormData();
+
+    //Push the HTML content into an element
+    formData.append("html", $("#certificate-card").html());
+
+    var blob = new Blob([], { type: "text/xml"});
+    formData.append("blob", blob);
+
+    var xhr = new XMLHttpRequest();
+    xhr.open("POST", '/api/method/lms.lms.doctype.lms_certificate.lms_certificate.get_certificate_pdf');
+    xhr.setRequestHeader("X-Frappe-CSRF-Token", frappe.csrf_token);
+    xhr.responseType = "arraybuffer";
+
+    xhr.onload = function(success) {
+        if (this.status === 200) {
+            var blob = new Blob([success.currentTarget.response], {type: "application/pdf"});
+            var objectUrl = URL.createObjectURL(blob);
+
+            //Open report in a new window
+            window.open(objectUrl);
+        }
+    };
+    xhr.send(formData);
+
+}
+
+const export_as_png = (e) => {
     let button = $(e.currentTarget);
     button.text(__("Exporting..."));
 
-  html2canvas(document.querySelector('.certificate-card'), {
+    html2canvas(document.querySelector('#certificate-card'), {
-    scrollY: -window.scrollY,
+        scrollY: -window.scrollY,
-    scrollX: 0
+        scrollX: 0
-  }).then(function(canvas) {
+    }).then(function(canvas) {
-    let dataURL = canvas.toDataURL('image/png');
+        let dataURL = canvas.toDataURL('image/png');
-    let a = document.createElement('a');
+        let a = document.createElement('a');
-    a.href = dataURL;
+        a.href = dataURL;
-    a.download = button.attr("data-certificate-name");
+        a.download = button.attr("data-certificate-name");
-    a.click();
+        a.click();
-  }).finally(() => {
+    }).finally(() => {
-    button.text(__("Export"))
+        button.text(__("Export"))
-  });
+    });
 }