桌面上没有侧边菜单的离子打印

Question

从桌面打印时，如何有效地隐藏仅用于打印的侧边菜单？我已经尝试将 CSS 添加到 ion-menu，这似乎有效，除了某些内容仍然被菜单的大小所抵消（例如 headers）。我敢肯定还有其他影响，例如如果从浏览器调用打印，则显示分辨率或屏幕尺寸不同。

我愿意接受的另一件事是拥有一个全新的页面用于打印，但我只是试图将所有内容放在一起，这样我就不必为同一件事维护两个页面。

Answer 1

以下是我使用 Ionic 打印可打印页面的规则：

@media print {
  ion-header, ion-backdrop, .tabbar, ion-footer, ion-content::part(background) {
    display: none !important;
  }
  ion-nav {
    contain: none;
    overflow: visible;
  }
  ion-split-pane {
    display: block;
  }
  .scroll-content,
  ion-modal,
  ion-modal .modal-wrapper,
  ion-modal .ion-page,
  ion-modal .ion-page > ion-content,
  .ion-page,
  .ion-page > ion-content,
  ion-split-pane,
  ion-tab,
  ion-tabs,
  ion-router-outlet,
  .app-root,
  ion-content::part(scroll),
  body {
    contain: none;
    position: initial;
    height: auto;
    overflow: visible;
  }
  .fixed-content, .scroll-content {
    margin-top: 0 !important;
  }
}

它应该隐藏导航组件，并允许可滚动元素保持完全可见。您可以将它放入 top-level CSS 样式表而不是组件中，因此它适用于打印模式下的所有页面。请注意，您可能会遇到 ion-content::part 的“不匹配的选择器”警告，但无论如何它都会起作用。

桌面上没有侧边菜单的离子打印

Ionic Print without Sidemenu on Desktop

ionic-framework

mobile-development

angular