5

Does anybody of you know how it's possible to print a section of my website using Angular 5? I tried finding a solution on the internet, but it seems to me that there are only solutions available for Angular.

tk421
  • 5,775
  • 6
  • 23
  • 34
reschandreas
  • 105
  • 3
  • 11
  • i think you can only print full page and not only one section, code to run is `window.print()` – Yanis-git Apr 13 '18 at 17:55
  • You can try to hide stuff you don't want to print using css: `@media print {...}` – Baumi Apr 13 '18 at 18:02
  • there's the problem with `window.print()` , it does not print the whole page if it's bigger than the screen a.k.a scrollable. Is there any chance to bypass that issue? – reschandreas Apr 13 '18 at 18:13

2 Answers2

4

There is 2 ways you can do it. 1. using print-js

npm install print-js

add the script route to the angular-cli.json

"../node_modules/print.js/src/index.js"

add the print functionality to the html file

<div class="welcome-screen-wrapper-new-test">
  <div class="welcome-screen-header" id="what-needs-to-be-printed-page">

printing section goes here

 </div>
  <div class="new-test-print">

onClick function goes here

 <div class="print-wrapper" onclick="printJS('print-page', 'html')">
      <span class="icon print"></span>
    </div>
  </div>
</div>

DONE!

  1. Insert this script tag

<script src="https://printjs-4de6.kxcdn.com/print.min.js"></script>

Add use the same html format.

GOODLUCK!

stacksonstacksonstacks
  • 687
  • 7
  • 12
0

I use another way in tsconfig.json in the compilerOptions add this property allowSyntheticDefaultImports : true, then import printjs inside of my component like that : import print from 'print-js/src/index' finally, used it

Jesus Vazquez
  • 9
  • 4