Как перенаправить на шаблон печати с помощью Knockout js

Question

Я использую шаблоны в своем представлении, и я хотел бы направить пользователя к шаблону печати.Общее использование:

<div data-bind="template: { name: 'print' }"></div>

, но я хочу, чтобы этот скрипт появлялся один, а не с другим содержимым.Можно ли перейти к моему сценарию печати вместо того, чтобы тянуть сценарий в div, что и делает приведенный выше код.Спасибо.

Answer 1

• Вы можете поместить логическое значение вокруг «нормального» содержимого, которое скрывает все остальное, когда шаблон печати активен.<div data-bind="visible: noprint()">main site</div>

• Перенаправить в другой файл, содержащий макет печати со своим собственным стилем.

• Создайте страницу так, чтобы печать-css фактически отображает страницу как ожидалось.Убедитесь, что стили печати всегда находятся внизу вашей css

  @media print { body { color: #000; background-color: #fff; } }

• Немного более продвинутая работа с компонентами, вы можете использовать те же данные дляотображая все, что вам нужно, но когда пользователь ожидает печати, просто переключите компонент screenlayout на компонент printlayout

  <a href="#" data-bind="click: () => layoutType = 'screenlayout'">screen</a> <a href="#" data-bind="click: () => layoutType = 'printlayout'">print</a> <div data-bind="component: layoutType"></div>

Answer 2

Вот что я закончил делать ...

var viewModel = {
    selectedTemplate: ko.observable('ViewContent'),

    subTemplate: function (item) {
        this.selectedTemplate(item);
    },

    goBack: function () {
        this.selectedTemplate('ViewContent');
    },

    printLandscape: function () {
        this.selectedTemplate('PrintContent');
        alert("Please change page orientation to Landscape");
        javascript: window.print();
    },
}
ko.applyBindings(viewModel);

.print {
    margin: 0px;
    padding: 0px;
    width: 900px; /* or width: 9.5in; */
    height: 670px; /* height: 7in; */
    clear: both;
    page-break-after: always;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script id="getContent" type="text/html">
    <!-- ko if: ($root.selectedTemplate() == "ViewContent") -->
        <div data-bind="template: { name: 'viewContent' }"></div>
    <!-- /ko -->
    <!-- ko if: ($root.selectedTemplate() == "PrintContent") -->
        <div data-bind="template: { name: 'printContent' }"></div>
    <!-- /ko -->
</script>

<script id="viewContent" type="text/html">
<div>Here's the view or display content</div>
<a href="#" data-bind="click: function () { $root.subTemplate('PrintContent') }">Print</a>
</script>

<script id="printContent" type="text/html">
<div><a href="#" data-bind="click: $root.printLandscape">Print</a>&nbsp;|&nbsp;<a href="#" data-bind="click: $root.goBack">Back</a></div>
<div class="print">Here's the print content</div>
</script>
<div data-bind="template: { name: 'getContent' }"></div>