如何在可用于移动浏览器的Angular 7中打印<div>元素的innerText?

时间:2018-12-12 11:10:58

标签: javascript angular ecmascript-6 bulma

我正在一个个人项目中,我想要一个按钮来打印<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]); 
      });
  }

当桌面用户单击该元素时,它会打开一个带有打印对话框的新窗口,但是,这会导致移动设备出错。感谢帮助:)

1 个答案:

答案 0 :(得分:0)

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

i

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