从控制器创建一个新的 html 页面 [英] Creating a new html page from controller
问题描述
我有一个输入表单页面，当用户提交时，它会用一些数据表更新该页面.如果用户喜欢他们所看到的内容，他们应该能够打印这些表格的清理(无页眉导航、页脚导航等)版本，并且格式完整.
I have an input form page, that when the user submits, it updates that page with some tables of data. If the user likes what they see, they should be able to print a cleaned up (no header nav, footer nav, etc) version of those tables with formatting intact.
我正在使用 bootstrap 和 angularjs 创建表格.我想要做的是，当用户单击打印"时，我的角度控制器从生成的页面(在名为模板"的 div 中)获取所需的内容并将其插入到一个新的 html 页面中，然后我可以打开在新窗口中进行打印.
I'm creating the tables using bootstrap and angularjs. What I'm trying to do is that when the uset clicks 'print', my angular controller grabs the desired content from the generated page (in a div called 'template') and inserts it into a new html page that I can then open in a new window for printing.
我创建了一个指令，我希望它允许我使用 $compile 来嵌入我的数据:
I created a directive that I was hoping would allow me to use $compile to transclude my data:
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 文件中.
But this doesn't seem to do what I expect. And it feels like I'm doing it wrong. The idea was that because my data tables require bootstrap script and css references I need to include those in my printtemplate.html file.
有没有更简单/更好的方法来做到这一点，或者我错过了什么?
Is there an easier/better way to do this, or what am I missing?
推荐答案
与其尝试创建一个全新的页面，不如简单地将特定的 css 用于 print 媒体.
Instead of trying to create a whole new page, why not simply use specific css for print media.
一如既往，w3 是开始http://www.w3 的最佳位置.org/TR/CSS2/media.html
As always the w3 is the best place to start http://www.w3.org/TR/CSS2/media.html
这篇关于从控制器创建一个新的 html 页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
