How to add custom panel to PDF render

[Naresh Designs]

Hello,

Can you please help me for How to add custom panel(div) to PDF render
Like when you click download PDF button Need to print custom div , find below link for more details

Red marked div need to downalod alog with table”

http://bharathidevelopers9.com/admin/venture-client-payment-details

Thanks
Naresh

---

[Support]

Hello Naresh,

Please note a 100% definite solution for you question is out of what our support scope can offer. Our support is here for questions related to the template as it is when downloaded from ThemeForest. Adding new content to the PDF in a dynamic way is a functionality that Porto Admin don’t have.

But do not worry, we can help with some orientation and tips. In this specific case probably the best way is work with the PDF button option messageTop. Eg:

var table = $table.dataTable({
	sDom: '<"text-right mb-md"T><"row"<"col-lg-6"l><"col-lg-6"f>><"table-responsive"t>p',
	buttons: [
		{
			extend: 'print',
			text: 'Print'
		},
		{
			extend: 'excel',
			text: 'Excel'
		},
		{
			extend: 'pdf',
			text: 'PDF',
			messageTop: 'your custom message here',
			customize : function(doc){
	            var colCount = new Array();
	            $('#datatable-tabletools').find('tbody tr:first-child td').each(function(){
	                if($(this).attr('colspan')){
	                    for(var i=1;i<=$(this).attr('colspan');$i++){
	                        colCount.push('*');
	                    }
	                }else{ colCount.push('*'); }
	            });
	            doc.content[2].table.widths = colCount; // Make sure to change this line too 
	        }
		}
	]
});

I saw you have search fields on top that when filled, display the table below with results. This way you will need mount the messageTop string on each new search/results, and destroy and initialize the table again.

For example to destroy the table:
First change the initialization JS code to var table = $table.DataTable({ instead of var table = $table.dataTable({. Then, use the method destroy():

table.destroy();

Once you have the table destroyed, you can initialize again with different messageTop string.

We hope these infos help!

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Naresh Designs]

Thank you for your reply..

I tried with your suggestions but no Luck, can you check to find below the code

UI: http://bharathidevelopers9.com/admin/venture-client-payment-details
Custom: JS: http://bharathidevelopers9.com/admin/js/custom.js
Editable JS: http://bharathidevelopers9.com/admin/js/examples/examples.datatables.editable.js

I am looking to render the table above div when lick download PDF button, plS check above UI link you will get more idea on this

Thanks

---

[Support]

Hello Naresh,

Inspecting your code I can’t see the messageTop option. This is the way you can add content above the table in the PDF. Please see my previous reply about messageTop option.

Please note a 100% definite solution for you question is out of what our support scope can offer. Our support is here for questions related to the template as it is when downloaded from ThemeForest. Adding new content to the PDF in a dynamic way is a functionality that Porto Admin does not comes.

But probably this is something possible to do with customization and using the option messageTop.

We hope this helps and clarify!

Kind Regards,

Rodrigo.

---

[Naresh Designs]

Sorry forgot the upload file on serve,

Can you please check now ..

here files

UI: http://bharathidevelopers9.com/admin/venture-client-payment-details
Custom: JS: http://bharathidevelopers9.com/admin/js/custom.js

Respective JS code:
http://localhost/BharathiDevelopers/Admin/web/js/venture-client-payment-details.datatables.editable.js

If I am wrong can you please let me know when exactly need your code

thanks

---

[Naresh Designs]

Thank you i am able to print messageTop on PDF while rendering, but exiting PDF design losing like table width and borders setting not properly

Please check the screenshot for reference

Aftetr messageTop implement :

Before Implement:

---

[Support]

Hello,

Please try changing this line of code:

doc.content[0].layout = objLayout;

To this:

doc.content[1].layout = objLayout;

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Naresh Designs]

Thank you for sharing..

Now Width not rending as expected, we are looking at full width (100%)

---

[Support]

Hello,

Make sure you did not remove the code below from JS script:

..
....
......
customize: function (doc) {
      doc.content[2].table.widths = Array(
        doc.content[2].table.body[0].length + 1
      )
        .join("*")
        .split("");
....
...
......

Kind Regards,

Rodrigo.

---

If you are satisfied with Porto Admin and our support, please leave your comment and rating on ThemeForest downloads page. That helps us a lot: https://themeforest.net/downloads

---

[Naresh Designs]

Yes, Thank you for your support 🙂

I have given 5 stars for you

---

[Support]

Hello,

Great! 🙂

Thanks for the review!

If you need further assistance feel free to contact us.

Kind Regards,

Rodrigo.

---

[Author]

Posts