带有角度的打印预览的 CSS 布局更改答案

【问题标题】：CSS layout change for print preview with angular带有角度的打印预览的 CSS 布局更改
【发布时间】：2016-08-28 22:53:07
【问题描述】：

我开发了一个单页 Angular 应用程序。我有一个复杂的视图，我需要不同的页面打印格式。有一个打印按钮，当我单击它时，布局应该会更改以很好地适应所有内容。使用不同的模板不是一种选择，因为在后端运行一些humongus 查询以获取数据需要一两分钟。（也不要为了打印预览而刷新页面）

现状： 当我单击按钮时，我触发了一个函数，将 url 参数添加到当前 url 以检查我是否处于打印预览模式，以便我可以使用浏览器控件返回到如果我想。 $location.search({ 'printPreview': 'True'}); 也使用了document.getElementById('print').style.display = 'none'; 这个聚焦来隐藏打印视图上的打印预览按钮。没有运气！ :(

工作流程：

我在以下方面需要帮助：了解通过保持在同一页面上实现此目的的最佳方法。任何额外的代码帮助也会很棒。请帮忙！！

【问题讨论】：

标签： javascript html css angularjs frontend

【解决方案1】：

您可以非常轻松地在 Angular 中动态更改样式表。

<link rel="stylesheet" ng-href="{{ CurrentCSSFilename }}">

在你的控制器中：

$scope.CurrentCSSFilename = "web-view.css";

当用户点击打印按钮时，它会运行一个改变CurrentCSSFilename范围变量的函数：

$scope.ClickPrint = function() {
    $scope.CurrentCSSFilename = "print-view.css";
}

【讨论】：

【解决方案2】：

使用 CSS。无需 javascript。

.some-class {
    width: 40%;
}

@media print {
    .no-print {
        display: none !important;
    }

    .print-only {
        display: block !important;
    }

    .some-class { /* width and color got changed in print */
        width: 60%;
        color: #ff0 !important;
    }
}

HTML：

<!-- will not show up on print -->
<div class="no-print">Click here to print</div>

<!-- will only show up on print -->
<div class="print-only">Page number 1/2</div>

【讨论】：

谢谢！但是您需要 javascript 才能返回正常视图，对吗？
如果您在谈论两种不同的视图/状态，那么是的，我建议使用 ui router 使用父状态和子状态。 $stateProvider.state("main", {templateUrl: "main.html"}).state("main.print", {templateUrl: "print.html"}); 在这种情况下，main.print 是 main 的子代。这样做将允许您使用不同的模板，同时共享相同的控制器。它将帮助您以更大的灵活性实现您想要做的事情。
我正在尝试打印一个有 50 列的表格，但在打印文档模板上它只显示 20 列，其余的都被隐藏了。你能帮我解决这个问题并在单行中显示整个表格的列吗？