How to convert html contents including divs and ng-grids/tables to pdf using jspdf - jspdf

I want to convert entire html page to pdf. Thanks to stackoverflow, i got idea, but i want to convert both divs and ng-grids.
Try1: While including both in specialElementHandlers, data and column headers in grid are not displayed properly in pdf. [column headers are displayed as individual rows and unwanted ng-grid code snippets are captured (Total Items: 0
(Showing Items: 0)
Selected Items: 0
Page Size:
/ 1)]
Try2: After converting all my divs to tables, some data are not properly displayed in pdf. Data are not properly placed in table structure.
Kindly let me know, if this is due to html design issue or jspdf property setups.

You can convert it to an image and insert your image in a html document. Or you put this document in a ftp server and load this.

Related

Add header and footer using JsPDF and template

How can we add header and footer same for all pages through out pdf using jsPDF. And apart from this please let me know that what are all ways to create pdf using jspdf like using HTML content or a string or some HTML template so please help me out on both query
Although jsPDF does not have a dedicated header or footer functions, you may use
var doc = new jsPDF();
doc.text("Header or footer text", x, y);
Where x is margin from left of the page and y is from the top.
You may have to position it as per your page dimensions require.
And about your second query, jsPDF has addHTML and addImage (Older versions of jsPDF) functions to help you generate PDF.
addHTML take in raw HTML code as input while addImage takes image as input which can be positioned on the PDF page.
addImage requires additional libraries such as html2canvas for image generation.

How to use HTML to print header and footer on pdf use of jspdf

In my HTML page, 2 diff chart is available that's the way I convert full page as an image and after it saves as pdf using jspdf.
I need set header or footer before it update in html2Canvas and jspdf.
but how can I add header and footer in pdf?
You don't add headers and footers in PDF. Read more about PDF, it is a low level standardized format, where the primitive operations are something like move to coordinate x=340, y=450 (in some unit, perhaps tenth of millimeters or typographical points) and change font to Helvetica 10 and show the a letter. Read the PDF standard.
You may generate PDF from some higher level text format. I recommend reading about LaTeX and Lout and many other such document processors. You could consider generating some LaTeX or Lout file, then converting it to PDF (by running some pdflatex or lout process).
You could use a PDF generating library such as JagPDF and many others.
You might find HTML to PDF converters. Most web browsers have one. Look also into pandoc.

How to create table in Pdf with functionality of rowspan and colspan in IOS

Want to create complete report in pdf. i successfully draw text and images in PDF by using Apple documentation but i am unable to find any solution to create table in PDF with rowspan and colspan functionality, also if table size greater than pdf page size then it displays remaining table to the next page. Any solution,API or library which helped me for this Problem?
PDF has no builtin notion of tables. In fact, the only PDF primitives are Glyphs, Shapes and Images. If you want to generate a table, you have to stroke all the lines of the table yourself, using, for example, CGContextStrokePath (after you have built a path with the lines in the table).

Prawn - Zoom out contents so that it fits in one page

I have a dynamic PDF report which gives monthly report of our database. I am using Prawn to generate the PDF report.
The monthly report can contain maximum of 90 rows (maximum 3 per day). There can also be days with no record. So, the number of rows in a monthly report is highly dynamic.
The client needs the report in a single page PDF. They dont care if the font size becomes very small or the row height is really small. But the contents should fit in a single page.
They have shown examples of PDF that are generated using their previous application. In those, it seems that they are creating the table with a fixed font size and row height etc. and they are somehow zooming out so that the PDF has some whitespace in the right side of the page, but it fits in a single page.
Something like this:
Is there a way to achieve this in Prawn?
The needed page layout can be easily achieved with PD4ML's fitPageVertically() API call - but PD4ML approach differs from Prawn quite significantly.
With PD4ML you have to generate an HTML document with report data/table (not that tricky to do) and after that pass it to PD4ML for a converting to PDF.
PD4ML in Ruby scenario can be launched as a standalone converter application.
You can build a fixed size table for print with option:
overflow: :shrink_to_fit
in table cells. That will shrink to a smaller font automatically.
given the number of rows to be print, you can dynamically adjust tables row heights
see: http://prawnpdf.org/prawn-table-manual.pdf

images padding when converting html to pdf using itextpdf and XMLWorker

I am using XMLWorker 5.5.3 and itextpdf 5.5.3 to convert html to pdf.
my html contain table with cells that conatin images.
i.e. part of my code :
my problem is that some cells add padding > 0 so the td that contain the image is bigger than it should be.
Is there a way to define style for images so the will not have padding and margin ?
I am looking at css Demo of Itextpdf and not finding a solution , any help/trick /ideas will help .
thanks
Tami
I found a solution:
when I create the table I define columns width :
PdfPTable table = new PdfPTable(vColWidth.length);
table.setWidthPercentage(100);
table.setWidths(vColWidth);
when creating the Image object I define :
RegularImg = Image.getInstance(imgsrc);
RegularImg.setSpacingAfter(0);
RegularImg.setSpacingBefore(0);
when defining the td :
cell = new PdfPCell(RegularImg);
if(colSpan!="")
cell.setColspan(Integer.parseInt(colSpan));
if(rowSpan!= "")
cell.setRowspan(Integer.parseInt(rowSpan));
if(cellHight!="")
cell.setFixedHeight(Float.parseFloat(cellHight));
table.addCell(cell);
this solutions works o.k. if the table is not so big or complicated with the colSpan , rowSpan .
In complicated cases I advise people to convert the table of pictures as a Canvas , not using a table. just place each Image in the specific place in the doc . (the performance are much faster.

Resources