feat: certificate download as pdf

lms/lms/doctype/lms_certificate/lms_certificate.py

@@ -6,6 +6,7 @@ from frappe import _
 from frappe.model.document import Document
 from frappe.utils import add_years, nowdate
 from frappe.utils.pdf import get_pdf
+from weasyprint import HTML, CSS
 
 from lms.lms.utils import is_certified
 
@@ -50,7 +51,18 @@ def create_certificate(course):
 
 
 @frappe.whitelist()
-def get_certificate_pdf(html):
+def get_certificate_pdf(html_str):
+
+	html = HTML(string=html_str)
+	css = CSS(
+		string="""
+		@page {
+			size: A4 landscape;
+		}"""
+	)
+	main = html.render(stylesheets=[css])
+	pdf = main.write_pdf()
+
 	frappe.local.response.filename = "certificate.pdf"
-	frappe.local.response.filecontent = get_pdf(html, {"orientation": "LandScape"})
+	frappe.local.response.filecontent = pdf
 	frappe.local.response.type = "pdf"

lms/templates/certificate.html

@@ -2,8 +2,7 @@
 <div id="certificate-card" style="background: #FFFFFF; border-radius: 0.5rem; position: relative;
     box-shadow: 0px 1px 2px rgba(25, 39, 52, 0.05), 0px 0px 4px rgba(25, 39, 52, 0.1); padding: 1rem;">
 
-    <div style="border: 10px solid var(--primary-color); display: flex; flex-direction: column; align-items: center; padding: 4rem;
+    <div style="border-image: url(/assets/lms/images/border.png); padding: 4rem; background-color: #FFFFFF; text-align: center;">
-        justify-content: center; background-color: #FFFFFF;">
 
         <img src="{{ logo }}" style="height: 1.5rem;">
         <div style="margin-top: 4rem;">

lms/www/courses/certificate.html

@@ -15,11 +15,7 @@
         <img class="ml-1 mr-1" src="/assets/lms/icons/chevron-right.svg">
         <a class="dark-links" href="/courses/{{ course.name }}">{{ course.title }}</a>
     </div>
-    {% if custom_template %}
+    {% include "lms/templates/certificate.html" %}
-        {{ custom_template }}
-    {% else %}
-        {% include "lms/templates/certificate.html" %}
-    {% endif %}
     <script src="/assets/lms/js/html2canvas.js"></script>
 
   </div>

lms/www/courses/certificate.js

@@ -1,6 +1,6 @@
 frappe.ready(() => {
 	$("#export-as-pdf").click((e) => {
-		export_as_png(e);
+		export_as_pdf(e);
 	});
 });
 
@@ -8,7 +8,7 @@ const export_as_pdf = (e) => {
 	var formData = new FormData();
 
 	//Push the HTML content into an element
-	formData.append("html", $("#certificate-card").html());
+	formData.append("html_str", $("#certificate-card").html());
 
 	var blob = new Blob([], { type: "text/xml" });
 	formData.append("blob", blob);

lms/www/courses/certificate.py

@@ -1,6 +1,6 @@
 import frappe
 from frappe.utils.jinja import render_template
-
+from frappe.utils import get_url
 from lms.lms.utils import get_instructors
 
 
@@ -31,7 +31,9 @@ def get_context(context):
 		"User", context.certificate.member, ["full_name"], as_dict=True
 	)
 
-	context.logo = frappe.db.get_single_value("Website Settings", "banner_image")
+	context.logo = get_url(
+		frappe.db.get_single_value("Website Settings", "banner_image"), full_address=True
+	)
 	template_name = frappe.db.get_single_value(
 		"LMS Settings", "custom_certificate_template"
 	)

requirements.txt

@@ -3,3 +3,4 @@ websocket_client
 markdown
 beautifulsoup4
 lxml
+cairocffi