Link :https://www.quora.com/How-we-export-html-page-as-pdf-using-pure-javascript
app.js
(function(){ var form = $('.printme'), cache_width = form.width(), a4 =[ 595.28, 841.89]; // for a4 size paper width and height $('#create_pdf').on('click',function(){ $('body').scrollTop(0); createPDF(); }); //create pdf function createPDF(){ getCanvas().then(function(canvas){ var img = canvas.toDataURL("image/png"), doc = new jsPDF({ unit:'px', format:'a4' }); doc.addImage(img, 'JPEG', 20, 20); doc.save('FinalPrint.pdf'); form.width(cache_width); }); } // create canvas object function getCanvas(){ form.width((a4[0]*1.33333) -80).css('max-width','none'); return html2canvas(form,{ imageTimeout:2000, removeContainer:true }); } }());
in Html File
@extends('layouts.master')@section('css') <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" /> @endsection@section('javascript') <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script> <!-- these js files are used for making PDF --> <script type="text/javascript" src="//cdn.rawgit.com/niklasvh/html2canvas/0.5.0-alpha2/dist/html2canvas.min.js"></script> <script type="text/javascript" src="{{asset('assets/app.js')}}"></script> <script src="{{asset('assets/jspdf.js')}}"></script> <script src="{{asset('assets/pdfFromHTML.js')}}"></script> <script type="text/javascript"> $(".myselect").select2( { placeholder: "Select category" }); </script> <script> var print; function printme() { $("#hideme").hide(); $("#hidemeto").hide(); $("#hidemealso").hide(); $("#printme").show(); window.print(); reload() } function reload() { location.reload(); } </script> <script> $(document).ready(function () { $('#printme').hide(); $('#hidemeto').hide(); }); /*Global variable*/ var bill_id=0; var patient_id=""; var total_price=0; var rates=new Array(); var medicine=new Array(); var discount=0; var tmp=0; var arr_total=new Array(); var grnd_total; function graball(sel) { // bill_id=document.getElementById('bill_id').value; bill_id=sel.value; // alert(bill_id) // bill_id=JSON.stringify(bill_id); createTable(); } function createTable() { $.ajax( { method:'GET', url:'/refundbill', data:{'bill_id':bill_id}, dataType:'json', success:function (response) { total_price= response["total_price"]; patient_id=response["patient_id"]; discount=response["discount"]; document.getElementById('discount').value=discount; document.getElementById('patient_id').value=patient_id; var temp=response["rate"]; temp=JSON.parse(temp); rates=temp.split(','); var temp2=response["medicine"]; temp2=JSON.parse(temp2); // alert(temp2); medicine=temp2.split(','); } } ); // alert(patient_id); // alert(discount); /*-----table-----*/ } $("#show_detail").on('click',function () { for (count = 0; count < medicine.length - 1; count++) { $('<tr>').attr({ name: 'append' + count, id: 'append' + count }).appendTo('#happend'); $('<td ><input readonly></td>').attr({ name: 'med' + count, id: 'med' + count }).appendTo('#append' + count); $('<td><input readonly ></td>').attr({ name: 'rate' + count, id: 'rate' + count }).appendTo('#append' + count); $('<td><input onblur="calculate()"></td>').attr({ name: 'unit' + count, id: 'unit' + count }).appendTo('#append' + count); $('<td><input readonly ></td><pre>').attr({ name: 'total' + count, id: 'total' + count }).appendTo('#append' + count); medid = '#med' + count; $(medid).children().first().val(medicine[count]); rateid = '#rate' + count; $(rateid).children().first().val(rates[count]); } $('#printme').show(); $('#hidemeto').show(); }) function calculate() { unitid='#unit'+tmp; var unit_id=$(unitid).children().first().val(); var rate_id=$(rateid).children().first().val(); var total=unit_id*rate_id; total=parseFloat(total); totalid='#total'+tmp; $(totalid).children().first().val(total); var single=$(totalid).children().first().val(); single=parseFloat(single); tmp++; arr_total.push(single); /*-----table-----*/ } function totalcalc() { // alert(discount); grnd_total=0; for(var j=0; j<arr_total.length; j++) { grnd_total+=arr_total[j]; } // alert(discount); grnd_total=grnd_total-(discount*grnd_total/100); // alert(grnd_total); document.getElementById('total_price').value=grnd_total; } </script> @endsection @section('content') <div class="form-group" id="show_always"> <label for="bill_id">Bill Number</label> <select class="myselect form-control" name="bill_id" id="bill_id" onchange="graball(this)"> @foreach($bills as $bill) <option value=" {{ $bill->id}}" > {{ $bill->id}} </option> @endforeach </select> </div> <div id="hidemealso"> <button id="show_detail" class="btn btn-success">Get Data</button> </div> <div id="printme" class="printme"> <div class="form-group"> <label> Patient Id</label> <input type="text" id="patient_id" class="form-control" readonly> </div> <div class="form-group"> <label> Discount</label> <input type="text" id="discount" class="form-control" readonly> </div> <div class="form-group"> <table> <thead> <th>Medicine</th> <th>Rate</th> <th>Unit</th> <th>Total Price</th> </thead> <tbody id="happend"></tbody> </table> <br> </div> </div> <div id="hidemeto"> <input id="total_price" readonly> <button id="total_cal" class="btn btn-success" onclick="totalcalc()">Total</button> <button class="btn btn-success" onclick="printme()">Print</button> {{--<button id="create_pdf" class="btn btn-success" >PDF Generate</button>--}} <button id="create_pdf" class="btn btn-success">Convert</button> </div> @endsection
awesome
ReplyDelete