gilf/ngprint

AngularJS directive to enable browser printing

ngprint's Issues

Print Section Not Clearing After Print

I'm testing in Chrome. If I print or cancel the print window, window.onafterprint is never called.
I suggest modifying the code with some of these tips:
http://stackoverflow.com/questions/13598790/onbeforeprint-and-onafterprint-is-not-working-in-chrome-and-ie
Or here:
https://www.tjvantoll.com/2012/06/15/detecting-print-requests-with-javascript/

This can actually be solved easily by just clearing the innerHTML just before getting the element by id on line 18.

Bower version tag missing

Please could you add a Bower version tag to this repository so that we can specify it by version in our project's bower.json? There are currently no versions available :(

Directive printing all the page

I'm trying to use this directive but its printing all the entire page, even when I set an specific id. How to print only an specific div?

Printing Object Twice

Just installed your directive and while I am getting a print view, the div that it's supposed to print is being included twice (in a direct stack on top of each other).

Prints the whole document and not the just the print section

The code appends the printSection to the whole document Dom and hence it prints the whole document, just not the div section.
`
var printSection = document.getElementById('printSection');

    // if there is no printing section, create one
    if (!printSection) {
        printSection = document.createElement('div');
        printSection.id = 'printSection';
        document.body.appendChild(printSection);
    }

`

Element-id attribute doesn't work.

Hi,
i am using ngPrint directive in my case print-element-id="id-of-element" doesn't works.
its print whole view instead of element view.

Missing bower's dependency on angular

Bower file doesn't declare angular as a dependency. This may cause some race conditions with reference injection tools such as gulp-inject.

What I have to do if I print header and footer of my print content

I have to print a html table which created anularjs ng-repeat where have lots of data. So it require more than one page. Now I have to attach a header and a footer in every printing page? How to do it, Please explain????

table not displaying properly

Everything looks good, except table. How do i fix this??

@gilf @alimalik91

Main content not loading after adding ngPrint as a dependency.

Hi

After loading the necessary .js and .css files, I added the dependency to the controller but the main content besides the bootstrap header does not load and shows no errors on the browser console when hitting the print button. Any idea why this might be?

I am using Angular 1.4.8 and all my code in the the form of
angular.module('clients', ['ngPrint']).etc..etc..

instead of var clientes = angular.module('clientes', ['ngPrint']).etc..

as instructed in your code. I although I have hundreds of instructions though.
Shouldn't it work the same way?

Thank you

Printing a div with exact styling as that of UI

HI,
I am using ngPrint as mentioned in your documentation. But what i see it prints just the blank page. The UI with data is not printed on paper

ngDialog + ngPrint

Is there any example how to use ngPrint with ngDialog?
I have a weird behaviour. I open a dialog which exceeds the window size (have to scoll for full content) and implemented ngPrint
i attached an report and the screenshot where i click on the print button, to see, the first page is complete nonsense and i see the background where the dialog was opened?
As you see i refer to the correct div, which should be printed.

`




ngprint.pdf

Comparison Report

<span class="border border-primary"></span>
<div>
    <b>API:</b> {{selectedApi.name}}</br>
    <b>Version:</b> {{selectedVersion.number}}</br>
    <b>Revision:</b> {{selectedFile.timestamp}}</br>
</div>
<b><p class="p-3 mb-2 bg-primary text-white text-center">COMPARED TO</p></b>
<div>
    <b>API:</b> {{comparedTo(selectedComparisonReport).api}}</br>
    <b>Version:</b> {{comparedTo(selectedComparisonReport).version}}</br>
    <b>Revision:</b> {{comparedTo(selectedComparisonReport).revision}}</br>
</div>
</br>
<h2>Change Log:</h2>
<div>
    <h3 class="newEndpoints">New Endpoints: {{selectedComparisonReport.paths.new.length}}</h3>
    <h3 class="removedEndpoints">Removed Endpoints: {{selectedComparisonReport.paths.removed.length}}</h3>
    <h3 class="changedEndpoints">Changed Endpoints: {{selectedComparisonReport.paths.changed.length}}</h3>
</div>
</br>
<h2>Changes:</h2>
<div class="p-3 mb-2 bg-success text-dark"><b>What's new</b></div>
<ul>
    <div ng-repeat=" new in selectedComparisonReport.paths.new">
        <li><b>{{new.endpoint}}</b> // {{new.description}}</li>
    </div>
</ul>

<div class="p-3 mb-2 bg-danger text-dark"><h3><b>What's removed</b></h3></div>
<ul>
    <div ng-repeat=" removed in selectedComparisonReport.paths.removed">
        <li><b>{{removed.endpoint}}</b> // {{removed.description}}</li>
    </div>
</ul>

<div class="p-3 mb-2 bg-warning text-dark"><h3><b>What's changed</b></h3></div>
<div>
    <ul>
        <div ng-repeat="changed in selectedComparisonReport.paths.changed">
            <br>
            <li><b>{{changed.endpoint}}</b> // {{changed.description}}</li>
            <ul>
                <div ng-if = "changed.parameter != null">
                    <p class="text-info">Parameter</p>
                    <ul>
                        <div ng-repeat="parameter in changed.parameter">
                            <li><b>{{parameter.change}}</b> // {{parameter.description}}</li>
                        </div>
                    </ul>
                </div>
                <div ng-if = "changed.returntype != null">
                    <p class="text-info">Return Type</p>
                    <ul>
                        <div ng-repeat="returntype in changed.returntype">
                            <li><b>{{returntype.change}}</b> // {{returntype.description}}</li>
                        </div>
                    </ul>
                </div>
            </ul>
            <br>
            -------------------------------------------------------------------
        </div>
    </ul>
</div>

`

styling

Hi. My page is displaying as like this please help me

Print CSS Not Being Rendered

Print CSS is not being rendered. No matter what I do, whether using tables or divs my entire print layout is jumbled. I have added "medial='all'" to all my stylesheets and even used media queries but still... and yes I have included your css.

Not printing all pages in Mozilla firefox

Hi, I was trying to print a div which also has three more div inside, but it is printing only 1 page not all three. Is there any fix for this?

Printing a tc-angular-chartjs

How can i print my Chart created by tc-angular-chartjs library

can you see my example to explain it
http://jsfiddle.net/0ow8rpuv/

some advice?

print bootstrap modal view only

Hello, i tried to only print bootstrap modal view, but it prints the whole site.
Is it possible to just print the modal view without the rest of the page ?

AngulaJS view with ngDialog

This is great directive. I am able to print the ngDialog however, it misses other styles. I need to print this with bootstrap and other css files that we are using in application.

Any ideal on how to integrate other style sheets with this directive?

ngPrint with angular-qrcode

https://github.com/monospaced/angular-qrcode

qr code not showing on the print. can anyone help me. thanks

Add ng-Print to bower repo

Hi Gil,

could you add ng-Print to bower repo for easier access/dependency management?
https://bower.io