Chrome ion-modal-view 长内容打印不允许所有页面

Question

我已经搜索并尝试过已发布的文章。比如

@media print {
  .modal {
    position: absolute;
    left: 0;
    top: 0;
    margin: 0;
    padding: 0;
    visibility: visible;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
  .modal-dialog {
    visibility: visible !important;
    /**Remove scrollbar for printing.**/
    overflow: visible !important;
  }
}

它完全适用于 bootstrap 模态视图。但它不适用于内容很长的 ion-modal-view 。

一个奇怪的点...如果页面是桌面模式https://d.pr/i/Rl8VFR, then window.print() is working for all pages. but if page is mobile mode https://d.pr/i/NO4fbI，那么window.print() 只打印第一页。

你有什么办法解决离子模态视图长内容的这个问题吗？

提前致谢。

Answer 1

通过简单修改打印样式解决了问题。当离子模式被激活时，<body> 标签有 height: 100% 属性。这是不允许打印所有页面的原因。所以当你在 ionic modal view 上使用 print 时，你必须设置

body { height: auto !important; }

这会有所帮助。该解决方案完全适用于 ionic v1。谢谢

Chrome ion-modal-view 长内容打印不允许所有页面

On Chrome ion-modal-view long contents printing is not allow all pages

javascript

css

printing

modal-dialog

ionic-v1