Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: remove pdfjs from print_designer #388

Merged
merged 1 commit into from
Jan 10, 2025
+51 −641
Merged

chore: remove pdfjs from print_designer #388

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop

This file was deleted.

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

This file was deleted.

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

This file was deleted.

Loading
Loading