<div class="container" ng-app="MyApp" ng-controller="MyController" layout="column">
<md-toolbar layout="row" layout-padding>
<div flex><strong>Populate Template With Form Data</strong></div>
</md-toolbar>
<md-content layout="row" flex>
<md-content flex layout-padding>
<h3>Entity Description (Result)</h3>
<div>My name is <strong>{{entity.owner}}</strong> and I ride <em>{{entity.name}}</em>, contact me via <a href="mailto:{{entity.email}}">{{entity.email}}</a> </div>
</md-content>
<md-sidenav class="md-sidenav-right" md-is-locked-open="true" md-component-id="right" md-whiteframe="4" layout-padding>
<h3>Entity Data (Input)</h3>
<md-input-container>
<label>Name</label>
<input ng-model="entity.name" md-autofocus>
</md-input-container>
<md-input-container>
<label>Owner</label>
<input ng-model="entity.owner">
</md-input-container>
<md-input-container>
<label>Email</label>
<input ng-model="entity.email" type="email">
</md-input-container>
<!-- Saving doc with jsPDF library, http://rawgit.com/MrRio/jsPDF/master/docs/ -->
<md-button class="md-raised md-primary" ng-click="savetopdf()">Save to <strong>pdf</strong></md-button>
<!-- Saving txt with FileSaver.js library, https://github.com/eligrey/FileSaver.js -->
<md-button class="md-raised md-primary" ng-click="savetotxt()">Save to <strong>txt</strong></md-button>
<!-- Saving doc with FileSaver.js library, http://www.effectiveui.com/blog/2015/02/23/generating-a-downloadable-word-document-in-the-browser/ -->
<md-button class="md-raised md-accent" ng-click="savetodoc()">Save to <strong>doc</strong></md-button>
</md-sidenav>
</md-content>
</div>
.container{
height: 100%;
}
(function(){
'use strict';
angular.module('MyApp', ['ngMaterial', 'ngMessages'])
.controller('MyController', function($scope, $mdSidenav) {
$scope.entity = {
name: 'Ferrari Testarossa',
owner: 'Fedor Loenko',
email: 'ipsum@lorem.com'
};
// Function for pdf saving
$scope.savetopdf = function(){
var doc = new jsPDF();
doc.setFontSize(10);
doc.text('My name is '+$scope.entity.owner+' and I ride '+$scope.entity.name+', contact me via '+$scope.entity.email, 20, 25);
doc.save($scope.entity.owner+' rides '+$scope.entity.name+'.pdf');
};
// Function for txt saving
$scope.savetotxt = function(){
var text = 'My name is '+$scope.entity.owner+' and I ride '+$scope.entity.name+', contact me via '+$scope.entity.email;
var filename = $scope.entity.owner+' rides '+$scope.entity.name;
var blob = new Blob([text], {type: "text/plain;charset=utf-8"});
saveAs(blob, filename+".txt");
};
// Function for doc saving
$scope.savetodoc = function(){
var htmlString =
'<!doctype html>' +
'<html xmlns=\"https://www.w3.org/TR/REC-html40/\" xmlns:office=\"urn:schemas-microsoft-com:office:office\" xmlns:word=\"urn:schemas-microsoft-com:office:word\">' +
'<head>'+
'<xml>'+
'<word:worddocument>'+
// '<word:view>Print</word:view>'+
// '<word:zoom>90</word:zoom>'+
'<word:donotoptimizeforbrowser/>'+
'</word:worddocument>'+
'</xml>'+
'<meta charset=\"utf-8\">'+
'<title>Templating Test</title>'+
'</head>'+
'<body>' +
'<span>My name is </span>' +
$scope.entity.owner +
'<span> and I ride </span>' +
$scope.entity.name +
'<span>, contact me via </span>' +
$scope.entity.email +
'</body>' +
'</html>'
;
var byteNumbers = new Uint8Array(htmlString.length);
for (var i = 0; i < htmlString.length; i++) {
byteNumbers[i] = htmlString.charCodeAt(i);
}
var blob = new Blob([byteNumbers], {type: 'text/html'});
var filename = $scope.entity.owner+' rides '+$scope.entity.name;
window.saveAs(blob, filename+'.doc');
};
});
})();
Also see: Tab Triggers