Print page ( from samples)


#1

Hi Guys,

I am using the print sample to produce printed / PDF invoices.

I am creating a header that has BS row & 3 columns
Left column blank (33% width)
Middle column with label (34% width)
Right Column image ( 33% width)

I have a container ( width 100%) with a datatable (width 100%)

I use the following code

var pdf = new jsPDF('p', 'mm', [297, 210]);

 Button1.onclick = function() {
 nsbDOMAttr(Form1, 'style.display', "none");
 nsbDOMAttr(formPrint, 'style.display', "block");
 pdf.addHTML(document.body, handlePDFdone());
 };



 function handlePDFdone() {
 pdf.save();
 nsbDOMAttr(formPrint, 'style.display', "none");
 nsbDOMAttr(Form1, 'style.display', "block");
 }

Button2.onclick=function(){
// need to hide everything except the rows and headers 
 data1 =  [["Tom","Upright",'<h1><img alt="Saturn V carrying Apollo 11" class="right" src="assets/sample.jpg" /> Apollo 11</h1><p><strong>Apollo 11</strong> was the spaceflight that landed the first humans, Americans <a href="http://en.wikipedia.org/wiki/Neil_Armstrong">Neil Armstrong</a> and <a href="http://en.wikipedia.org/wiki/Buzz_Aldrin">Buzz Aldrin</a>, on the Moon on July 20, 1969, at 20:18 UTC. Armstrong became the first to step onto the lunar surface 6 hours later on July 21 at 02:56 UTC.</p><p>Armstrong spent about <s>three and a half</s> two and a half hours outside the spacecraft, Aldrin slightly less; and together they collected 47.5 pounds (21.5&nbsp;kg) of lunar material for return to Earth. A third member of the mission, <a href="http://en.wikipedia.org/wiki/Michael_Collins_(astronaut)">Michael Collins</a>, piloted the <a href="http://en.wikipedia.org/wiki/Apollo_Command/Service_Module">command</a> spacecraft alone in lunar orbit until Armstrong and Aldrin returned to it for the trip back to Earth.</p>',"http://www.surplusanywhere.com/AppResources/ZMHsurplusAnywhereSkype2.png"],["Andy","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["John","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul4","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul5","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul6","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul7","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"],["Paul8","Upright","5555","http://cdn2-www.dogtime.com/assets/uploads/2011/01/file_23244_what-is-the-appenzeller-sennenhunde-dog-300x189.jpg"]]
  $("#DataTable2").dataTable().fnDestroy(); 
  $('#DataTable2').empty();
   table =  $('#DataTable2').DataTable( {
     //      order: [[0, 'desc']],
        //  dom: 'Bfrtip',
         responsive: true,
         autoWidth: true,
        scrollCollapse: false,
    paging: false,
    info: false,
    select: false,
    ordering: false,
    searching: false,
    autoWidth : true,

 data: data1,

        "columnDefs": [
        {
        "title" : 'Salary',
        width : "10%",
        "targets": 2,
        "data": 2
        },
        { 
        "title" : 'Link',
        width : "60%",
        "targets": 3,
        "data": 3,
        "render": function ( data, type, row, meta ) 
                    {
        return '<img src="'+data+'" style="height:150px;width:150px;"/>'
                    }
      
        },
        {
        "title" : 'Position',
        width : "10%",
        "targets": 1,
        "data": 1
        },
        { 
        "title" : 'Name',
        //width : "10%",
        "targets": 0,
        "data": 0
       
        },
        { 
        "targets": 4,
        width : "10%",
        "data": null,
        "defaultContent": "<button>Click!</button>"
        }
         

       
]


} );

This produces nearly what I need. If I reduce or expand the screen width the formatting changes ( eg the header contents move , the datatable font reduces / enlarges and the amount of text in each row changes).

The issue is here on different screen sizes I get different results.

I have tried various options / making the form modal / changing the form size type etc.

So how can I say.

Make the form fix to A4 size. ( 297mm X 210mm) so the PDF is produced at this size.

Cheers

Steve Warby

Print2PDF1.nsx (759.6 KB)


#2

Another issue is the quality of the print is low. ( the text is not at all crisp ) any setting for the quality of output ?

Cheers

Steve Warby