Question

我有一个Ionic页面，它是一长串问题/答案，供用户使用浏览器打印到PDF功能打印成PDF。

首先，由于Ionic组件的工作原理，我无法获取所有要打印的内容，而且我必须使用我发现here的一些CSS规则（也在最后）。

之后，我能够使用浏览器打印到pdf将整个页面打印为PDF。

或者我想。

我注意到第二个问题：并非总是将整个内容打印为PDF。有时候部分内容被切断了。

在 n 页面中，PDF必须显示我的所有问题，它决定停在 n-2 。我的最后一个 x 问题被剪下了印刷版pdf。

我做了一些测试并确定了以下行为：

（Chrome）访问该页面时，它正确显示了我的所有100个问题/答案
（Chrome）当“模拟CSS媒体”用于“打印”媒体类型时，它也会正确显示我的所有100个Q / A
（Chrome）使用Ctrl + P时，它会删除我上次的 n 问题
（边缘）使用Ctrl + P时，它仅打印第一页
（FireFox）当使用Ctrl + P时，它会打印整个内容，所有问题，但在问题之间包含一些巨大的空间

我担心我可能会走错方向打印长离子页面。如果没有，我如何在浏览器中实现稳定的行为？如何确保我的所有内容实际打印到生成的PDF？

    @media print {
    body {
        position: static;
        overflow: initial;
    }
    ion-nav {
        overflow: initial !important;
    }
    .scroll-content {
        position: relative;
        overflow:visible!important;
    }
    ion-header {
        display: none !important;
    }
    header nav, footer {
        display: none;
    }
    button {
        display: none !important;
    }
    .pane {
        position: initial;
    }
    p a {
        word-wrap: break-word;
    }
    .app-root, .ion-page, ion-app, ion-nav, ion-tab, ion-tabs {
        contain: none;
    }
    img {
        page-break-inside: avoid;
    }
    }

PDF打印时，离子页面内容被切断

0 个答案: