jQuery Word export

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2014-11-29/FileSaver.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<div id="page-content" class="panel panel-default" style="width:2056px">
  <div class="panel-body">

    <header>
      <p style="font-size:20px"> This is a header?</p>
    </header>

    <h1>Hello, world!</h1>
    <p>This jQuery plugin takes the HTML from any element on the page and converts it (all on the client-side) to MHTML (MIME-HTML) with .doc as the file extension. What this does is that it archives the HTML by embedding images into the file for offline
      viewing, and then Microsoft Word will open the file and automatically interpret it into a rich document with header and body styles as well as images. Go ahead and click the link on the right to try it out. Note that it won't work on a phone or
      tablet, and you'll need to open with Microsoft Word for it to correctly interpret the file (currently, the output file doesn't get handled properly by LibreOffice).</p>
    <p><img...

CSS

.word-icon {
  font-family: "Helvetica", sans-serif;
  font-size: 24px;
  font-weight: bold;
  background-color: #0054a6;
  color: white;
  padding: 2px 5px;
  vertical-align: middle;
}

JavaScript

if (typeof jQuery !== "undefined" && typeof saveAs !== "undefined") {
  (function($) {
    $.fn.wordExport = function(fileName) {
      fileName = typeof fileName !== 'undefined' ? fileName : "jQuery-Word-Export";
      var static = {
        mhtml: {
          top: "Mime-Version: 1.0\nContent-Base: " + location.href + "\nContent-Type: Multipart/related; boundary=\"NEXT.ITEM-BOUNDARY\";type=\"text/html\"\n\n--NEXT.ITEM-BOUNDARY\nContent-Type: text/html; charset=\"utf-8\"\nContent-Location: " + location.href + "\n\n<!DOCTYPE html>\n<html>\n_html_</html>",
          head: "<head>\n<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\">\n<style>\n_styles_\n</style>\n</head>\n",
          body: "<body>_body_</body>"
        }
      };
      var options = {
        maxWidth: 624
      };
      // Clone selected element before manipulating it
      var markup = $(this).clone();

      // Remove hidden elements from the output
      markup.each(function() {
        var self = $(this);
        if (self.is(':hidden'))
          self.remove();
      });

      // Embed all images using Data URLs
      var images = Array();
      var img = markup.find('img');
      for (var i = 0; i < img.length; i++) {
        // Calculate dimensions of output image
        var w = Math.min(img[i].width, options.maxWidth);
        var h = img[i].height * (w / img[i].width);
        // Create canvas for converting image to data URL
        var canvas = document.createElement("CANVAS");
        canvas.width = w;
        canvas.height = h;
        // Draw image to canvas
        var context = canvas.getContext('2d');
        context.drawImage(img[i], 0, 0, w, h);
        // Get data URL encoding of image
        var uri = canvas.toDataURL("image/png");
        $(img[i]).attr("src", img[i].src);
        img[i].width = w;
        img[i].height = h;
        // Save encoded image to array
        images[i] = {
          type: uri.substring(uri.indexOf(":") + 1, uri.indexOf(";")),
...