如何使用 angular-screenshot 打印整个 DOM 元素？答案

【问题标题】：How can I print a whole DOM element using angular-screenshot?如何使用 angular-screenshot 打印整个 DOM 元素？
【发布时间】：2018-07-10 23:47:46
【问题描述】：

我已经尝试在网页上复制/粘贴示例代码：https://weihanchen.github.io/angular-screenshot/ 问题是他们为此使用了一个完整的控制器，而我的控制器由视图分隔。这就是我将它们添加到我的“主要”js的方式：

    .state("main.pallet", {
        url: "/palletize",
        templateUrl: "app/views/pallet.html",
        data: {pageTitle: 'Entarimado.'},
        controller: "Pallet",
        resolve: {
            deps: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load({
                    name: 'TepaPrime',
                    insertBefore: '#ng_load_plugins_before', // load the above css files before '#ng_load_plugins_before'
                    files: [
                        'app/js/filters/filters.js',
                        'app/js/directives/numericFormat.js',
                        'app/js/directives/trimText.js',
                        'app/js/directives/nextOnEnter.js',
                        'app/js/factories/crud.factory.js',
                        'app/js/controllers/modals/palletContent.js',
                        'app/js/controllers/pallet.js',
                        'app/js/services/printDocument.js'
                    ]                    
                });
            }]
        }
    })

这是我的 printDocument.js，我在其中粘贴了示例中的代码（并对其进行了修改以使其正常工作）：

'use strict';
function appController($scope) {
  var self = this;
  self.fullScreenApi;
  self.downloadFull = downloadFull;
  this.downloadFull = function() {
      if (self.fullScreenApi) self.fullScreenApi.downloadFull();
   }
   return downloadFull;
}
angular
    .module('TepaPrime')
    .service('printDocument', appController);

然后我通过这样做将它注入到我的视图控制器中：

function Pallet($rootScope, $scope, $state, $timeout, $uibModal, $http, $filter, crud, sessionService, printDocument) {
  ...
}

问题是它不起作用，它使整个页面崩溃并抛出此错误：

错误：[$injector:unpr] http://errors.angularjs.org/1.5.0/$injector/unpr?p0=copeProvider%20%3C-%20%24scope%20%3C-%20printDocument

我真的很感激一些帮助，因为我已经被这个问题困扰了很长时间并且似乎无法更接近解决方案。

【问题讨论】：

向模块添加角度截图依赖：angular.module("TepaPrime", ["angular-screenshot"])
已经试过了，还是不行。它不再显示错误，但页面保持空白。

标签： javascript html angularjs screenshot angularjs-3rd-party

【解决方案1】：

经过很长时间的挣扎，我能够通过更改 html 来修复它

      <button class="btn btn-info" ng-if="appCtrl.isFullOpen" ng-click="appCtrl.downloadFull()">
        <i class="material-icons">Descargar tabla</i>
      </button>

收件人：

      <button class="btn btn-info" ng-if="appCtrl.isFullOpen" ng-click="appCtrl.fullScreenApi.downloadFull()">
        <i class="material-icons">Descargar tabla</i>
      </button>

问题在于 downloadFull() 函数在 fullscreenApi 中。

【讨论】：