如何在单击 ctrl+p 时自定义 angular4 页面打印答案

【问题标题】：how to customize angular4 page print on clicking ctrl+p如何在单击 ctrl+p 时自定义 angular4 页面打印
【发布时间】：2018-12-24 21:07:45
【问题描述】：

我有一个 angular4 应用程序，在浏览器上按 ctrl+p 时，我需要自定义打印页面视图而不是默认视图。我需要打印的页面只有角度组件，我尝试在每个组件 css 中编写 @media print 但它不起作用。

【问题讨论】：

标签： angular css angular5

【解决方案1】：

here 中也有类似情况。他们有一个关于 angularJS 和 angular 的例子。

然后，您可以通过访问this 帖子来检查 ctrl+p 按键。

【讨论】：

【解决方案2】：

您可以简单地使用名为 printThis.js 的插件并节省大量编码时间。

将脚本添加到您的 html：

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/printThis/1.14.0/printThis.min.js"></script>

添加打印按钮并给它一个id，您将与 printThis 一起使用：

<button id="print-button-id" type="button" class="btn btn-success">Print</button>

然后使用此脚本打印您的页面：

$('#print-button-id').on("click", function () {
      $('#print-section-id').printThis({
            debug: false,
            importCSS: true,
            importStyle: true,
            printContainer: true,
            loadCSS: "your-custom-style-for-printing.css",
            pageTitle: "Your print title",
            removeInline: false,
            printDelay: 333,
            header: null,
            formValues: true
      });
});

最后，正如您从脚本中看到的那样，它正在打印带有 id="print-section-id" 的元素，因此您需要使用包含要打印的部分的元素的 id 来代替。

【讨论】：