简体   繁体   中英

print a multiple divs and its data and save it in pdf

I want to copy/save/print multiple divs with its content and save it in pdf file,Using jspdf am facing issues with alignments and copying images.

Can any suggestions to print div and save it in pdf file?

<script type="text/javascript">

    function PrintElem(elem)
    {
        Popup($(elem).html());
        //alert($(elem).html());
    }

    function Popup(data) 
    {
        var mywindow = window.open('', 'my div', 'height=400,width=600');
        mywindow.document.write('<html><head><title>my div</title>');
        /*optional stylesheet*/ //mywindow.document.write('<link rel="stylesheet" href="main.css" type="text/css" />');
        mywindow.document.write('</head><body >');
        mywindow.document.write(data);
        mywindow.document.write('</body></html>');

        mywindow.document.close(); // necessary for IE >= 10
      //  mywindow.focus(); // necessary for IE >= 10

        mywindow.print();
        //mywindow.close();

        return true;
    }

</script>

Above code saving the details in xps extension,before that i want to catch the details into pdf file?it need to be like general pdf download

Please any suggestions,How to save printable data into pdf?

Go and have a look at jsPDF . This will give you some support for creating a pdf.

You can create a pdf like so HTML:

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

JavaScript:

var doc = new jsPDF();
var specialElementHandlers = {
    '#editor': function (element, renderer) {
        return true;
    }
};

$('#cmd').click(function () {
    doc.fromHTML($('#content').html(), 15, 15, {
        'width': 170,
            'elementHandlers': specialElementHandlers
    });
    doc.save('sample-file.pdf');
});

EDIT also take a look at html2canvas, there is a tutorial here . as far as i have read it, this should take some sort of a screenshot of the current DOM. Maybe this will help

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM