Canvas2image or html2pdf download div convert to image or pdf


Hello, I would appreciate if someone could help me, since I am a little desperate and I’m a bit of a novice yet …

I have a div with content referenced by id. That div by the library makes jsPDF download (browser) .pdf content div. It also creates an image within the the contents of the div.

I like that image could download it to the device (iOS and Android) and / or download the pdf generated and / or attach the image generated in an email. The idea really is to share what I’ve generated in the div somehow. I tried using the plugin file and nothing ngcordova now testing the plugin canvas2image but neither.

I use this to convert to pdf use this div:

I show code:


<!DOCTYPE html>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/" rel="stylesheet">

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>

    <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>
<body ng-app="html2pdf" ng-controller="html2pdfCtrl">

    <ion-header-bar class="bar-royal">
        <h1 class="title">HTML to PDF Demo</h1>

        <div align="center" id="thehtml">
            <!-- html code... -->


            <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><canvas id="thecanvas" width="790px" height="1200px"></canvas></center>



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) {
    if (window.StatusBar) {

.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 {
        var content = canvas.toDataURL('image/png');

        console.log("content: " + content); // ivan
        //,'_blank','location=yes'); // ivan
        //'image/png'),'_blank','location=yes'); // ivan

        console.log("generating pdf...");
        //Generating pdf file
        var doc = new jsPDF();
        //Setting properties
          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.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) {


            fileSystem.root.getFile("pdf_output.pdf", {
              create: true
            }, function(entry) {
              var fileEntry = entry;

              entry.createWriter(function(writer) {
                writer.onwrite = function(evt) {
                  console.log("write success");
                console.log("writing to file");

                //Writing the pdf

              }, function(error) {

            }, function(error) {
          function(event) {

        saveAs(blob, "filename");

      } catch (e) {
        console.log("e vale" + e);
        //,'_blank','location=yes'); // ivan

      //, '_blank', 'location=yes'); // ivan
      images = content;
      console.log("images value: ", images);


    // funcion email
    $scope.sendEmail = function() {
      // 1
      var bodyText = "<h2>Look at this images!</h2>";

      // 4{
          to: [""], // 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: [
            // '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');


  // 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) {
    cordova.exec(successCallback, failureCallback, "Canvas2ImagePlugin", "saveImageDataToLibrary", [dataURI]);

  // /v2


Thanks you very much.


Hi Ivan,

I was just wondering if you have figured out a working solution. I am wanting to do the a similar thing that you have mentioned: be able to share a part of the screen… not the whole screen (which I could use a screenshot) but just a part.



i am working with similar project,i have issue when i download pdf it’s not showing fit as pdf.
canvas height and width for device?
my html page contain table ,
what are values are need in drawImage which properly fit to my pdf page
context.drawImage(renderResult.image, 25, 10);