Question

下面的代码尝试复制页面的某个部分，基本上没有按钮的表单复制到新文档中。完成后，目标是打印（）它。

问题是.write（）没有捕获表单的内容/值只有html标签。字段已复制但为空。

我想知道是因为我使用了document.write无法处理的angular inherit $ scope和ng-model功能？！

我要打印的表单有此标记 <form name="ticketForm" id="printForm" class="form-horizontal" novalidate>

和发起呼叫的按钮是

 <button type="button"
                              class="btn btn-primary"
                              ng-click="printElem()"
                              >
                          Print
                      </button>

js文件。请注意，我必须尽一切努力逐步添加标题和其他元素，因为我想删除表格，按钮等等。我只想打印表单但仍然是CSS。

$scope.printElem  = function(){
        $log.info("i'm here");  
        //Popup($(elem).html().print());    
        var elem = document.getElementById("printForm");
        $log.info(elem);
        var pwindow= window.open('', 'printForm', 'height=800,width=600');
        pwindow.document.write('<html ng-app="HelpDeskApp0" class="ng-scope"><head><style type="text/css">@charset "UTF-8";[ng\:cloak],[ng-cloak],[data-ng-cloak],[x-ng-cloak],.ng-cloak,.x-ng-cloak,.ng-hide:not(.ng-hide-animate){display:none !important;}ng\:form{display:block;}</style>');
        //window.print();
        pwindow.document.write('<link href="css/bootstrap.css" rel="stylesheet" type="text/css">' +
                '<link href="css/ashraf.css" rel="stylesheet" type="text/css">' +
            '<link href="css/json-tree.css" rel="stylesheet" type="text/css">' +
            '<link href="css/loading-bar.css" rel="stylesheet" type="text/css">' +
            '<link href="css/font-awesome.min.css" rel="stylesheet" type="text/css">' +
            '<link href="css/dx.common.css" rel="stylesheet" type="text/css">' +
            '<link href="css/dx.light.css" rel="stylesheet" type="text/css">');
        pwindow.document.write('<script src="lib/jquery-2.1.4.js"></script>' +
            '<script src="lib/angular.min.js"></script>'+
            '<script src="lib/angular-sanitize.js"></script>'+
            '<script src="lib/angular-resource.js"></script>'+
            '<script src="lib/globalize.min.js"></script>'+
            '<script src="lib/ui-bootstrap-tpls.js"></script>'+
            '<script src="lib/angular-route.js"></script>'+
            '<script src="lib/bootstrap.js"></script>'+
            '<script src="lib/dx.all.js"></script>'+
            '<script src="js/app.js"></script>'+
            '<script src="js/controllers.js"></script>'+
            '<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">'+
            '<meta name="apple-mobile-web-app-capable" content="yes">'+
            '<meta name="apple-mobile-web-app-status-bar-style" content="black"> </head>');
        pwindow.document.write('<body><nav class="panel panel-primary"> <!-- navbar navbar-default-->'+
            '<div class="container-fluid">'+
            '<!-- Brand and toggle get grouped for better mobile display -->'+
            '<div class="menubar" role="navigation">'+
                '<div class="">'+
                    '<div class="menubar-content-left">'+
                        '<a><img src="images/mgpi.png" height="50" width="50">&nbsp;<b style="color: #428bca">MGPI - Beta Version</b></a>'+
                    '</div> '+
                '</div>'+
            '</div>'+

            '<!-- Collect the nav links, forms, and other content for toggling -->'+
            '<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">'+
            '  <ul class="nav navbar-nav">'+
                '<li><a href="#/home">Help Desk</a></li>'+
              '</ul>          '+

            '</div><!-- /.navbar-collapse -->'+
            '</div><!-- /.container-fluid -->'+
            '</nav>'+

            '<!-- ngView:  --><div ng-view="" class="container-fluid  ng-scope"><div ng-controller="homeController" class="ng-scope">'+
            '<div class="container bs-docs-container">  '+
            '<div class="row">                '+
                    '<div class="row margin-top">'+
                    '<br>'+
                    '</div>'+
                    '<div class="row margin-top margin-left">'+
                    '<div class="col-sm-12 top-buffer">');
        pwindow.document.write('<div class="well well-lg" style="height: 250vh; background-color:#ADD8E6">'+
         elem.innerHTML + '<br></div> </div></div></div> </div></div></div></body></html>');

        $log.info(pwindow.document);
        //pwindow.print();
        //pwindow.close();

    };

我使用elem.innerHTML，elem.value等多种方式进行了尝试，但没有捕获字段的值。虽然原始表单具有值，但表单将被写入并因此使用空值打印。这是一个截屏。有什么想法吗？谢谢！ enter image description here

Answer 1

我的第一个评论有点粗鲁。我道歉。在我的辩护中，我早上一直在那里和我用完牛奶来制作更多的咖啡。： - （

我认为如果你只是：

，你的方法会好得多

创建了一条新的打印路线。
设置新的部分或页面模板。您可以创建一个服务，通过路径上的resolve属性将当前表单值传递给新页面。
您在控制器中的打印功能就像：window.open('http://yourbasesite/print/123abc');

这种方法更容易维护和测试（你必须承认，它更漂亮）。

那就是说，如果你仍然遇到种族问题，我不会感到惊讶。使用window.open - window.print - window.close，没有Angular的上下文。因此，当您生成页面并让我们说页面完全呈现需要几毫秒时，窗口可能已经处于关闭状态。如果您已采用此方法，则可以考虑更改基页上的按钮以阅读＆＃34;打印预览＆＃34;并在弹出窗口中添加一个单独的打印按钮，实际上是window.print - window.close部分。

Answer 2

document.write的新窗口通常最终会非常黑客。我想到的一个选择是JSON.stringify $ scope的相关部分，并把它放在你写的东西中。这将允许您将其传递到新页面。在页面加载时，它将被解释为正常，然后插入页面并由您分配给某个变量。

如果您在完成角度运行时也遇到麻烦，您可能需要致电$compile(mywindow.document)($scope)，如果它已经没有那样，那么应该再次调整页面上的角度

Document.write没有捕获值 - Angularjs项目

2 个答案: