Search code examples
javascripthtmlangularjsscreenshotangularjs-3rd-party

How can I print a whole DOM element using angular-screenshot?


I already tried to copy/paste the example code on the webpage: https://weihanchen.github.io/angular-screenshot/ The thing is they are using a whole controller for it, and I have my controllers separated by views. This is how I add them to my "main" 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'
                    ]                    
                });
            }]
        }
    })

This is my printDocument.js where I pasted the code from the example (and modified it to get it to work):

'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);

Then I inject it in my view's controller by doing this:

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

The problem is it doesn't work and it crashes the whole page and throws this error:

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

I'd really appretiate some help, as I've been stuck with this for a long time now and don't seem able to get closer to a solution.


Solution

  • After a quite long struggle, I was able to fix it by changing the html from

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

    To:

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

    The problem is that the downloadFull() function was inside fullscreenApi.