plaetzchen79 / ngx-printer-demo Goto Github PK

View Code? Open in Web Editor NEW

29.0 29.0 7.0 2.92 MB

A simple Angular service to print a window, parts of a window (div), images, HTMLElements or Angular Objects

License: MIT License

JavaScript 4.80% TypeScript 75.76% CSS 2.80% HTML 16.64%

angular angular-library print printerservice printing service

ngx-printer-demo's People

Contributors

Stargazers

Watchers

Forkers

lrodentx ngoquoc manuelinilo kisali simis00873 maurisa11 abhikkrishnan

ngx-printer-demo's Issues

Option to add a custom/prefilled filename when saving as pdf

Hello! First of all thanks for this awesome plugin, it works really well.
I'm looking for a way to add a custom filename so the user doesn't have to enter it when saving the html to a pdf. Is this already possible?

Thanks in advance

ngxPrintItemButton with divID is not printing the dropdown values

I am trying to use the print divID value and it is not printing the dropdown values. Please suggest me any property changes .

ngx-printer element is not higing in Chrome after print dialog on current page

Everything was ok before Google Chrome updated to v.109.0.5414.75
I have downloaded and installed Chrome v.108.0.5359.125 and it works.

I use the next code (ngx-printer: 0.7.0):

print(): void {
    this.printerService.printOpenWindow = false;
    this.printerService.printDiv('check');
    this.printerService.printOpenWindow = true;
}

It works in Firefox and Edge, but in Chrome (after update) element ngx-printer is not hidding after print dialog.

<!DOCTYPE html> == $0
<html lang="en" class="plt-tablet pit-desktop md hydrated" mode="md">
<head>...</head>
<body class="backdrop-no-scroll">
    <bk-root _nghost-sjq-c166 ng-version="9.1.13">...</bk-root>
    <script src="runtime.js" type="module"></script>
    <script src="polyfills.js" type="module"></script>
    <script src="stvles.js" type="module"></script>
    <script src="vendor.js" type="module"></script>
    <script src="main.js" type="module"></script>
    <scribe-shadow id="shadow-root-scribe-elem" style="position: fixed; width: 0px; height: 0px; top: 0px; left: 0px; z-index: 2147483647; overflow: visible;">...</scribe-shadow>
    <ngx-printer _nghost-sjq-c134 class="ngx-printer">...</ngx-printer>
</body>
</html>

Demo-page has the same behaviour.
What can I do to fix this?

Cancel print window not removing default CSS on first page load.

I'm using printDivToCurrent() function to print a specific div (print div to current window).

Issue - When I click on cancel print button in print preview popup, then the webpage becomes non-responsive & default CSS not removing from the DOM. The elements that are hidden during printing doen't come again in the DOM.

But when I reload the same page & again check the print functionality then on cancelling the print preview dialog box, webpage comes to normal state, hidden elements becomes visible & functionality works fine.

The issue is also reproducible in official demo - https://plaetzchen79.github.io/

Check the screencast here - https://nimb.ws/T1Dwrq

To check the scenario :

Open the demo page in incognito.
Click on "Print div to current window" button.
When you click on cancel button in print preview dialog box, the webpage not return to normal state (Other DOM elements are not visible).
Now, reload the same page & again repeat the same process. But this time webpage return to normal state & other elements are now visible.

Add basic support for pdf

open pdfs
print pdfs (hard to get events..)

Add directive to indicate an item visually as printable

useExistingCss does not work

I tried useExistingCss and styleSheetFile both are not working. only printStyle is working fine. Here is my code

....

Update to Angular 9

Unable to install ngx-printer

Error trying to install ngx-printer.

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"~13.1.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^15.0.0" from [email protected]
npm ERR! node_modules/ngx-printer
npm ERR! ngx-printer@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR!
npm ERR! C:\Users\hp\AppData\Local\npm-cache_logs\2023-01-30T04_38_24_455Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\hp\AppData\Local\npm-cache_logs\2023-01-30T04_38_24_455Z-debug-0.log
PS E:\asol\AlphaSalesOnlineFrontEnd\ALphaSales> npm i ngx-printer
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree

Upgrade to Angular 8

Upgrade project to Angular 8

Remove deprecated ComponebtFactoryResolver

use createComponent instead

Print selective items inside a div

Hi Plaetzchen79,
Is there any option to print selective elements inside a div.

Ex:

This shouldnt be printed This should be printed

In my project i have an usecase where i have to skip printing certain elements in my html. Can u pls let me know whether there is an option to do this. In ng-print library we have a directive called noPrint, which will allow us to hide certain elements in Print.

Image and canvas not loaded when print

i want to print div content that includes images and canvas in it

Image is not loading in print preview

Hi,
I am having difficulty in printing image.Image is loading alternative times if i use property printOpenWindow: true else blank preview is getting displayed.
Image i tried is from this https://ng-bootstrap.github.io/#/components/carousel/examples

const printContent = document.getElementsById("image-tag"); this.printerService.printImg(printContent.src);

unable to print from same window/tab

i want to print page without opening new tab so i had set root config as

in app.module
NgxPrinterModule.forRoot({printOpenWindow: false});

featureModule have sales feature so i have to print bill so code as
in sales component i have call print component from shared module
<button (click)="printHTMLElementToCurrent()">print</button> <app-print #printContainer> </app-print>

sales.component.ts

`
@ViewChild('printContainer', {read: ElementRef}) PrintComponent: ElementRef | undefined;

constructor(private printerService: NgxPrinterService) { }
ngOnInit(): void {
}
printHTMLElementToCurrent(): void {
this.PrintComponent &&
this.printerService.printHTMLElement(this.PrintComponent.nativeElement);
}
`
i need help to fixed this issue

angular dependency

"
"dependencies": {
"@angular/animations": "~10.0.0",
"@angular/cdk": "^11.0.0",
"@angular/common": "~10.0.0",
"@angular/compiler": "~10.0.0",
"@angular/core": "~10.0.0",
"@angular/forms": "~10.0.0",
"@angular/platform-browser": "~10.0.0",
"@angular/platform-browser-dynamic": "~10.0.0",
"@angular/router": "~10.0.0",
"@prajna10/sd_design": "0.0.29",
"ngx-printer": "^0.9.1",
"rxjs": "~6.5.5",
"tslib": "^2.0.0",
"zone.js": "~0.10.3"
}

Add directive ngxPrintItemButton

If you want to print a single item from the list of ngxPrintItems without ts you can use the diretive ngxPrintItemButton. You have to know the id of the printItem.

Upgrade to Angular 12 and enable evy

Enabe Ivy to partial

https://angular.io/guide/creating-libraries#publishing-your-library

Update to Angular 10

-to be done

printDiv does not work on mobile browsers

I have tried the demo https://plaetzchen79.github.io/ and I must say all work really well.

However, I need to use this component on a mobile angular project. And, I found that the printDiv does not work on mobile browsers (on phones), such as Chrome.

All I get is a new window with a printer icon, and a message which says "There was a problem printing the page. Please try again."

Update to Angular 11

Upgrade to Angular 11
set Ivy as default

Compatible with Ivy (angular 10).

getting error just after importing in app.module

"This likely means that the library (ngx-printer/lib/ngx-printer.module) which declares NgxPrinterModule has not been processed correctly by ngcc, or is not compatible with Angular Ivy. Check if a newer version of the library is available, and update if so. Also consider checking with the library's authors to see if the library is expected to be compatible with Ivy."

White Space on top

This library works wonder, but whenever I print my angular component, in all the pages once the PDF is finished there is always a really big white space that takes around 15% of the view, how can that whites space be eliminated ?

Update to Angular 13

how can i pass data to the tamp and print it ??

how can i pass data to ng-template #PrintTemplate and print it???????????????????????????????????

Print directly without preview via printservice is not defined in the documentation

I'm using ngx-printer repo for printing an angular component via print service but i'm not able to find the documentation for sending a print job directly to the printer.

NullInjectorError: No provider for NgxPrinterService!

For angular 8

The `printOpenWindow` can not load the global style.css

My Angular app is using the default PathLocationStragey

And in one of my page, says /masterPage/detail/:id, I have this printing functionality set up:

this._printerService.timeToWaitRender = 1500;
this._printerService.printOpenWindow = true;

this._printerService.printDiv('myDivId');

Issue: when it opens the print window, it has the following stylesheet tag in the generated HTML document:
<link rel="stylesheet" href="styles.76979927b9a7bc88a048.css">

However, the browser tries to look at {hostname}/masterPage/detail/styles.76979927b9a7bc88a048.css instead of {hostname}/styles.76979927b9a7bc88a048.css.

I actually checked the implementation of copyCss functionality and everything looks great:

ngx-printer-demo/projects/ngx-printer/src/lib/ngx-printer.service.ts

Lines 254 to 267 in 99b0fad

 private copyCss(printWindowDoc: Document) { 

 const links = document.querySelectorAll('link'); 

 const styles = document.querySelectorAll('style'); 

 const targetHead = printWindowDoc.getElementsByTagName('head')[0]; 

 links.forEach(link => { 

 targetHead.appendChild(document.importNode(link, true)); 

 }); 

 styles.forEach(style => { 

 targetHead.appendChild(document.importNode(style, true)); 

 }); 

 }

However, it only copies the link and style tags, and ignores everything else. What I think it should do is to copy also the base tag which tells the browser what would be the relative path of the CSS resources to load from.

Does the mobile browser not work properly?

I tried to access the Demo using Google Chrome on my Android phone, but found that it didn't work as well as it did on my computer browser.

	private copyCss(printWindowDoc: Document) {

	const links = document.querySelectorAll('link');
	const styles = document.querySelectorAll('style');
	const targetHead = printWindowDoc.getElementsByTagName('head')[0];

	links.forEach(link => {
	targetHead.appendChild(document.importNode(link, true));
	});

	styles.forEach(style => {
	targetHead.appendChild(document.importNode(style, true));
	});
	}