Skip to main content

Convert Html PAge to PDF using Canvas

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


Comments

Post a Comment

Popular posts from this blog

Installing Admin LTE in Laravel

step 1:  Reference---  https://hdtuto.com/article/laravel-56-adminlte-bootstrap-theme-installation-example Step 2 : after completion first reference view this link:    https://github.com/JeroenNoten/Laravel-AdminLTE step 3:  For more additional information view this link:   https://github.com/jeroennoten/Laravel-AdminLTE#2-updating Now you are done statically : https://adminlte.io/blog/integrate-adminlte-with-laravel Steps: 1:  composer require jeroennoten/laravel-adminlte 2: 'providers' => [ .... JeroenNoten\LaravelAdminLte\ServiceProvider::class, ], 3: php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=assets 5: php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=config 6: php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=views 7: for admin pannel php artisan ...

Integration of adminlte admin pannel in laravel 6 adn above

Create new laravel project : laravel new projectname --auth Steps to integrate admin pannel i.e. adminlte 1.  composer require jeroennoten/laravel-adminlte 2.  php artisan adminlte:install 3.  php artisan adminlte:install --only=auth_views 4. php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\AdminLteServiceProvider" --tag=views Filemanager: https://unisharp.github.io/laravel-filemanager/installation 1.  composer require unisharp/laravel-filemanager:~1.8 php artisan vendor:publish --tag = lfm_config php artisan vendor:publish --tag = lfm_public 3.  php artisan route:clear php artisan config:clear you will get a problem regarding file relode after upload and to solve do this fix it on vendor\unisharp\laravel-filemanager\src\Controllers\UploadController.php replace line 60 return count($this->errors) > 0 ? $this->errors : parent::$success_response; by return count($this->errors) > 0 ? ...

Setting and Getting Cookie and Session in laravel

First of all lets discuss many ways to set cookies inside controller : $response = new Response ( redirect ( 'news' )); //$minute=5; // $response->withCookie(cookie('name', 'virat', $minutes)); $response -> withCookie ( cookie ()-> forever ( 'news_id' , $newsid )); return $response ; // or // Cookie::queue('news_id', $news_id, 15); // return redirect('news'); // or // return redirect('news')->withCookie(cookie('name', 'virat', $minutes)); use Illuminate\Support\Facades\ Request ; use Illuminate\Http\ Response ; use Illuminate\Support\Facades\ Cookie ; To get cookies: inside controller $val = Request :: cookie ( 'news_id' ); // dd($val); $v = Cookie :: get ( 'news_id' ); // dd($v); or $value = $request -> cookie ( 'name' ); in blade: {{ Cookie :: get ( 'news_id' ) }} Now lets see for session: Ref...