Question

我想打印出一个由用户填写的表单。但是，按下打印按钮时，只会输出输入的默认值。我使用角度。有没有人知道如何打印填写的表单而不必将每个输入字段（我有很多）附加到docToPrint.document.write？

$rootScope.printDiv = function(divName) {
                var printContents = document.getElementById(divName).innerHTML;
                var docToPrint = window.open('', '_blank', 'width=700,height=400');
                docToPrint.document.open();
                docToPrint.document.write('<html><head><link rel="stylesheet" type="text/css"/></head><body onload="window.print()">' + printContents + '</html>');
                docToPrint.document.close();
};

Answer 1

我不知道这是否符合你的要求，但我有这件作品

 ng-click="window.print();"

这将打开包含所有视图的打印屏幕，从那里可以打印它

Answer 2

在角度中，我们有$ scope的概念，它位于控制器和视图之间。那么你可以做什么，可以在控制器中创建一个表单模型，并为每个字段设置一些默认值。现在你创建一个表单并用它绑定该模型。因此，每个字段都将填充一些您在控制器中给出的默认值。现在，当您按下“打印”按钮时，模型将具有所有更新的值，其余将是默认值。

示例如下：

控制器

angular.module('mainModule', [])
.conroller('formCntrl', function($scope) {
   $scope.model = {
      name: 'Dummy Name',  // these are some default values
      age: 20,
      address: 'XyZ',
      profession: 'Abc'
   };

   $scope.submitForm = function() {
      /* here you can play with $scope.model which will have all updated values and if any field is not touched then it will have default value for it which is given above  */
   };

});

HTML

<html>
<body ng-app="mainModule">
   <div ng-controller="formCntrl">
   <form name="regForm">
     Name: <input type="text" ng-model="model.name" name="name" /><br>
     Age: <input type="text" ng-model="model.age" name="name" /><br>
     Address: <input type="text" ng-model="model.address" name="name" /><br>
     Profession: <input type="text" ng-model="model.profession" name="name"/><br>
    <input type="button" value="Print" ng-click="submitForm()" />
   <form>
   </div>
</body>
</html>

Answer 3

这将适合您的要求。 https://dzone.com/articles/building-simple-angularjs

     myApp.controller('LoginCtrl', function($scope,$window) {
         $scope.print=function(){       
         $window.print();
       }

打印表单提交

3 个答案:

控制器

HTML