Skip to content

Commit

Permalink
chore: remove pdfjs from print_designer
Browse files Browse the repository at this point in the history 
pdfjs was only used to show pdf in printview ( instead of browser's built in pdf view).
it has very little ux improvement and it's not worth the effort to maintain it.
  • Loading branch information
Maharshi Patel authored and Maharshi Patel committed Jan 10, 2025
1 parent 21fdcfc commit 10f54ab
Show file tree
Hide file tree
Showing 7 changed files with 51 additions and 641 deletions.
3 changes: 1 addition & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
"@interactjs/auto-start": "^1.10.17",
"@interactjs/interact": "^1.10.17",
"@interactjs/modifiers": "^1.10.17",
"html2canvas": "^1.4.1",
"pdfjs-dist": "v3.4.120"
"html2canvas": "^1.4.1"
}
}
198 changes: 48 additions & 150 deletions print_designer/print_designer/client_scripts/print.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,6 @@ frappe.pages["print"].on_page_load = function (wrapper) {
frappe.ui.form.PrintView = class PrintView extends frappe.ui.form.PrintView {
constructor(wrapper) {
super(wrapper);
this.pdfDoc = null;
this.pdfDocumentTask = null;
}
make() {
super.make();
Expand Down Expand Up @@ -67,7 +65,7 @@ frappe.ui.form.PrintView = class PrintView extends frappe.ui.form.PrintView {
},
},
parent: this.header_prepend_container,
// only_input: true,
only_input: true,
render_input: true,
});
this.toolbar_language_selector = frappe.ui.form.make_control({
Expand Down Expand Up @@ -103,24 +101,29 @@ frappe.ui.form.PrintView = class PrintView extends frappe.ui.form.PrintView {
}
});
}
createPdfEl(url, wrapperContainer) {
const mainSectionWidth = document.getElementsByClassName("main-section")[0].offsetWidth + "px";
const pdfEl = document.createElement('object');

pdfEl.id = 'pdf';
pdfEl.type = 'application/pdf';
pdfEl.style.height = '0px';

pdfEl.data = url;

pdfEl.style.width = mainSectionWidth;

wrapperContainer.appendChild(pdfEl); // Or any other container element
return pdfEl;
}
async designer_pdf(print_format) {
if (typeof pdfjsLib == "undefined") {
await frappe.require(
["assets/print_designer/js/pdf.min.js", "pdf.worker.bundle.js"],
() => {
pdfjsLib.GlobalWorkerOptions.workerSrc =
frappe.boot.assets_json["pdf.worker.bundle.js"];
}
);
}
let me = this;
let print_designer_settings = JSON.parse(print_format.print_designer_settings);
let page_settings = print_designer_settings.page;
let canvasContainer = document.getElementById("preview-container");
const wrapperContainer = document.getElementsByClassName("print-designer-wrapper")[0];
canvasContainer.style.minHeight = page_settings.height + "px";
canvasContainer.style.width = page_settings.width + "px";
canvasContainer.innerHTML = `${frappe.render_template("print_skeleton_loading")}`;
canvasContainer.style.backgroundColor = "white";
let params = new URLSearchParams({
doctype: this.frm.doc.doctype,
name: this.frm.doc.name,
Expand All @@ -130,100 +133,37 @@ frappe.ui.form.PrintView = class PrintView extends frappe.ui.form.PrintView {
let url = `${
window.location.origin
}/api/method/frappe.utils.print_format.download_pdf?${params.toString()}`;

/**
* Asynchronously downloads PDF.
*/
try {
this.pdfDocumentTask && this.pdfDocumentTask.destroy();
this.pdfDocumentTask = await pdfjsLib.getDocument(url);
this.pdfDoc = await this.pdfDocumentTask.promise;

// Initial/first page rendering
canvasContainer.innerHTML = "";
canvasContainer.style.backgroundColor = "transparent";
for (let pageno = 1; pageno <= this.pdfDoc.numPages; pageno++) {
await renderPage(this.pdfDoc, pageno);
}
this.pdf_download_btn.prop("disabled", false);
if (frappe.route_options.trigger_print) {
this.printit();
}
this.print_btn.prop("disabled", false);
} catch (err) {
console.error(err);
frappe.msgprint({
title: __("Unable to generate PDF"),
message: `There was error while generating PDF. Please check the error log for more details.`,
indicator: "red",
primary_action: {
label: "Open Error Log",
action(values) {
frappe.set_route("List", "Error Log", {
doctype: "Error Log",
reference_doctype: "Print Format",
});
},

const pdfEl = this.createPdfEl(url, wrapperContainer);
const onError = () => {
this.print_wrapper.find(".print-designer-wrapper").hide();
this.inner_msg.show();
this.full_page_btn.show();
this.pdf_btn.show();
this.letterhead_selector.show();
this.sidebar_dynamic_section.show();
this.print_btn.show();
this.sidebar.show();
this.toolbar_print_format_selector.$wrapper.hide();
this.toolbar_language_selector.$wrapper.hide();
super.preview();
frappe.show_alert(
{
message: __("Error Generating PDF..."),
indicator: "red",
},
});
}
/**
* Get page info from document, resize canvas accordingly, and render page.
* @param num Page number.
*/
async function renderPage(pdfDoc, num) {
// Using promise to fetch the page
let page = await pdfDoc.getPage(num);
let canvasContainer = document.getElementById("preview-container");
let canvas = document.createElement("canvas");
let textLayer = document.createElement("div");
textLayer.classList.add("textLayer");
textLayer.style.position = "absolute";
textLayer.style.left = 0;
textLayer.style.top = 0;
textLayer.style.right = 0;
textLayer.style.bottom = 0;
textLayer.style.overflow = "hidden";
textLayer.style.opacity = 0.2;
textLayer.style.lineHeight = 1.0;
canvas.style.marginTop = "6px";
canvasContainer.appendChild(canvas);
canvasContainer.appendChild(textLayer);
let ctx = canvas.getContext("2d");
let viewport = page.getViewport({ scale: 1 });
let scale = (page_settings.width / viewport.width) * window.devicePixelRatio * 1.5;
document.documentElement.style.setProperty(
"--scale-factor",
page_settings.width / viewport.width
10
);
let scaledViewport = page.getViewport({ scale: scale });
canvas.style.height = page_settings.height + "px";
canvas.style.width = page_settings.width + "px";
canvas.height = scaledViewport.height;
canvas.width = scaledViewport.width;

// Render PDF page into canvas context
let renderContext = {
canvasContext: ctx,
viewport: scaledViewport,
intent: "print",
};
await page.render(renderContext);
let textContent = await page.getTextContent();
// Assign CSS to the textLayer element
textLayer.style.left = canvas.offsetLeft + "px";
textLayer.style.top = canvas.offsetTop + "px";
textLayer.style.height = canvas.offsetHeight + "px";
textLayer.style.width = canvas.offsetWidth + "px";

// Pass the data to the method for rendering of text over the pdf canvas.
pdfjsLib.renderTextLayer({
textContentSource: textContent,
container: textLayer,
viewport: scaledViewport,
textDivs: [],
});
}
};
;

const onPdfLoad = () => {
canvasContainer.remove();
pdfEl.style.display = "block";
pdfEl.style.height = 'calc(100vh - var(--page-head-height) - var(--navbar-height))';
};
pdfEl.addEventListener("load", onPdfLoad);
pdfEl.addEventListener("error", onError);
}
printit() {
let me = this;
Expand All @@ -232,38 +172,6 @@ frappe.ui.form.PrintView = class PrintView extends frappe.ui.form.PrintView {
super.printit();
return;
}
if (this.get_print_format().print_designer) {
if (!this.pdfDoc) return;
this.pdfDoc.getData().then((arrBuff) => {
let file = new Blob([arrBuff], { type: "application/pdf" });
let fileUrl = URL.createObjectURL(file);
let iframe;
let iframeAvailable = document.getElementById("blob-print-iframe");
if (!iframeAvailable) {
iframe = document.createElement("iframe");
iframe.id = "blob-print-iframe";
iframe.style.display = "none";
iframe.src = fileUrl;
document.body.appendChild(iframe);
iframe.onload = () => {
setTimeout(() => {
iframe.focus();
iframe.contentWindow.print();
if (frappe.route_options.trigger_print) {
setTimeout(function () {
window.close();
}, 5000);
}
}, 1);
};
} else {
iframeAvailable.src = fileUrl;
}
// in case the Blob uses a lot of memory
setTimeout(() => URL.revokeObjectURL(fileUrl), 7000);
});
return;
}
super.printit();
}
show(frm) {
Expand All @@ -284,26 +192,21 @@ frappe.ui.form.PrintView = class PrintView extends frappe.ui.form.PrintView {
this.designer_pdf(print_format);
this.full_page_btn.hide();
this.pdf_btn.hide();
this.pdf_download_btn.prop("disabled", true);
this.print_btn.prop("disabled", true);
this.pdf_download_btn.show();
this.print_btn.hide();
this.letterhead_selector.hide();
this.sidebar_dynamic_section.hide();
this.sidebar.hide();
this.toolbar_print_format_selector.$wrapper.show();
this.toolbar_language_selector.$wrapper.show();
return;
}
this.pdfDocumentTask && this.pdfDocumentTask.destroy();
this.print_wrapper.find(".print-designer-wrapper").hide();
this.inner_msg.show();
this.full_page_btn.show();
this.pdf_btn.show();
this.pdf_download_btn.hide();
this.print_btn.show();
this.letterhead_selector.show();
this.sidebar_dynamic_section.show();
this.pdf_download_btn.prop("disabled", false);
this.print_btn.prop("disabled", false);
this.sidebar.show();
this.toolbar_print_format_selector.$wrapper.hide();
this.toolbar_language_selector.$wrapper.hide();
Expand Down Expand Up @@ -332,11 +235,6 @@ frappe.ui.form.PrintView = class PrintView extends frappe.ui.form.PrintView {
icon: "refresh",
});

this.pdf_download_btn = this.page
.add_button(__("Download PDF"), () => this.download_pdf(), {
icon: "small-file",
})
.hide();
this.page.add_action_icon(
"file",
() => {
Expand Down
6 changes: 2 additions & 4 deletions print_designer/public/css/print_designer.bundle.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,18 @@
display:flex;
flex-direction:column;
overflow: auto;
padding: 40px 0;
background-color: var(--control-bg);
border-radius: var(--border-radius);

.preview-container {
margin: 0px 10px;
margin: 40px 10px;
}
}
@media only screen and (min-width: 700px) {
.print-designer-wrapper {
padding: 80px 0;
align-items:center;
.preview-container {
margin: 0px;
margin: 40px;
}
}
}
22 changes: 0 additions & 22 deletions print_designer/public/js/pdf.min.js
View file

This file was deleted.

1 change: 0 additions & 1 deletion print_designer/public/js/pdf.worker.bundle.js
View file

This file was deleted.

22 changes: 0 additions & 22 deletions print_designer/public/js/pdf.worker.min.js
View file

This file was deleted.

Loading

0 comments on commit 10f54ab

Please sign in to comment.