从控制器创建一个新的 html 页面答案

【问题标题】：Creating a new html page from controller从控制器创建一个新的 html 页面
【发布时间】：2013-11-09 03:34:57
【问题描述】：

我有一个输入表单页面，当用户提交时，它会使用一些数据表更新该页面。如果用户喜欢他们看到的内容，他们应该能够打印格式完整的这些表格的清理版本（没有页眉导航、页脚导航等）。

我正在使用 bootstrap 和 angularjs 创建表格。我想要做的是，当 uset 点击“打印”时，我的角度控制器从生成的页面（在一个名为“模板”的 div 中）获取所需的内容并将其插入到一个新的 html 页面中，然后我可以打开在新窗口中打印。

我创建了一个指令，希望允许我使用 $compile 来嵌入我的数据：

app.directive('printTemplate', function () {
    return {
        templateUrl: 'app/partials/printtemplate.html',
        replace: true,
        transclude: true,
        restrict: 'A'
    };
});

在我的控制器中：

$scope.printTemplate = function () {
    var page = angular.element(template).contents();
    var newpage = $compile("<html><body><div print-template>" + page + "</div></body></html>")($scope);
    var win = window.open();
    win.document.write(newpage);
    //win.print();
};

但这似乎并没有达到我的预期。感觉就像我做错了。这个想法是因为我的数据表需要引导脚本和 css 引用，所以我需要将它们包含在我的 printtemplate.html 文件中。

有没有更简单/更好的方法来做到这一点，或者我错过了什么？

【问题讨论】：

print 媒体的自定义 CSS 怎么样？ w3.org/TR/CSS2/media.html
也许我遗漏了一些东西，但这只是让我可以设置打印页面的样式？我仍然需要从模板 div 中创建的 angularjs 构建 html 并将其插入新页面。到那时，也许媒体会派上用场。
一旦用户决定打印，用于打印的 css 将应用到当前页面和当前 dom 树（即渲染的角度）。这意味着在大多数情况下，您只需要创建用于打印的 css 即可。
好的，我明白你的意思了。我正在使用引导程序 3，因此将 .hidden-print 类添加到我不想显示的 dom 元素效果很好。但我仍然需要弄清楚如何以所见即所得的方式打印我的表格
好吧，Nicolas ABRIC 或 NuclearGhost，你们中的一个应该回答这个问题，这样我就可以给你要点 - 媒体打印的东西，结合 bootstrap 3 的媒体 css 效果很好。

标签： angularjs angularjs-directive

【解决方案1】：

与其尝试创建一个全新的页面，不如简单地为print 媒体使用特定的css。

一如既往，w3 是最好的起点http://www.w3.org/TR/CSS2/media.html

【讨论】：