從桌面列印時，如何有效地隱藏僅用于列印的側邊選單？我已經嘗試將 CSS 添加到 ion-menu 中，這似乎有效，但有些東西仍然會被選單的大小（如標題）所抵消。如果從瀏覽器呼叫列印，我確信還有其他含義，例如不同的顯示解析度或螢屏尺寸。
我愿意接受的另一件事是擁有一個全新的頁面，僅用于列印，但我只是試圖將所有內容放在一起，這樣我就不必為同一件事維護兩個頁面。
uj5u.com熱心網友回復：
以下是我用于 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;
}
}
它應該隱藏導航組件，并允許可滾動元素保持完全可見。您可以將其放入頂級 CSS 樣式表而不是組件中，因此它適用于列印模式下的所有頁面。請注意，您可能會遇到帶有 ion-content::part 的“不匹配的選擇器”警告，但無論如何它都會起作用。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/424046.html