How to print pdf in html print format

Frappe Framework Customization
1

hi
i have one attachement filed in that i am attached only pdf files and that i want show in print format is it possible to show pdf in print format

2

Yes, This is possible

frappe.ui.form.on("Doctype", {
    refresh: function(frm) {
        frm.add_custom_button(__("Print PDF"), function() {
            // Get the URL of the PDF attachment
            var url = frm.doc.attachments[0].file_url;

            // Create an iframe element to display the PDF
            var iframe = document.createElement('iframe');
            iframe.src = url;
            iframe.style.display = 'none';
            document.body.appendChild(iframe);

            // Wait for the PDF to load in the iframe
            iframe.onload = function() {
                iframe.contentWindow.print();
                // Remove the iframe from the DOM
                document.body.removeChild(iframe);
            };
        });
    }
});

When you click the print PDF button, this will fetch the PDF URL, and then it will make the print.

Hope this will help you out.

Thank you.

3

but this pdf link in child table
i have a child table in that i am store that pdf url like this

image
i am trying this one
filed in child table so take one for loop in that and print {{row.filed_name}}

and by using this url i want to show the pdf in print format

4

On, this case you can just make the child table into a loop and make a small change in the above code

For Example:

frappe.ui.form.on("Your Doctype", {
    refresh: function(frm) {
        frm.add_custom_button(__("Print PDF"), function() {
            // Get the PDF URLs from the child table
            var pdf_urls = frm.doc.child_table.map(function(row) {
                return row.pdf_attachment;
            });

            // Loop through the PDF URLs and print each PDF
            pdf_urls.forEach(function(pdf_url) {
                // Create an iframe element to display the PDF
                var iframe = document.createElement('iframe');
                iframe.src = pdf_url;
                iframe.style.display = 'none';
                document.body.appendChild(iframe);

                // Wait for the PDF to load in the iframe
                iframe.onload = function() {
                    // Print the PDF using the iframe's print function
                    iframe.contentWindow.print();

                    // Remove the iframe from the DOM
                    document.body.removeChild(iframe);
                };
            });
        });
    }
});

Hope this will help you out.

Thank you.

5

without creatine any new button i want to continue with exisitng functionality
every thing is working only just when i click on pdf button then its showing like this beacuse in uploaded attachment filed data is pdf format

image

6

Then you can remove the button syntax and apply the same code on the On_submit method.

frappe.ui.form.on("Doctype", {
    on_submit: function(frm) {
        // Get the PDF URLs from the child table
        var pdf_urls = frm.doc.child_table.map(function(row) {
            return row.pdf_attachment;
        });

        // Loop through the PDF URLs and print each PDF
        pdf_urls.forEach(function(pdf_url) {
            // Create an iframe element to display the PDF
            var iframe = document.createElement('iframe');
            iframe.src = pdf_url;
            iframe.style.display = 'none';
            document.body.appendChild(iframe);

            // Wait for the PDF to load in the iframe
            iframe.onload = function() {
                // Print the PDF using the iframe's print function
                iframe.contentWindow.print();

                // Remove the iframe from the DOM
                document.body.removeChild(iframe);
            };
        });
    }
});

Hope this will help you out.

Thank you.

2 Likes
7

without using js code is it possible throgh jinja