时间戳

首页 > 解决方案 > 在 Chrome ion-modal-view 长内容打印不允许所有页面

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

问题描述

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

@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;
  }
}

它完全适用于引导模式视图。但它不适用于具有长内容的 ion-modal-view 。

奇怪的一点......如果页面是桌面模式https://d.pr/i/Rl8VFR，那么 window.print() 对所有页面都有效。但如果页面是移动模式https://d.pr/i/NO4fbI，则 window.print() 仅打印第一页。

你有什么想法解决 ion-modal-view 长内容上的这个问题吗？

提前致谢。

标签： javascriptcssprintingmodal-dialogionic-v1

解决方案

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

body { height: auto !important; }

我会帮你的。该解决方案完全适用于 ionic v1。谢谢

推荐阅读