CODEWITHSUNDEEP
angularprinting
Ross Grambo
Ross Grambo

Reputation: 157

How to make a printable page in Angular 2

Heres an image to help explain:

Example angular 2 nested components

Long story short, my client wants a printable version of just the red area to show up in a new tab, so they can print it with the browser. (Without the clutter from app.component and AllItems component)

I can't come up with a better solution than having the "All Items" component have a button that exports all of the generated html (because it's dependent on data from "All Items") into its own .html file and opening a direct link to that.

Thank you in advance!

Relevent, but Angular 1: How to use Angular to create n printable pages?

Upvotes: 4

Views: 17135

Answers (1)

Ross Grambo
Ross Grambo

Reputation: 157

Found the answer, it's a simple javascript thing that I had forgotten.

// Open used in new window
let data = document.getElementsByClassName("Items-Container")[0].innerHTML;
let newWindow = window.open("data:text/html," + encodeURIComponent(data),
  "_blank");
newWindow.focus();

I still need to add the css to it, but if anyone else finds themselves here, this is the solution for me.

EDIT: Using css to hide all of the outside parts is the better way to go.

@media print {
    header nav, footer {
       display: none;
    }
}

Upvotes: 4

Related Questions