如何在 Angular 7 中打印适用于移动浏览器的 <div> 元素的 innerText？答案

【问题标题】：How to print the innerText of a <div> element in Angular 7 that works on mobile browsers?如何在 Angular 7 中打印适用于移动浏览器的 <div> 元素的 innerText？
【发布时间】：2018-12-12 11:10:58
【问题描述】：

我正在处理一个个人项目，我希望有一个按钮来打印<div> 元素的内容。事情在桌面上运行，但不知何故，它无法在移动设备上打印，并显示文本 “打印页面时出现问题。请重试。” Chrome 开发人员工具在检查时没有报告错误或警告在桌面上。这是我正在使用的代码：

App.component.html 的一部分：

  <div id="1">
      <h3 class="title">Some Title</h3>
      <p class="subtitle">Some Text</p>
      <a id="1-print">Print</a>
  </div>

App.component.ts 的一部分：

  const printQuote = (id) => {
      const content = document.getElementById(id).innerHTML;
      const printWindow = window.open('', 'Print', 'height=600,width=800');

      printWindow.document.write('<html><head><title>Print</title>');
      printWindow.document.write('</head><body>');
      printWindow.document.write('<h1>QuotesWorld</h1>');
      printWindow.document.write(content);
      printWindow.document.write('</body></html>');

      printWindow.document.close();
      printWindow.focus();
      printWindow.print();
      printWindow.close();
  };

  const printArr = ['1-print', '2-print', '3-print', '4-print', '5-print',
                    '6-print', '7-print', '8-print', '9-print', '10-print',
                    '11-print', '12-print', '13-print', '14-print', '15-print',
                    '16-print', '17-print', '18-print', '19-print', '20-print',
                    ... '55-print', '56-print'];

  const quotArr = [];

  for (let i = 0; i < 56; i++) {
      quotArr[i] = i + 1;
      document.getElementById(printArr[i]).addEventListener('click', () => {
          printQuote(quotArr[i]); 
      });
  }

当桌面用户单击该元素时，它会打开一个带有打印对话框的新窗口，但会导致移动设备上的错误。帮助表示赞赏:)

【问题讨论】：

“导致移动设备出错” - 什么错误？
@lucifer63 Chrome (Android) 上的打印对话框显示 “打印页面时出现问题。请重试。” Chrome 开发人员工具在检查时未报告错误或警告在我的桌面上，如果我在桌面上检查它，它就可以工作。它在移动设备上引发上述错误。在各种设备上尝试过，同样的错误。

标签： javascript angular ecmascript-6 bulma

【解决方案1】：

我没有使用此功能，但我认为问题在于您在此处为窗口大小提供的宽度和高度：

const printWindow = window.open('', 'Print', 'height=600,width=800');

尝试为移动设备创建更小的窗口。

【讨论】：