Angularjs 如何在ion视图中打印网页

我正在为我的web应用程序使用。每个页面都使用离子视图显示。我想打印图表（或将其另存为pdf）

这是我的密码

<ion-view title="Report">
<ion-nav-buttons side="right">
    <button menu-toggle="left"class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
<ion-content class="has-header">
  <b style="padding:10px;">Patient Background Report</b>
    <div class="text-center item"><canvas id="line" class="chart chart-line" data="agedata" colours="colours"labels="labels" legend="true" series="series" click="onClick">
        </canvas>
        <b>Age</b>
    </div>
    <a href="javascript:window.print()" class="button button-success" style="margin-bottom:20px;">Print</a>
</ion-content>

病人背景报告
年龄

我正在使用Chrome浏览器。当我点击打印按钮时，它返回

“打印预览失败”

---

如何打印此页面？

我可以通过添加以下CSS来打印我的Ionic应用程序：

@media print {
  .scroll-content {
    position: relative;
  }

  .pane {
    position: initial;
  }
}

---

不要问我为什么这样做有效；我只知道它对我有用，我希望它也能帮助别人

我知道我参加聚会可能会晚一点，但我希望这会对以后的其他人有所帮助

此问题的解决方案是覆盖默认的离子组件样式。

在默认情况下，某些属性可能会破坏我们的打印预览，例如：位置、高度、溢出

打印时必须记住：

• 高度：100%

• 位置：固定/绝对/相对

  （在某些情况下）

• 溢出：隐藏

是“棺材里的最后一颗钉子”。

所有容器都不应设置它们

对于位置，可以使用静态，对于高度，可以使用固定值，或者只保留一个自动选项。始终记得设置溢出：可见。否则我们想要打印的东西可能会被隐藏

---

您也可以阅读我的短文，以便更深入地了解基于ionic的应用程序的打印：

我将ionic用于我的web应用程序，而不是androidapp@MarkVeenstra