Question

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

Answer 1

您在here中有一个类似的案例。他们有一个有关angularJS和angular的示例。

然后，您可以通过访问this帖子来查看ctrl + p键的按下情况。

Answer 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代替要包围的部分。

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

2 个答案: