如何在 <div> Angular 7 中打印适用于移动浏览器的元素的内部文本?



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

当桌面用户单击元素时,它会打开一个带有打印对话框的新窗口。然而,这会在移动设备上导致错误。感谢帮助:(

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

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

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

最新更新