How to get header and footer templates to work with drawing.fit

[Jerry]

I am trying to output the contents of a webpage to a PDF using the below. Here is a simplified example that demonstrates my problem: https://dojo.telerik.com/FsiNAoUB/2

My actual webpage contains a few paragraphs of information in divs and a few tables. The tables can be wide so I am using the kendo.drawing.fit so everything looks good on the PDF.

With the kendo.drawing.fit, the PDF outputs the page very nicely, all the objects fits well on the PDF.

But the problem I have is that the header and footer templates do not work when using kendo.drawing.fit. Meaning, no header or footer appears in the PDF. But the objects do appear as desired.

If I remove the kendo.drawing.fit, the header and footer templates work again, but the output does not look as good. The grids are too wide etc...

How can I get the below example working with header and footer templates?

More information:
If these setting are set here: "kendo.drawing.drawDOM("#grid", {paperSize: "A4",margin: "3cm",template: $("#page-template").html()......."
-All the pages of the PDF are placed on top of each other on 1 single page. For example instead of 3 pages in the PDF, there is only 1 page because each page is "printed" on the same page, on top of each other. However, the header and footer templates do print on the PDF.

Here is an example PDF:

 

If these setting are set here: "return kendo.drawing.exportPDF(content, {paperSize: "A4",margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },template: $("#page-template").html()});"
-The PDF appears as desired but there are no header or footer templates.

kendo.drawing.drawDOM("#grid", {
	  paperSize: "A4",
	  margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
	  template: $("#page-template").html()
  }).then(function(group){

		//Adding this forces all the pages of the PDF to overlap onto 1 page
		var PAGE_RECT = new kendo.geometry.Rect(
			[0, 0], [mm(210 - 20), mm(297 - 20)]
		);
		var content = new kendo.drawing.Group();
		content.append(group);

		kendo.drawing.fit(content, PAGE_RECT)
		//
	
		return kendo.drawing.exportPDF(content, {
			//paperSize: "A4",
			//margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
			//template: $("#page-template").html()
		  });
  })
	  .done(function (data) {
		kendo.saveAs({
		  dataURI: data,
		  fileName: "filename.pdf",
		  //proxyURL: "myurl/Test/"
		});
	  });

 

 

[Martin]

Hello, Jerry,

Just a small clarifying question - do you wish to export the Grid the way it is in the example you provided, without paging in the Grid? Looking forward to your reply.