Media queries Ionic4打印媒体查询可滚动的ion内容

这个问题很简单。在我的Ionic4应用程序中具有可滚动的ion内容。我想通过应用

@media only print

样式来优雅地打印它。我快到了，但我有一个大问题。我无法使垂直滚动条消失以便打印。此外，我只打印过一页，只包含打印页面时看到的内容。我在网上搜寻解决方案，在Ionic3和更早的版本中遇到并尝试了各种建议，但我还没有找到Ionic4的灵丹妙药。有没有人遇到过这件事并追根究底了？

我一直在尝试在Ionic 4中打印内容。我打印多页时遵循的一些步骤

• 删除所有

  flex-box

  样式化列表。他们只是不会按你所希望的方式在页面上打印，尽管如果内容适合页面，他们对我来说效果很好
• 对于要按页面分隔的项目，最好是

  显示：块样式化项，以便在打印样式表中可以使用其中一个属性

• 例如，在包含列表的项目上，

  ion content

  确保从其或其任何祖先或子元素中删除任何

  max height

  属性，并从这些元素中删除

  overflow:scroll

  ，以便允许内容从一页转到另一页。例如，在我的打印样式表上（由于NDAs而无法共享），我在元素上有大量的

  overflow-y:visible

  ，只是为了确保它显示出来。如果你发现一个元素切断了你的html，它应该是实验的主要目标
• 您可以在开发工具中模拟打印，我发现它很有用，对迭代很有好处

其他一些东西可能会有所帮助，但我不确定，因为我在浏览器间做了这么多测试，只模糊地记得css属性的影响是使主体具有静态位置，以及在主体上有

contain:none

来表示浏览器应该呈现为正常的，只需稍作解释

我不知道您的用例的细节，但是如果您不介意前面提到原生打印按钮，只给用户一个按钮来点击触发打印，那么这将更易于管理，因为您不必考虑围绕您想要打印的特定元素的所有支架（离子路由器、离子页面和所有祖先）

如果您这样做了，那么您可以将所有要打印的项目放入id为

printSection

或您喜欢的

div

中，然后负责该页面的javascript可以创建您自己的打印函数。在我的示例中，我将使用angular，如果您不使用它，则执行任何DOM选择您需要从模板中获取本机html

@组件（{…}）
导出类页面{
//按您提供的`#属性`选择保存打印内容的项目
@ViewChild（'printSection'，{read:ElementRef}）printSection:ElementRef；
...
自定义打印（）{
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）；//传入您得到的本机html
/**
*你可能应该用一个可观察的，而不是一个区间，
*但这只是为了说明一个错误，在这个错误之前，打印将被触发
*所有的内容都是书面的
*/
常数间隔=设置间隔(
() => {
如果（document.readyState==='complete'）{
WindowPrt.document.close（）；
WindowPrt.focus（）；
WindowPrt.print（）；
间隔时间；
}
},
200);
}
} 

我也在尝试解决同样的问题。我在互联网上搜索过，尝试过许多想法，但迄今为止没有一个有效

也许我们可以合作解决这个问题。我会把它作为一个评论，但我没有足够的评分，所以系统不会让我

这就是我目前发现的。在Chrome开发者工具中，你可以点击设置图标，然后滚动到“渲染”，然后在“模拟CSS媒体类型”上选择“打印”

我创建了一个单独的css文件，我们称之为print.css，其中有

@media print {

   /* add your css styles for print here */

}

我知道我的print.css正在处理中，因为我

display: none 

对于ion标题和底部的一些选项卡，当我在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是您自己可能拥有的类。）

上面的操作会破坏一切。删除离子选项卡、离子列表和离子项将显示整个页面

我也在尝试以下内容。到目前为止，没有一个有效，但这可能是因为我没有选择正确的标记或类

    display: block !important;
    height: 100%;
    overflow-y: visible !important;
    max-height: unset !important;
    contain: none;

您可能想尝试使用有问题的标签，它可能会阻止页面中断。一些人建议根本原因是flexbox或grid。我想知道如何找到根本原因

---

祝你好运！如果有些东西能用，请告诉我们，我也会在我的代码中尝试。

谢谢，这很有用，有很多东西需要解包，但很高兴有东西可以尝试。我还没有使用过它，但与canius一样