在我的控制器中,我定义了html2canvas函数,如:
var builderApp = angular.module('builderApp',
['fg', 'ngSanitize', 'ui.bootstrap', 'angularFileUpload', 'textAngular', 'ui.grid', 'ui.grid.pagination']);
builderApp
.run(function ($templateCache) {
$templateCache.put('custom-busy.html',
"<div class=\"cssload-loader\"><div class=\"cssload-inner cssload-one\"></div><div class=\"cssload-inner cssload-two\"></div><div class=\"cssload-inner cssload-three\"></div></div>"
);
});
builderApp.controller('builderCtrl', function ($scope, formSchema, formData, $http, $filter) {
var vm = this;
$scope.canvasToImageSuccess = function (canvas) {
var margins = {
top: 50,
bottom: 80,
left: 20,
width: 600
};
var pdf = new jsPDF('p', 'pt', 'a4'), // jsPDF(orientation, unit, format)
pdfInternals = pdf.internal,
pdfPageSize = pdfInternals.pageSize,
pdfScaleFactor = pdfInternals.scaleFactor,
pdfPageWidth = pdfPageSize.width - (margins.left + margins.left),
pdfPageHeight = pdfPageSize.height + margins.left,
totalPdfHeight = 0,
htmlPageHeight = canvas.height,
htmlScaleFactor = canvas.width / (pdfPageWidth * pdfScaleFactor),
safetyNet = 0;
pdf.setFontSize(22);
pdf.setFontStyle('italic');
pdf.page = 1;
while (totalPdfHeight < htmlPageHeight && safetyNet < 15) {
var newCanvas = canvasShiftImage(canvas, totalPdfHeight);
pdf.addImage(newCanvas, 'png', margins.left, margins.top, pdfPageWidth, 0, null, 'NONE');
pdf.page++;
totalPdfHeight += (pdfPageHeight * pdfScaleFactor * htmlScaleFactor);
if (totalPdfHeight < htmlPageHeight) {
pdf.addPage();
}
safetyNet++;
}
pdf.save(fileName);
};
$scope.createPDF = function () {
var source = $("#formData").html();
var fileName = "Form1.Pdf";
var canvasToImage = function (canvas) {
var img = new Image();
var dataURL = canvas.toDataURL('image/png');
img.src = dataURL;
return img;
};
var canvasShiftImage = function (oldCanvas, shiftAmt) {
shiftAmt = parseInt(shiftAmt) || 0;
if (!shiftAmt) { return oldCanvas; }
var newCanvas = document.createElement('canvas');
newCanvas.height = oldCanvas.height - shiftAmt;
newCanvas.width = oldCanvas.width;
var ctx = newCanvas.getContext('2d');
var img = canvasToImage(oldCanvas);
ctx.drawImage(img, 0, shiftAmt, img.width, img.height, 0, 0, img.width, img.height);
return newCanvas;
};
try{
html2canvas(source, {
onrendered: function (canvas) {
alert('rendered');
$scope.canvasToImageSuccess(canvas);
}
});
}
catch(e)
{
var x = e;
}
}
从UI我可以调用createPDF函数,但是html2canvas中的警报没有被触发,所以我的函数canvasToImageSuccess没有被执行。
我在这里遗漏了什么吗?
我试图将html2canvas注入“global.html2canvas = require(”html2canvas“);”但这不起作用。
我检查了控制台,但没有错误。