<HTML>
<HEAD>
    <TITLE>jsPDF HTML Example with html2canvas for Multiple Pages PDF</TITLE>
    <style>
        #doc-target {
            font-family: sans-serif;
            -webkit-font-smoothing: antialiased;
            color: #000;
            line-height: 1.6em;
            margin: 0 auto;
        }

        #outer {
            padding: 72pt 72pt 72pt 72pt;
            border: 1px solid #000;
            margin: 0 auto;
            width: 550px;
        }
    </style>
	
	<script src="../js/jspdf.umd.min.js"></script>
	<script src="../js/html2canvas.min.js"></script>
	
<script>
window.jsPDF = window.jspdf.jsPDF;
function generatePdf() {
    let jsPdf = new jsPDF('p', 'pt', 'letter');
    var htmlElement = document.getElementById('doc-target');
    // you need to load html2canvas (and dompurify if you pass a string to html)
    const opt = {
        callback: function (jsPdf) {
            jsPdf.save("Test.pdf");
            // to open the generated PDF in browser window
            // window.open(jsPdf.output('bloburl'));
        },
        margin: [72, 72, 72, 72],
        autoPaging: 'text',
        html2canvas: {
            allowTaint: true,
            dpi: 300,
            letterRendering: true,
            logging: false,
            scale: .8
        }
    };

    jsPdf.html(htmlElement, opt);
}
</script>
	
</HEAD>
<BODY>
<form class="form-sample"> 
    <div id="container">
        <p>
            <button class="btn" onclick="generatePdf()">Download PDF</button>
        </p>
        <div id="outer">
            <div id="doc-target">
                <h1>jsPDF HTML Example</h1>
				<img src="../../pages/images/logo.jpg" class="img-responsive col-xs-12" width="125" height="125" style="float:right">
                <div id="lipsum">
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam tempor purus a congue
                        ullamcorper.
                        Nunc
                        vulputate eros nunc, sed molestie orci interdum ut. Mauris non tristique neque, ut tincidunt
                        lectus.
                        Nunc sollicitudin eros sapien. Donec metus ex, vestibulum vel pharetra in, convallis id diam.
                        Sed eu
                        tellus pulvinar, fringilla est ut, feugiat nibh. Etiam eget commodo risus. Proin faucibus
                        elementum
                        enim, ut hendrerit nisi convallis at. Pellentesque volutpat, purus faucibus varius tincidunt,
                        nulla
                        erat
                        convallis lacus, eu accumsan felis mauris eget velit. Vestibulum a neque purus. Vestibulum in
                        ultricies
                        justo. Fusce dapibus, sapien a mollis luctus, risus dolor hendrerit ex, in semper justo enim sed
                        ante.
                        Morbi ut urna et velit finibus vehicula. Vivamus elementum egestas ultrices. Proin rutrum orci
                        odio,
                        sit
                        amet hendrerit diam vulputate a.
                    </p>
                </div>
				
				<table>						
						<tr>
						<td width="20%"><b>Indomaret</b></td>
						<td><b>PO Number</b></td>						
						</tr>
						<tr>
						<td width="20%"><b>Jl Ancol Barat I</b></td>
						<td><b>123456789</b></td>						
						</tr>
						<tr>
						<td width="20%"><b>Jakarta</b></td>
						<td><b>Date</b></td>						
						</tr>
						<tr>
						<td width="20%"><b>0881222229</b></td>
						<td><b>2024-08-08</b></td>						
						</tr>						
				</table>
				
            </div>
        </div>
    </div>  
</form>	
</BODY>
</HTML>