How to display a html page in pdf by clicking on button in angularjsOn clicking the button I just wanted to view that html page in pdf format on the browser itself without downloading and viewing it in angularjslthtmlgtltheadgt lttitlegtConvert HTML To PDFlttitlegt ltscript src34httpscodejquerycomjquery1124minjs34 integrity34sha256ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQXp8a4MxAQ34 crossorigin34anonymous34gtltscriptgt ltscript

var app angularmodule39MyApp39 appcontroller39MyController39 function scope http window scopeshowButton true scopeprintToCart function printSectionId scopeshowButton false debugger var innerContents documentgetElementByIdprintSectionIdinnerHTML var popupWinindow windowopen3939 39blank39 39width600height700scrollbarsnomenubarnotoolbarnolocationnostatusnotitlebarno39 popupWinindowdocumentopen popupWinindowdocumentwrite39lthtmlgtltheadgtltlink rel34stylesheet34 type34textcss34 href34stylecss34 gtltheadgtltbody onload34windowprint34gt39 innerContents 39lthtmlgt39 popupWinindowdocumentclose windowlocationreload ltscript type34textjavascript34 src34httpsajaxgoogleapiscomajaxlibsangularjs178angularminjs

Preview HTML as PDF in browser on Button Click in AngularJS

skp

SOLVED CLOSED ACTIVE ANSWERED
User: skp
Posted: on Nov 22, 2019 12:46 AM
Forum: AngularJS
Answer: 1
Views: 7382

How to display a html page in pdf by clicking on button in angularjs

On clicking the button I just wanted to view that html page in pdf format on the browser itself without downloading and viewing it in angularjs.

<html>
<head>
    <title>Convert HTML To PDF</title>    
    <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
</head>
<body>
    <input type="button" id="create_pdf" value="Generate PDF">
    <form class="form" style="max-width: none; width: 1005px;">
        <div id="container">
            <div id="header">
                <div id="logo">
                    <img src="http://ttpl-service.com/images/logo2.png" width="70%" alt="">
                </div>
                <div id="reference">
                    <h3><strong>Facture</strong></h3>
                    <h4>Réf. : FA1703-00001</h4>
                    <p>Date facturation : 20/03/2017</p>
                </div>
            </div>

            <div id="fromto">
                <div id="from">
                    <p>
                        <strong>Teknomec Technologies Pvt Ltd</strong><br>
                        K-23, 9th Street, <br>
                        Second floor<br><br>
                        Tél.: 01 00 00 00 00 <br>
                        Email: contact@website.com <br>
                        Web: www.website.com
                    </p>
                </div>
                <div id="to">
                    <p>
                        <strong>John Doe</strong><br>
                        10 rue Charles Rouxel<br>
                        77014 Paris
                    </p>
                </div>
            </div>
            <div id="items">
                <p>Montants exprimés en Euros</p>
                <table>
                    <tr>
                        <th>Désignation</th>
                        <th>TVA</th>
                        <th>TVA</th>
                        <th>TVA</th>
                        <th>TVA</th>
                        <th>P.U. HT</th>
                        <th>Qté</th>
                        <th>Total HT</th>
                    </tr>
                    <tr>
                        <td>ArticleArticleArticleArticleArticle</td>
                        <td>20%</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>3,99</td>
                        <td>1</td>
                        <td>3,99</td>
                    </tr>
                    <tr>
                        <td>Article2</td>
                        <td>20%</td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td>3,99</td>

                        <td>1</td>
                        <td>3,99</td>
                    </tr>                    
                </table>
            </div>
            <div id="summary">
                <div id="total">
                    <table border="1">
                        <tr>
                            <td>Total HT</td>
                            <td>3,99</td>
                        </tr>
                        <tr>
                            <td>Total TVA 18%</td>
                            <td>0,80</td>
                        </tr>
                        <tr>
                            <td>Total TTC</td>
                            <td>4,79</td>
                        </tr>
                    </table>
                </div>
                <div id="note">
                    <h4>Note :</h4>
                    <p>A finance charge of 1.5% will be made on unpaid balances after 30 days.</p>
                </div>
            </div>
            <div id="footer">
                <p>
                    Invoice was created on a computer and is valid without the signature and seal. <br>
                    www.ttpl-service.com
                </p>
            </div>
        </div>    
    </form>
</body>
</html>

skp

0 5

Reply
ANSWER
User: skp
Replied: on Nov 25, 2019 12:05 AM
Report

var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {  
 $scope.showButton = true;
    $scope.printToCart = function (printSectionId) {
        $scope.showButton = false;
        debugger;
        var innerContents = document.getElementById(printSectionId).innerHTML;
        var popupWinindow = window.open('', '_blank', 'width=600,height=700,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
        popupWinindow.document.open();
        popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="style.css" /></head><body onload="window.print()">' + innerContents + '</html>');
        popupWinindow.document.close();
        $window.location.reload();
    }
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.8/angular.min.js"></script>
<script src="MyController.js" type="text/javascript"></script>
<link href="style.css" rel="stylesheet" />   
<div ng-app="MyApp" ng-controller="MyController">
    <input type="button" value="Preview" ng-click="printToCart('printSectionId')" id="create_pdf" ng-show="showButton"/>
    <form id="printSectionId"></form>

Preview HTML as PDF in browser on Button Click in AngularJS

Company

Explore

Follow us

Contact Us