如何在 angular 4 中更改弹出窗口 window 的字体？

Question

我正在使用 angular 并且我有一个弹出窗口 window 来打印页面。这是我 component.ts 中的代码：

 headContents = document.getElementById('head-section').innerHTML;
innerContents = document.getElementById('inner-section').innerHTML;
signContents = document.getElementById('sign-section').innerHTML;
popupWin = window.open('', '_blank', 'top=0,left=0,height=auto,width=auto');
// console.log(popupWin)
popupWin.document.open();
popupWin.document.write(
  '<html><head><style> body{width: ' + this.width + '; height: ' + this.height + ';}' +
  '.head{padding-left: ' + this.date_padding_left + '; padding-right: ' + this.date_padding_right + '; padding-top: ' + this.date_padding_top + ' ; padding-bottom: ' + this.date_padding_bottom + '; direction: rtl} ' +
  '.inner{padding-left: ' + this.text_padding_left + '; padding-right: ' + this.text_padding_right + '; padding-top: ' + this.text_padding_top + '; padding-bottom: ' + this.text_padding_bottom + '; text-align: justify; direction: ' + this.rtl + ';white-space: pre-wrap; word-wrap: break-word;width: 166mm;max-height: 873px} ' +
  '.sign{padding-left: ' + this.sign_padding_left + '; padding-right: ' + this.sign_padding_right + '}</style>' +
  '</head><body onload="window.print();window.close()"><p class="head">' + headContents + '</p> <p class="inner">' + innerContents + '</p> <p class="sign">' + signContents + '</p></body></html>');
popupWin.document.close();

现在我想更改 .inner class 字体。我该怎么做？

Answer 1

好的，我刚刚试过了，它似乎有效。所以，现在你的 ts 文件应该看起来像这样（确保将你的字体文件放在 src/assets 文件夹中）：

import { Component } from '@angular/core';

@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})
export class AppComponent {
   title = 'app';
   headContents = "Header";
   innerContents = "Contents pending...";
   signContents = "Signs, signs, Everywhere signs!";

   showWin()
   {
      let popupWin = window.open('', '_blank', 'top=0,left=0,height=auto,width=auto');

      popupWin.document.open();
      popupWin.document.write('<html><head><style>'+
      '@font-face {font-family:myFont;src:url("assets/Pacifico.ttf");}'+
      '.inner{font-family: myFont;font-size: 40pt;text-align: justify;}'+
      '</style></head><body onload="window.print();window.close()"><p class="head">' + this.headContents + '</p> <p class="inner">' + this.innerContents + '</p> <p class="sign">' + this.signContents + '</p></body></html>');
      popupWin.document.close();
   }
}

你的 html 文件应该有这样的内容：

<button (click)="showWin()">Show Window</button>

附带说明一下，您可能希望使用绑定从 HTML 文件中获取值，而不是使用 document.getElementById()

如何在 angular 4 中更改弹出窗口 window 的字体？

how to change a popup window's font in angular 4?

html

popupwindow

angular