hi guys
how to ionic html in div convert to pdf or image???
use this to convert to pdf use this div: https://github.com/SajithDulanjaya/HTML2PDF
and change the code use
I show code:
<script src="lib/ngCordova/dist/ng-cordova.js"></script> <!-- ngCordova -->
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="lib/html_to_pdf/Blob.js"></script>
<script src="lib/html_to_pdf/canvas-toBlob.js"></script>
<script src="lib/html_to_pdf/FileSaver.min.js"></script>
<script src="lib/html_to_pdf/jspdf.min.js"></script>
<script src="lib/html_to_pdf/jspdf.plugin.addimage.js"></script>
<script src="lib/html_to_pdf/jspdf.plugin.png_support.js"></script>
<script src="lib/html_to_pdf/png.js"></script>
<script src="lib/html_to_pdf/rasterizeHTML.allinone.js"></script>
<script src="lib/html_to_pdf/zlib.js"></script>
<script src="js/app.js"></script>
HTML to PDF Demo
<div align="center" id="thehtml">
<!-- html code... -->
</div>
<center>
<button class="button icon-left ion-archive button-royal" ng-click="generatePDF()">Generate PDF</button>
<button id="save" class="button icon-left ion-archive button-royal" ng-click="saveResult()">Download image<button>
</center>
<center><canvas id="thecanvas" width="790px" height="1200px"></canvas></center>
</ion-content>
app.js:
angular.module("html2pdf", ["ionic", 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller("html2pdfCtrl", function($scope, $log, $cordovaInAppBrowser, $cordovaEmailComposer, $cordovaFileOpener2, $ionicLoading) {
var images;
$scope.generatePDF = function() {
/*
* rasterizeHTML to get html into a canvas
*/
var canvas = document.getElementById("thecanvas"),
context = canvas.getContext('2d'),
html_container = document.getElementById("thehtml"),
html = html_container.innerHTML;
rasterizeHTML.drawHTML(html).then(function(renderResult) {
context.drawImage(renderResult.image, 25, 10);
try {
console.log(canvas.toDataURL());
var content = canvas.toDataURL('image/png');
console.log("content: " + content); // ivan
//window.open(content,'_blank','location=yes'); // ivan
//window.open(canvas.toDataURL('image/png'),'_blank','location=yes'); // ivan
console.log("generating pdf...");
//Generating pdf file
var doc = new jsPDF();
//Setting properties
doc.setProperties({
title: 'Calcey',
subject: 'Test Subject',
author: 'Calcey',
creator: 'Calcey'
});
//Adding html content as a png image into the pdf file
doc.addImage(content, 'PNG', 0, 0);
doc.setFontSize(10);
doc.text(188, 290, 'Page ' + 01);
var data = doc.output();
var buffer = new ArrayBuffer(data.length);
var array = new Uint8Array(buffer);
for (var i = 0; i < data.length; i++) {
array[i] = data.charCodeAt(i);
}
var blob = new Blob(
[array], {
type: 'application/pdf',
encoding: 'raw'
}
);
//Save generated pdf inside local file system
saveAs(blob, "pdf_output");
//Accessing the file system through cordova file plugin
console.log("file system...");
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
console.log(fileSystem.name);
console.log(fileSystem.root.name);
console.log(fileSystem.root.fullPath);
fileSystem.root.getFile("pdf_output.pdf", {
create: true
}, function(entry) {
var fileEntry = entry;
console.log(entry);
entry.createWriter(function(writer) {
writer.onwrite = function(evt) {
console.log("write success");
};
console.log("writing to file");
//Writing the pdf
writer.write(blob);
}, function(error) {
console.log(error);
});
}, function(error) {
console.log(error);
});
},
function(event) {
console.log(evt.target.error.code);
});
saveAs(blob, "filename");
} catch (e) {
console.log("e vale" + e);
//window.open(e,'_blank','location=yes'); // ivan
};
//window.open(content, '_blank', 'location=yes'); // ivan
images = content;
console.log("images value: ", images);
});
// funcion email
$scope.sendEmail = function() {
// 1
var bodyText = "Look at this images!
";
// 4
window.plugin.email.open({
to: ["demo@email.com"], // email addresses for TO field
//cc: Array, // email addresses for CC field
//bcc: Array, // email addresses for BCC field
//attachments: images, // file paths or base64 data streams
attachments: [
'file://img/ionic.png',
// 'base64:images',
],
subject: "Just some images", // subject of the email
body: bodyText, // email body (for HTML, set isHtml to true)
isHtml: true, // indicats if the body is HTML or plain text
}, function() {
console.log('email view dismissed');
},
this);
}
}
// v2
// Not use
var saveButton = document.getElementById("save");
// Canvas2ImagePlugin
$scope.saveResult = function() {
// Actions...
console.log("Download canvas image...");
var canvas = document.createElement('thecanvas');
var ctx = canvas.getContext('2d');
void ctx.drawImage(this, 0, 0, img.width, img.height);
var dataURI = canvas.toDataURL().replace(/data:image\/png;base64,/, '');
function successCallback(result) {
q.resolve('file:///' + result);
}
function failureCallback(err) {
console.error(err);
q.reject(err);
}
cordova.exec(successCallback, failureCallback, "Canvas2ImagePlugin", "saveImageDataToLibrary", [dataURI]);
}
// /v2
})
`