GridStack.js HTML2PDF.js Example to Convert Grid Stack Widgets to PDF Document in HTML5 & Javascript Full Project For Beginners

 

 

 

<h2>Stack Grid</h2>
<h3>
  <input type='button' id='btnAdd' value='Add' />
  <button id="cmd">Generate PDF</button>
</h3>
<div id="grid-stack-container">
  <div class="grid-stack" data-gs-width="12" data-gs-animate="yes">
    <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2">
      <div class="grid-stack-item-content">This is the first box of your life!</div>
    </div>
    <div class="grid-stack-item" data-gs-x="4" data-gs-y="0" data-gs-width="4" data-gs-height="4">
      <div class="grid-stack-item-content">2</div>
    </div>
    <div class="grid-stack-item" data-gs-x="8" data-gs-y="0" data-gs-width="2" data-gs-height="2" data-gs-min-width="2" data-gs-no-resize="yes">
      <div class="grid-stack-item-content"> <span class="fa fa-hand-o-up"></span> Drag me! </div>
    </div>
    <div class="grid-stack-item" data-gs-x="10" data-gs-y="0" data-gs-width="2" data-gs-height="2">
      <div class="grid-stack-item-content">4</div>
    </div>
    <div class="grid-stack-item" data-gs-x="0" data-gs-y="2" data-gs-width="2" data-gs-height="2">
      <div class="grid-stack-item-content"><img src="https://placeimg.com/320/240/animals" /></div>
    </div>
    <div class="grid-stack-item" data-gs-x="2" data-gs-y="2" data-gs-width="2" data-gs-height="4">
      <div class="grid-stack-item-content"><img src="https://placeimg.com/320/240/animals" /></div>
    </div>
    <div class="grid-stack-item" data-gs-x="8" data-gs-y="2" data-gs-width="4" data-gs-height="2">
      <div class="grid-stack-item-content"><img src="https://placeimg.com/320/240/animals" /></div>
    </div>
    <div class="grid-stack-item" data-gs-x="0" data-gs-y="4" data-gs-width="2" data-gs-height="2">
      <div class="grid-stack-item-content">Enlarge me!</div>
    </div>
    <div class="grid-stack-item" data-gs-x="4" data-gs-y="4" data-gs-width="4" data-gs-height="2">
      <div class="grid-stack-item-content">Drink me!</div>
    </div>
    <div class="grid-stack-item" data-gs-x="8" data-gs-y="4" data-gs-width="2" data-gs-height="2">
      <div class="grid-stack-item-content">10</div>
    </div>

  </div>

</div>

 

 

body {
  padding: 5px;
}
h2,
h3 {
  text-align: center;
}
.grid-stack-item-content {
  border: 1px solid #ccc;
  padding: 3px;
}

img {
  border: 1px solid red;
}

 

 

/**
 * gridstack.js 0.3.0
 * http://troolee.github.io/gridstack.js/
 * (c) 2014-2016 Pavel Reznikov, Dylan Weiss
 * gridstack.js may be freely distributed under the MIT license.
 * @preserve
 */
(function (factory) {
  if (typeof define === "function" && define.amd) {
    define(["jquery", "lodash", "gridstack", "jquery-ui"], factory);
  } else if (typeof exports !== "undefined") {
    try {
      jQuery = require("jquery");
    } catch (e) {}
    try {
      _ = require("lodash");
    } catch (e) {}
    try {
      GridStackUI = require("gridstack");
    } catch (e) {}
    factory(jQuery, _, GridStackUI);
  } else {
    factory(jQuery, _, GridStackUI);
  }
})(function ($, _, GridStackUI) {
  var scope = window;

  /**
   * @class JQueryUIGridStackDragDropPlugin
   * jQuery UI implementation of drag'n'drop gridstack plugin.
   */
  function JQueryUIGridStackDragDropPlugin(grid) {
    GridStackUI.GridStackDragDropPlugin.call(this, grid);
  }

  GridStackUI.GridStackDragDropPlugin.registerPlugin(
    JQueryUIGridStackDragDropPlugin
  );

  JQueryUIGridStackDragDropPlugin.prototype = Object.create(
    GridStackUI.GridStackDragDropPlugin.prototype
  );
  JQueryUIGridStackDragDropPlugin.prototype.constructor = JQueryUIGridStackDragDropPlugin;

  JQueryUIGridStackDragDropPlugin.prototype.resizable = function (el, opts) {
    el = $(el);
    if (opts === "disable" || opts === "enable") {
      el.resizable(opts);
    } else if (opts === "option") {
      var key = arguments[2];
      var value = arguments[3];
      el.resizable(opts, key, value);
    } else {
      el.resizable(
        _.extend({}, this.grid.opts.resizable, {
          start: opts.start || function () {},
          stop: opts.stop || function () {},
          resize: opts.resize || function () {}
        })
      );
    }
    return this;
  };

  JQueryUIGridStackDragDropPlugin.prototype.draggable = function (el, opts) {
    el = $(el);
    if (opts === "disable" || opts === "enable") {
      el.draggable(opts);
    } else {
      el.draggable(
        _.extend({}, this.grid.opts.draggable, {
          containment: this.grid.opts.isNested
            ? this.grid.container.parent()
            : null,
          start: opts.start || function () {},
          stop: opts.stop || function () {},
          drag: opts.drag || function () {}
        })
      );
    }
    return this;
  };

  JQueryUIGridStackDragDropPlugin.prototype.droppable = function (el, opts) {
    el = $(el);
    if (opts === "disable" || opts === "enable") {
      el.droppable(opts);
    } else {
      el.droppable({
        accept: opts.accept
      });
    }
    return this;
  };

  JQueryUIGridStackDragDropPlugin.prototype.isDroppable = function (el, opts) {
    el = $(el);
    return Boolean(el.data("droppable"));
  };

  JQueryUIGridStackDragDropPlugin.prototype.on = function (
    el,
    eventName,
    callback
  ) {
    $(el).on(eventName, callback);
    return this;
  };

  return JQueryUIGridStackDragDropPlugin;
});

$(function () {
  $("#btnAdd").on("click", function () {
    $(".grid-stack").append(
      '<div class="grid-stack-item" data-gs-x="10" data-gs-y="4" data-gs-width="2" data-gs-height="2"><div class="grid-stack-item-content">11</div></div>'
    );
  });
  var options = {
    cellHeight: 80,
    verticalMargin: 10
  };
  $(".grid-stack").gridstack(options);

  /*jspdf*/

  var doc = new jsPDF();
  var specialElementHandlers = {
    "#editor": function (element, renderer) {
      return true;
    }
  };

  $("#cmd").click(function () {
    var element = document.getElementById("grid-stack-container");
    html2pdf(element);
  });
});

Leave a Reply