pdfMake with html2Canvas - Form Angular Material Design

Mirar: https://jsfiddle.net/martinmurciegomartinmurciego/eoazrwLd/2/

by Martin Murciego

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.20/vfs_fonts.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-route.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/svg-assets-cache.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.4/angular-material.js"></script>
<script src="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id ="FRM_ANG_EDIT_ENTREGABLE" class="ocultar" ng-app="MyApp" ng-controller="FormAngCtrl">
    <button ng-click="export()">export</button>
    <div style="width:100%;" ng-cloak="" id="Div_1">
        <fieldset class="standard">
            <legend>1. EDIT ENTREGABLE</legend>
            <md-content>
                <section id="SECTION_EDIT_ENT_0" layout="row"  layout-wrap  layout-align="space-around start">
                    <md-input-container id="INPUT_EDIT_CODIGO_ENT_id" class="md-block"  flex="20">
                        <label>Cod Entregable</label>
                        <input id="txt_INPUT_EDIT_CODIGO_ENT" type="" ng-change="EnviarEvento({id:& #34; INPUT_EDIT_CODIGO_ENT_id & #34;    ,valor:MDINPUT0})"...

CSS

.selectdemoSelectHeader {
  /* Please note: All these selectors are only applied to children of elements with the 'selectdemoSelectHeader' class */ }
  .selectdemoSelectHeader .demo-header-searchbox {
    border: none;
    outline: none;
    height: 100%;
    width: 100%;
    padding: 0; }
  .selectdemoSelectHeader .demo-select-header {
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(0, 0, 0, 0.14), 0 0 0 0 rgba(0, 0, 0, 0.12);
    padding-left: 10.667px;
    height: 48px;
    cursor: pointer;
    position: relative;
    display: flex;
    align-items: center;
    width: auto; }
  .selectdemoSelectHeader md-content._md {
    max-height: 240px; }


/*
Copyright 2016 Google Inc. All Rights Reserved. 
Use of this source code is governed by an MIT-style license that can be foundin the LICENSE file at https://material.angularjs.org/HEAD/license.
*/

JavaScript

// http://pdfmake.org/playground.html
var app = angular
        .module('MyApp', ['ngMaterial', 'ngMessages', 'material.svgAssetsCache']);

app.controller('FormAngCtrl', function ($scope, $element) {
    $scope.data = {"jaun": "asdasda"};
    $scope.vegetables = ['Corn', 'Onions', 'Kale', 'Arugula', 'Peas', 'Zucchini'];
    $scope.searchTerm;
    $scope.clearSearchTerm = function () {
        $scope.searchTerm = '';
    };
    // The md-select directive eats keydown events for some quick select
    // logic. Since we have a search input here, we don't need that logic.
    $element.find('input').on('keydown', function (ev) {
        ev.stopPropagation();
    });

    $scope.export = function () {
        var data_1;
        var data_2;
        var data_3;
        var data_4;
        html2canvas(document.getElementById('Div_1'), {
            onrendered: function (canvas) {
                data_1 = canvas.toDataURL();
            }
        });

        html2canvas(document.getElementById('Div_2'), {
            onrendered: function (canvas) {
                data_2 = canvas.toDataURL();
            }
        });
        
        html2canvas(document.getElementById('Div_3'), {
            onrendered: function (canvas) {
                data_3 = canvas.toDataURL();
            }
        });
        
         html2canvas(document.getElementById('Div_4'), {
            onrendered: function (canvas) {
                data_4 = canvas.toDataURL();
            }
        });

        html2canvas(document.getElementById('Div_5'), {
            onrendered: function (canvas) {
                var data_5 = canvas.toDataURL();
                var docDefinition = {
                    content: [{
                            image: data_1,
                            width: 500,
                        },
                        {
                            image: data_2,
                            width: 500,
                        },
                        {
                ...