Блог

Главная - Вопросы по программированию - inoic/угловой: печать веб-сайта в браузере safari не закрывает вкладку после печати

inoic/угловой: печать веб-сайта в браузере safari не закрывает вкладку после печати

#angular #typescript #ionic-framework #ipad #safari

Вопрос:

В настоящее время я работаю над веб-проектом, где я должен предоставить функцию печати для определенной страницы. Эта страница является обычной страницей, которую вы можете просматривать. Просто у него другой css.

Я использую angular 10 и ionic 5. Для функции печати я использую ngx-print 1.2.1. Небольшой отказ от ответственности, я не профессионал в работе с интерфейсом.

Требование состояло в том, чтобы щелкнуть ссылку в домашней папке, распечатать определенную подстраницу и вернуться домой, чтобы пользователю не пришлось слишком много ориентироваться самостоятельно.

Мне также нужно заставить его работать с Safari на iPad, что создает некоторые проблемы, которых у меня не было с Chrome/Firefox. Моя текущая проблема заключается в том, что Safari открывает новую вкладку с содержимым печати и открывает диалоговое окно печати, но не закрывает новую вкладку. Когда я добавляю веб-сайт на рабочий стол и использую его, на нем даже не отображается вкладка/диалоговое окно печати.

Насколько я знаю, ngx-печать работает с кнопками и событиями нажатия. Поэтому добавил кнопку на страницу печати и скрыл ее с помощью css.

 <button #printButton class="print-button" printSectionId="printsection"
  styleSheetFile="assets/css/documentation.print.css" ngxPrint></button>
<ion-content>
<div id="printsection" class="print-container">
...
</div>
 
 .print-button {
  display: none;
}

Затем я нажал кнопку, когда был введен вид.

   @ViewChild('printButton') printButton: ElementRef;

  constructor(
    private readonly _userService: UserService,
    private _location: Location,
    private _alertController: AlertController
  ) {}

....
  async ionViewDidEnter() {
    if (this.printThisDocument) {
      this.printButton.nativeElement.click();
      this._location.back();
    }
  }

Это было идеально работающее решение во всех браузерах, кроме Safari. Safari не откроет диалоговое окно печати. Поэтому я пошел на компромисс со своим руководителем группы и добавил окно предупреждения.

   async ionViewDidEnter() {
    if (this.printThisDocument) {
      const alert = await this.getPrintDialog('drucken.');
      alert.present();
    }
  }

  private getPrintDialog(message: string): Promise<HTMLIonAlertElement> {
    return this._alertController.create({
      // cssClass: 'delete-confirm-alert',
      header: 'Drucken',
      message: message,
      buttons: [
        {
          text: 'Ja',
          handler: () => {
            this.printButton.nativeElement.click();
            this._location.back();
          }
        },
        {
          text: 'Nein',
          handler: () => {
            this._location.back();
          }
        }
      ]
    });
  }

This works for the original tab. It will go back to home after an option was clicked. But the new tab with print content and print dialog will stay active and open after the print dialog was closed.

I think I can’t use window.close() here, because it’s a different tab.

I have a second version, where I tried window.close() .

   private getPrintDialog(message: string): Promise<HTMLIonAlertElement> {
    return this._alertController.create({
      // cssClass: 'delete-confirm-alert',
      header: 'Drucken',
      message: message,
      buttons: [
        {
          text: 'Ja',
          handler: () => {
            this.printElem('printsection');
            this._location.back();
          }
        },
        {
          text: 'Nein',
          handler: () => {
            this._location.back();
          }
        }
      ]
    });
  }

  printElem(elem) {
    var mywindow = window.open('', 'PRINT');

    mywindow.document.write('<html><head><title>'   document.title   '</title>');
    mywindow.document.write('<link rel="stylesheet" href="/assets/css/documentation.print.css"></head><body >');
    mywindow.document.write(document.getElementById(elem).innerHTML);
    mywindow.document.write('</body></html>');
    mywindow.print();
    // setTimeout(() => {mywindow.close();}, 3000);
    mywindow.close();
    return true;
  }

Using this will close the tab before you even see it. Therefore no print dailog. When I add an delay, as you can see in the comment, it won’t close.

Кто-нибудь знает, как автоматически закрыть новую вкладку после печати или прекращения печати?

К сожалению, я ничего не могу предоставить из консоли разработчика, так как у меня нет Mac для отладки.

С уважением.

Метки: