可滚动离子内容的Ionic4打印媒体查询
很简单的问题。在我的Ionic4应用程序中有可滚动的离子内容。我希望能够通过应用@media only print样式来优雅地打印它。我快到了，但我有一个大问题。我不能让垂直滚动条消失打印。此外，我只打印了一页，只包含打印页面时所看到的内容。我已经在网上搜索过解决方案，并在Ionic3和更早的时候遇到并尝试了各种建议，但我还没有找到Ionic4的神奇之处。有没有人遇到并弄清楚这件事的真相？
回答 3
Stack Overflow用户
发布于 2019-09-10 18:19:20
我一直在尝试打印Ionic 4中的内容。我遵循的一些步骤打印多页。
- 删除任何
flex-box样式列表。他们只是不会打印你想让他们在页面上使用的方式，尽管如果内容适合于页面中的，它们对我来说是很好的。 - 对于要按页分隔的项，最好是使用
display: block;样式的项，以便在打印样式表中使用其中一个分页属性。 - 例如，在包含列表的项中，
ion-content确保从它或它的任何祖先或子元素中移除任何max-height属性，并从这些元素中移除overflow: scroll，以便允许内容从一个页面转到另一个页面。例如，在我的打印样式表(因为NDA不能共享它)上，我在元素上有很多overflow-y: visible，只是为了确保它显示出来。如果您找到了一个切断html的元素，那么它应该是实验的主要目标。 - 您可以在开发工具中模拟打印，我发现它很有用，对迭代这里有一个链接很好
其他一些可能有帮助的事情，但我不确定，因为我在浏览器上做了这么多测试，只是模糊地记得css属性对身体的影响是什么，有一个静态的位置，以及有contain: none在身体上，说浏览器应该呈现为正常的，没有更多的解释这里。
我不知道用例的具体内容，但是如果您不介意先使用本机print按钮，然后给用户一个按钮来触发打印，那就更容易管理了，因为您不必考虑要打印的特定元素(离子路由器、离子页和所有祖先)周围的所有脚手架。
如果这样做，那么您可以将您想要打印的所有项目放入一个div中，其中包含一个id为printSection或您喜欢的内容，然后负责该页面的javascript可以创建您自己的打印函数。在我的例子中，我将使用角，如果您没有使用它，那么预制件任何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);
}
} Stack Overflow用户
发布于 2022-03-28 13:38:55
我按照这个过程解决了这个问题
- 首先，从离子内容中删除要打印的内容.使用div而不是ion-content (影子-dom是使用阻止CSS类的离子内容实现的)
- 打印时，还需要在离子页上强制使用下面的CSS (在默认情况下，它最初设置为位置:绝对值)。
- 在我的例子中，我是从一个模态组件中打印出来的，该组件有一个默认的类"show- modal“。我可以这样按目标在多个页面上打印
@media print {
.ion-page {
left: 0;
right: 0;
top: 0;
bottom: 0;
display: block;
position: relative;
flex-direction: column;
justify-content: space-between;
contain: none;
overflow: visible;
z-index: 0;
}
.scroll-content,
ion-modal.show-modal,
ion-modal.show-modal .modal-wrapper,
ion-modal.show-modal .ion-page.show-modal,
ion-modal.show-modal .ion-page.show-modal > ion-content,
.ion-page.show-modal,
.ion-page.show-modal > ion-content,
ion-tab,
ion-tabs,
.app-root,
body {
contain: none;
position: relative !important;
height: auto;
overflow: visible;
}
}Stack Overflow用户
发布于 2020-06-12 03:31:45
我也在努力解决同样的问题。我已经浏览过互联网，并尝试了许多想法，但到目前为止都没有奏效。
也许我们可以合作解决这个问题。我会把这作为一个评论，但我没有足够的评分，所以系统不会让我。
这就是我到目前为止发现的。在中，您可以单击设置图标，然后滚动到“呈现”，并在“模拟CSS媒体类型”上选择“print”。
当我这样做时，它会显示打印视图是什么。我创建了一个单独的css文件，我们将其命名为print.css，其中有
@media print {
/* add your css styles for print here */
}我知道我的print.css正在被处理因为我
display: none 对于离子头和底部的一些选项卡，当我在Chrome中选择"print“模拟时，它们就会消失。
有趣的是，我看到整个页面--可滚动的，所有的--在这个打印模式下出现在屏幕上。然而，每次我试图打印它，只有一页显示。
然而，这一页并不总是从顶部开始的。它包括当前的视图。
这就是为什么，我想知道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;您可能希望尝试使用可能会阻止分页中断的标记。有些人认为，这是柔性箱或网格的根本原因。我很想知道如何找出根本原因。
祝好运!如果有什么效果，让我们知道，所以我也将尝试在我的代码。
https://stackoverflow.com/questions/57864068
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号