很简单的问题。在我的 Ionic4 应用程序中具有可滚动的离子内容。我希望能够通过应用@media only print 样式来优雅地打印它。我几乎在那里，但我有一个主要问题。我无法让垂直滚动条消失以进行打印。此外，我只打印了一页，仅包含打印页面时可见的内容。我在网上搜索了解决方案，并在 Ionic3 及更早的版本中遇到并尝试了各种建议，但我还没有找到 Ionic4 的灵丹妙药。有没有人遇到过这个问题并深究了吗？
【问题讨论】：
标签： media-queries ionic4
我也在尝试解决同样的问题。我搜索了互联网，尝试了很多想法，但到目前为止都没有奏效。
也许我们可以合作解决这个问题。我会将此作为评论，但我没有足够的评分，所以系统不会让我这样做。
这是我目前发现的。在 Chrome 开发者工具中，您可以点击设置图标，然后滚动到“渲染”，然后在“模拟 CSS 媒体类型”中选择“打印”。
当我这样做时，它会显示打印视图是什么。我创建了一个单独的css文件，我们称之为print.css，在里面，有
@media print {
/* add your css styles for print here */
}
我知道我的 print.css 正在处理，因为我已经
display: none
对于 ion-header 和底部的一些选项卡，当我在 Chrome 中选择“打印”仿真时它们会消失。
有趣的是，在这种打印模式下，我在屏幕上看到了整个页面——可滚动和全部。但是，每次我尝试打印它时，都只显示一页。
但是，该页面并不总是从顶部开始。它包括当前视口。
这就是为什么，我想知道 css 中是否有一些东西试图将整个东西保留为一个页面。即，防止分页符？
我正在尝试这样的事情：
ion-content, .foo, .bar, ion-list, ion-tabs, ion-item {
break-inside : auto !important;
break-after : auto !important;
break-before : auto !important;
}
（其中 foo 和 bar 是您可能拥有的类。）
上面的这个破坏了一些东西。删除 ion-tabs、ion-list 和 ion-item 会显示整个页面。
我也在尝试以下方法。到目前为止还没有工作，但这可能是因为我没有选择正确的标签或类。
display: block !important;
height: 100%;
overflow-y: visible !important;
max-height: unset !important;
contain: none;
您可能想要尝试使用可能会阻止分页符的相关标记。有些人认为这是 flexbox 或 grid 的根本原因。我很想知道如何找到根本原因。
祝你好运！如果可行，请告诉我们，我也会在我的代码中尝试。
【讨论】：
我已经通过尝试在 Ionic 4 中打印内容的铃声。我遵循的一些步骤来打印多页。
flex-box 样式列表。他们只是不会打印您希望他们如何跨页面，但如果内容适合 一个页面。
display: block; 样式的项目，以便在打印样式表中使用 page-break 属性之一ion-content，确保从它或其任何祖先或子元素中删除任何max-height 属性，以及从这些元素中删除overflow: scroll这样它就可以让您的内容从一个页面转到另一个页面。例如，在我的打印样式表上（由于 NDA 不能共享它）我在元素上有很多 overflow-y: visible 只是为了确保它显示。如果您发现某个元素会切断您的 html，那么它应该是实验的主要目标。其他一些可能有帮助的事情，但我不确定，因为我在浏览器上做了这么多的测试，只是模糊地记得 css 属性的影响是让 body 具有静态位置，以及 @987654331 @body 上说浏览器应该正常渲染，不多解释here
我不知道您的用例的具体情况，但如果您不介意放弃本机打印按钮，而只是给用户一个按钮来单击以触发打印，那么这将更易于管理不必考虑要打印的特定元素周围的所有脚手架（离子路由器、离子页和所有祖先）
如果你这样做了，那么你可以将你想要打印的所有项目放入一个div，id 为 printSection 或你喜欢的，然后负责该页面的 javascript 你可以创建自己的打印功能。在我的示例中，我将使用 angular，如果您不使用它，则执行您需要的任何 DOM 选择，以从模板中获取本机 html。
@Component({ ... })
export class Page {
// select the item holding your print content by `#property` you gave it
@ViewChild('printSection', { read: ElementRef }) printSection: ElementRef;
...
customPrint() {
const printContent = this.printSection.nativeElement;
const WindowPrt = window.open('', '', 'left=0,top=0,width=900,height=900,toolbar=0,scrollbars=0,status=0');
WindowPrt.document.write(printContent.innerHTML); // pass in the native html you got
/**
* you should probably use an observable instead of an interval for this,
* but this is just to illustrate a bug where the print would be fired before
* all the content was written
*/
const interval = setInterval(
() => {
if (document.readyState === 'complete') {
WindowPrt.document.close();
WindowPrt.focus();
WindowPrt.print();
clearInterval(interval);
}
},
200);
}
}
【讨论】：