html2canvas and pdfmake create blank pdf - angularjs

I'm trying to generate a pdf from an html div with html2canvas and pdfMake but always got a blank page or just part of the div! How can I get the entire div content?
Here is the js code :
$scope.PrintFiche = function () {
var prom = new Promise(function (resolve, reject) {
html2canvas(document.getElementById('DevisImpression'), {
onrendered: function (canvas) {
var data = canvas.toDataURL("image/png");
var docDefinition = {
content: [{
image: data
}]
};
resolve(docDefinition);
}
});
})
prom.then(function (docDef) {
pdfMake.createPdf(docDef).download($scope.FicheName + ".pdf");
})
}
And the html :
<div class="Partie" id="DevisImpression">
<div id="PartieInner">
<h2 id="TitreDevis">
<b>
Etablissement du devis
</b>
</h2>
<div id="ImgVoitureDevis">
<img id="ImgVoitureAdapt" src="../../Assets/Images/test.jpg" />
</div>
<div id="OptMult">
<table id="TableDevis">
<tr>
<td class="td1">
Modèle :
</td>
<td class="td2">
{{modele.displayName}}
</td>
</tr>
<tr>
<td class="td1">
Classe :
</td>
<td class="td2">
{{classe.displayName}}
</td>
</tr>
<tr>
<td class="td1">
Moteur :
</td>
<td class="td2">
{{moteur.displayName}}
</td>
</tr>
<tr>
<td class="td1">
Couleur :
</td>
<td class="td2">
{{couleur.displayName}}
</td>
</tr>
<tr>
<td class="td1">
Jantes :
</td>
<td class="td2">
{{jante.displayName}}
</td>
</tr>
</table>
</div>
<table id="Devis">
<tr>
<th class="tdDevis2">
Options
</th>
<th class="tdDevis2">
Prix
</th>
</tr>
<tr ng-repeat="optionDev in optionsDevis">
<td class="td3">
{{optionDev.displayName}}
</td>
<td class="td4">
{{optionDev.prix}} €
</td>
</tr>
</table>
</div>
<h2 id="TotalTitre">
<b>
TOTAL
</b>
</h2>
<input type="text" id="Total" value="{{total}} €" disabled />
<br />
</div>

I have a simple solution. Try this.
$scope.downloadQuotation = function () {
html2canvas(document.getElementById('rosterPrintView'), {
onrendered: function (canvas) {
var data = canvas.toDataURL();
var docDefinition = {
content: [{
image: data,
width: 500
}]
};
pdfMake.createPdf(docDefinition).download("Roster.pdf");
}
});
};

Related

Unable to display data using AngularJS ng-repeat with table.

i am trying to display data in a table using angularJS ng-repeat. Data is not displayed. Here is my code : https://jsfiddle.net/807mxydL/. Thanks for your help
var custApp = angular.module('custApp', []);
var custApp = angular.module('custApp', []);
custApp.controller('CustomerController',function($http){
this.nm = 1;
this.custs =
[{"custid":"1","custLnm":"Joshi","custFnm":"Amod","custCellno":"9970983214","custImgPath":"1.jpg"},{"custid":"2","custLnm":"Khare","custFnm":"Aditya","custCellno":"9860178001","custImgPath":"2.jpg"},{"custid":"3","custLnm":"Bhosale","custFnm":"Ketan","custCellno":"9890567713","custImgPath":"3.jpg"},{"custid":"4","custLnm":"Joshi","custFnm":"Rohit","custCellno":"9850703451","custImgPath":"4.jpg"},{"custid":"5","custLnm":"Bhat","custFnm":"Vidyut","custCellno":"9767211811","custImgPath":"5.jpg"},{"custid":"6","custLnm":"Chhadwa","custFnm":"Viraj","custCellno":"9767676767","custImgPath":"6.jpg"}
];
};
};
HTML code:
<div ng-app="custApp">
<div ng-controller="CustomerControlleras customer">
{{customer.nm}}
<table>
<tr>
<td> id </td>
<td> lnm </td>
<td> fnm </td>
<td> cell </td>
<td> img </td>
</tr>
<tr ng-repeat="c in customer.custs">
<td>{{c.custid}}</td>
<td>{{c.custLnm}}</td>
<td>{{c.custFnm}}</td>
<td>{{c.custCellno}}</td>
<td>{{c.custImgPath}}</td>
</tr>
</table>
</div>
</div>
Try like this
you have some mistakes.
1: <div ng-controller="CustomerController as customer">
2:forgot put ) in end of controller
var custApp = angular.module('custApp', []);
custApp.controller('CustomerController',function($http){
this.nm = 1;
this.custs = [{"custid":"1","custLnm":"Joshi","custFnm":"Amod","custCellno":"9970983214","custImgPath":"1.jpg"},{"custid":"2","custLnm":"Khare","custFnm":"Aditya","custCellno":"9860178001","custImgPath":"2.jpg"},{"custid":"3","custLnm":"Bhosale","custFnm":"Ketan","custCellno":"9890567713","custImgPath":"3.jpg"},{"custid":"4","custLnm":"Joshi","custFnm":"Rohit","custCellno":"9850703451","custImgPath":"4.jpg"},{"custid":"5","custLnm":"Bhat","custFnm":"Vidyut","custCellno":"9767211811","custImgPath":"5.jpg"},{"custid":"6","custLnm":"Chhadwa","custFnm":"Viraj","custCellno":"9767676767","custImgPath":"6.jpg"}
];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="custApp">
<div ng-controller="CustomerController as customer">
{{customer.nm}}
<table>
<tr>
<td> id </td>
<td> lnm </td>
<td> fnm </td>
<td> cell </td>
<td> img </td>
</tr>
<tr ng-repeat="c in customer.custs">
<td>{{c.custid}}</td>
<td>{{c.custLnm}}</td>
<td>{{c.custFnm}}</td>
<td>{{c.custCellno}}</td>
<td>{{c.custImgPath}}</td>
</tr>
</table>
</div>
</div>

My ui not getting updated after updating list in the js file

<td rowspan="5" colspan="2">
<div id="style-2" class="scrollit">
<table class="table-borderless table-condensed" style="height:100px; width:100%; overflow-y:scroll">
<tr>
<td colspan="2" class="verticleAlignMidle">
<h6><b>{{ctrl.commentsBox.length}} Comments:</b></h6>
</td>
</tr>
<tr ng-repeat="item in ctrl.commentsBox">
<td class="width8">
<div class="commentCol divStyle">{{item.name}}</div>
</td>
<td class="width11">
<span><b>{{item.FullName}}</b> {{item.date}}</span>
<br /> <span>{{item.comment}}</span>
</td>
</tr>
</table>
</div>
</td>
This is my list. That need to be updated on adding comment and pressing enter:
<td class="width33 verticleAlignMidle" colspan="2">
<textarea cols="80" rows="5" ng-keyup="$event.keyCode == 13 ? ctrl.saveAdGroup() : null"
ng-model="ctrl.textComment" ng-view="ctrl.textComment" placeholder="Write a comment"></textarea>
</td>
And the function is :
ctrl.saveAdGroup = function () {
var ctrl = this;
var c = ctrl.textComment;
ctrl.textComment = "";
var n = "DN";
var fullName = "Dummy Name";
var formatDate = ctrl.dates();
var objComment = { name: n, date: formatDate, comment: c, FullName: fullName };
ctrl.commentsBox.push(objComment);
alert(ctrl.commentsBox.length);
};
I m getting increased length in the alert but not reflecting in the ui.
You need to call angular watcher manually using:
$scope.$apply()

Edit row in angularjs table

I have the following angular table with an edit button
<table class="tableData" border="0" cellspacing="0" cellpadding="0">
<thead>
<tr>
<th></th>
<th>Budget Name</th>
<th>Year</th>
<th>Month</th>
<th></th>
</tr>
</thead>
<tbody ng-repeat="(ind,O) in budgetdetails">
<tr ng-class-even="'even'" ng-class-odd="'odd'">
<td class="CX"><span>+</span></td>
<td>{{O.budget.BudgetName}}</td>
<td>{{O.budget.Year}}</td>
<td>{{O.budget.Month}}</td>
<td><input type="button" value="Remove" class="btn btn-primary" data-ng-click='removeRow(O)' />
<input type="button" value="Edit" class="btn btn-primary" data-ng-click='EditRow(O)' /></td>
</tr>
<tr class="sub">
<td></td>
<td colspan="5">
<table class="tableData" border="0" cellspacing="0" cellpadding="0">
<tr>
<th>Category</th>
<th>SubCategory</th>
<th>Amount</th>
</tr>
<tr ng-repeat="(indx,a) in O.budgetdetails" ng-class-even="'even'" ng-class-odd="'odd'">
<td>{{a.Category}}</td>
<td>{{a.Subcategory}}</td>
<td>{{a.Amount| currency}}</td>
</tr>
#* <tr>
<td colspan="2">Total</td>
<td></td>
<td>{{Totals().Amount| currency}}</td>
</tr>*#
</table>
</td>
</tr>
</tbody>
</table>
I want to be able to edit the data when I click on the edit button so far I have been playing with the angular controller and I have this
$scope.EditRow = function (item) {
$scope.budget = item.budget;
$scope.idBudget = item.budget.idBudget;
$scope.BudgetName = item.budget.BudgetName;
$scope.Year = item.budget.Year;
$scope.Month = item.budget.Month;
resp=BDetail.FindBudgetById(item.budget.idBudget);
};
The last line call a json and returns a set of data which I want to send to the page were I create the budgets for editing. Now I am not sure how to send the json to another page and the page that receives it is the View were I create the budgets and it has an IEnumerable editor to repeat the budgets details. Code is as follows
#model BudgetPortalMVC4.Models.budget
#{
ViewBag.Title = "NewBudget";
Layout = "~/Views/Shared/_Layout.cshtml";
}
#Scripts.Render("~/bundles/jquery")
<script src="../../Scripts/jquery.validate.js" type="text/javascript"> </script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>
<h2>NewBudget</h2>
#using (Html.BeginForm())
{
#Html.ValidationSummary(true)
<div>
<table>
<tr>
<td>
<div class="editor-label">
#Html.LabelFor(model => model.BudgetName)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.BudgetName)
#Html.ValidationMessageFor(model => model.BudgetName)
</div>
</td>
<td>
<div class="editor-label">
#Html.LabelFor(model => model.Year)
</div>
<div>
#Html.DropDownListFor(model => model.Year, BudgetPortalMVC4.Controllers.BudgetController.GetDropDownListForYears())
#Html.ValidationMessageFor(model => model.Year)
</div>
</td>
<td>
<div class="editor-label">
#Html.LabelFor(model => model.Month)
</div>
<div>
#Html.DropDownListFor(model => model.Month, BudgetPortalMVC4.Controllers.BudgetController.GetDropDownListForMonth())
#Html.ValidationMessageFor(model => model.Month)
</div>
</td>
</tr>
</table>
</div>
<div>
<h3>Budget Detail</h3>
<div> <input type="button" id="addbudgetdetail" value="Add row" /></div>
<div id="new-budgetdetail">
#Html.EditorForMany(x => x.budgetdetails)
</div>
<input type="submit" />
</div>
#section Scripts{
<script type="text/jscript">
var url = '#Url.Action("GetSubCategories", "Budget")'; // Do not hard code your url's
$(document).on('change', '.SelectedCategory', function () {
var subCategory = $(this).closest('.item').find('.SelectedSubCategory');
subCategory.empty();
$.getJSON(url, { id: $(this).val() }, function (data) {
if (!data) {
return;
}
subCategory.append($('<option></option>').val('').text('Please select')); // Do not give the option a value!
$.each(data, function (index, item) {
subCategory.append($('<option></option>').val(item.Value).text(item.Text));
});
});
});
$(function () {
$('#addbudgetdetail').on('click', function () {
jQuery.get('#Url.Action("AddBudgetDetail", "Budget")').done(function (html) {
$('#new-budgetdetail').append(html);
$('form').data('validator', null);
$.validator.unobtrusive.parse($('form'));
});
});
$(".deleteRow").on("click", '', function () {
$(this).parents("#budgetRow:first").remove();
return false;
});
});
</script>
}
}
How can I accomplish passing the json data to this view and turning the view into and updating form instead of a create form?

Creating dynamic invoice with angularjs

I try to create a dynamic invoice, i have quantity and price column, and then i get total Value Of Products, so when i change value of quantity, price and total value should be changed, i find a way to change price but total value does not work:
<div class="container" ng-controller="OrderController" ng-init="quantity=1">
<div id="order-detail-content" class=" row">
<table id="cart_summary">
<thead>
<tr>
<th>Total</th>
<th> </th>
<th>Qty</th>
<th>Unit price</th>
<th>Availability</th>
<th>Description</th>
<th>Product</th>
</tr>
</thead>
<tfoot>
<tr class="cart_total_price">
<td colspan="2" class="price" id="total_product">{{totalValueOfProducts}}</td>
<td colspan="3" class="text-right">Total</td>
<td rowspan="4" colspan="3" id="cart_voucher" class="cart_voucher"></td>
</tr>
</tfoot>
<tbody>
<tr ng-repeat="order in Orders track by $index" >
<td class="cart_total" data-title="Total">
<span class="price" id="total_product_price_3_13_0">
{{order.Price * quantity}}
</span>
</td>
<td >
<input size="2" ng-model="quantity" type="text" value="1" name="quantity_3_13_0_0">
</td>
<td>
<ul class="price text-right" id="product_price_3_13_0">
<li ng-model="order.Price" class="price"> {{order.Price}}</li>
</ul>
</td>
<td class="cart_description">
<p style="color:black" class="product-name">{{order.ProductName}}</p>
<hr />
<small style="color:black" class="cart_ref">{{order.ProductDescription}}</small>
</td>
<td class="cart_product">
<img ng-src="" alt="Printed Dress" width="98" height="98">
</td>
</tr>
</tbody>
</table>
</div> <!-- end order-detail-content -->
and in controller i define $watch on quantity :
<script>
app.controller('OrderController', function ($scope, $http) {
$scope.Orders = {};
$scope.GetOrders = function () {
$http.get('/Order/GetAllOrders').success(function (response) {
$scope.Orders = response;
//debugger;
GetTotalValueOfProducts(response);
});
}
$scope.GetOrders();
GetTotalValueOfProducts = function (response) {
//debugger;
$scope.totalValueOfProducts = 0;
for (var i = 0; i < response.length; i++) {
$scope.totalValueOfProducts += response[i].Price * $scope.quantity;
}
}
$scope.$watch('quantity', function () {
debugger;
$scope.GetOrders();
});
});
</script>
when i changed value of quantity, the value of totalValueOfProducts was not changed!why $watch did not work? what is the problem?
'quantity' needs to be in the $scope for the binding to take place
on a separate note, it would be better to move all data (orders, quantity etc) into a service, it would better adhere to angular's MVC paradigm

How to pass data into directives into ng-repeat table

Now I have some directives which are used in some place, in one place I need to load the data to init them( if there are no data, keep it blank). Here is the template of one of the directives:
<div class="col-lg-12" style='z-index: 99998;'>
<span class="col-lg-12 col-md-12 right-inner-addon typeAhead">
<i class="glyphicon glyphicon-search" ng-show="isBillToEmpty"></i> <i ng-click="cleanBillTo()"
class="glyphicon glyphicon-close" ng-show="!isBillToEmpty" ></i></a> <input class="data "
id="billTo" ng-model="billTo"
typeahead=" billTos.ID as billTos.VALUE for billTos in getBillTos($viewValue)"
typeahead-input-formatter="formatBillToText($model)" type="text">
</span>
</div>
<div class="col-lg-12">
<span class="col-md-12"> <label id="labelBillTo" for="billTo">{{billToLabel}}</label>
</span>
</div>
DirectiveJS:
function($scope, BillToService) {
$scope.billTos = {};
$scope.billTo = '';
$scope.billToLabel = 'Bill To'
$scope.isBillToEmpty = true;
$scope.formatBillToText = function(model) {
for (var i = 0; i < $scope.billTos.length; i++) {
if (model === $scope.billTos[i].ID) {
return $scope.billTos[i].VALUE;
}
}
}
$scope.$watch('billTo', function() {
$scope.billToID = $scope.billTo;
if($scope.billTo.length > 0){
$scope.isBillToEmpty = false;
}else{
$scope.isBillToEmpty = true;
}
});
$scope.cleanBillTo = function() {
$scope.billTo = "";
$scope.billToID = "";
};
$scope.billTos = [{'ID':$scope.billToID,'VALUE':$scope.initialBillToText}];
$scope.billTo = $scope.billToID;
$scope.getBillTos = function(billToText) {
var promise = BillToService.getBillTos(billToText,
$scope.user.expenServerID);
promise.then(function(billTosInformation) {
$scope.billTos = billTosInformation;
});
$scope.billTos = BillToService.getBillTos(billToText,
$scope.user.expenServerID);
return $scope.billTos;
};
} ]).directive('smartBillTo', function() {
return {
restrict : 'E',
controller : "BillToCtrl",
templateUrl : 'components/directives/billTo/bill-to.html'
}
<table id='AllocationTable' ng-controller='maincontroller' class="table table-hover">
<thead>
<tr>
<th class="text-left">
<input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
</th>
<th class="text-center">Charge To Dept
</th>
<th class="text-center">Sub Account
</th>
<th class="text-center">Activity
</th>
<th class="text-center">Category
</th>
<th class="text-center">Bill To
</th>
<th class="text-center">Expense Item
</th>
<th class="text-center">Percentage
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat='data in datalist'>*How can I pass data to <smart-billTo>*
<td class="text-left">
<input type="checkbox" ng-model=''/>
</td>
<td class="text-center"><smart-department ></smart-department></td>
<td class="text-center"><input type='text' ng-model=''/></td>
<td class="text-center"><input type='text' ng-model=''/></td>
<td class="text-center"><input type='text' ng-model=''/></td>
<td class="text-center"><smart-bill-to></smart-bill-to></td>
<td class="text-center"><smart-item ></smart-item></td>
<td class="text-center"><input type='text' ng-model=''/></td>
</tr>
</tbody>
</table>
In the maincontroller I get data from service to init the directive value:
$scope.datalist = Someservice.getdata();
How can I pass data into directives to init the input value (such as bill-to).

Resources