I'm dealing with an ionic 5 app that was built as a web app. There's no mobile component to it. I need to allow users to print a page. When I have a print button and associated with a function like the one below, it only prints the viewable area. <pre class="prettyprint"><code>printPage() { window.print(); } </code></pre> Given the amount of content on the screen, I can tell that this document should be 2-3 pages long. I see that there's a <code>cordova-plugin-printer</code> plugin, but it's meant for printing from a mobile device. What's the proper way to get the entire DOM printed?

That might happen, because of a scrollable div, or something like that, nested in the body. To get around this, you could manually select what to print by doing something like this answer from another StackOverflow question: <pre class="prettyprint"><code>printPage() { var mywindow = window.open('', 'PRINT', 'height=400,width=600'); mywindow.document.write('<html><head><title>' + document.title + '</title>'); mywindow.document.write('</head><body>'); mywindow.document.write(document.getElementById('#printArea').innerHTML); mywindow.document.write('</body></html>'); mywindow.document.close(); // necessary for IE >= 10 mywindow.focus(); // necessary for IE >= 10*/ mywindow.print(); mywindow.close(); } </code></pre> Link to the original answer: https://stackoverflow.com/a/2255438/9150652

I recently faced a similar situation and I ended up creating an angular component in my project, which is inspired by e-ngx-print. The only limitation is that you will have to pass a <code>*.css</code> file to this component for the section you want to print. I have created a stackblitz for you, have a look and see if it's useful for you.

Ionic 5 with Angular 9: How to Print from Desktop (not mobile device)

Tags:

javascript

angular

ionic-framework

I'm dealing with an ionic 5 app that was built as a web app. There's no mobile component to it.

I need to allow users to print a page. When I have a print button and associated with a function like the one below, it only prints the viewable area.

printPage() {
  window.print();
}

Given the amount of content on the screen, I can tell that this document should be 2-3 pages long.

I see that there's a cordova-plugin-printer plugin, but it's meant for printing from a mobile device.

What's the proper way to get the entire DOM printed?

777

asked Jul 30 '20 18:07

Ben Downey

2 Answers

That might happen, because of a scrollable div, or something like that, nested in the body.

To get around this, you could manually select what to print by doing something like this answer from another StackOverflow question:

printPage() {
    var mywindow = window.open('', 'PRINT', 'height=400,width=600');

    mywindow.document.write('<html><head><title>' + document.title  + '</title>');
    mywindow.document.write('</head><body>');
    mywindow.document.write(document.getElementById('#printArea').innerHTML);
    mywindow.document.write('</body></html>');

    mywindow.document.close(); // necessary for IE >= 10
    mywindow.focus(); // necessary for IE >= 10*/

    mywindow.print();
    mywindow.close();
}

Link to the original answer: https://stackoverflow.com/a/2255438/9150652

183

answered Oct 18 '22 21:10

MauriceNino

I recently faced a similar situation and I ended up creating an angular component in my project, which is inspired by e-ngx-print.

The only limitation is that you will have to pass a *.css file to this component for the section you want to print.

I have created a stackblitz for you, have a look and see if it's useful for you.

answered Oct 18 '22 22:10

GoWin

Related questions
                            
                                How to test HTML content with React testing library
                            
                                How to do React forceUpdate() to a child component?
                            
                                Using a hook in react to change boolean and get a callback
                            
                                Warning: next-head-count is missing
                            
                                Angular - RxJS : afterViewInit and Async pipe
                            
                                finding sequential in string using javascript
                            
                                How to convert float values in JSON to two decimal place using Javascript
                            
                                Google cloud function not handling sigint
                            
                                What could cause Electron to not show any errors?
                            
                                ESLint error (Unexpected token ...) on JavaScript reduce to dictionary
                            
                                Netlify is displaying the html version of my Gatsby website
                            
                                How to handle ref.current.contains() on a children that use ReactDOM.createPortal()?
                            
                                Connecting input range arc thumb to slider with curve
                            
                                Merge Two Lists LeetCode
                            
                                How to call an asynchronous JavaScript function?
                            
                                Conditional Rendering in react js functional component
                            
                                Dealing with IOS web browsers not caching audio
                            
                                Gatsby Plug-in: How Can I Take a Component as a Plug-In Option?
                            
                                Getting an error 'No files matching the pattern were found' when using prettier
                            
                                Changing the CSS for a React component has effect on all other pages

Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!

Donate Us With