ability to convert table to png while taking into account library limitations

src/viralhostrange/viralhostrangedb/static/js/html2png.js

+function grid_host2png(filename){
+    $('#grid_host').addClass("bg-white");
+    $("#grid_container:not(.horizontal-col-header)").addClass("horizontal-col-header horizontal-col-header-html2png");
+    $("#grid_container.hide-cols-with-no-infection").removeClass("hide-cols-with-no-infection").addClass("hide-cols-with-no-infection-html2png");
+    $("#grid_container.hide-rows-with-no-infection").removeClass("hide-rows-with-no-infection").addClass("hide-rows-with-no-infection-html2png");
+    html2canvas(document.querySelector('#grid_host')).then(function(canvas) {
+        var link = document.createElement('a');
+        if (typeof link.download === 'string') {
+            link.href = canvas.toDataURL();
+            link.download = filename;
+
+            //Firefox requires the link to be in the body
+            document.body.appendChild(link);
+
+            //simulate click
+            link.click();
+
+            //remove the link when done
+            document.body.removeChild(link);
+            $('#grid_host').removeClass("bg-white");
+            $("#grid_container.horizontal-col-header-html2png").removeClass("horizontal-col-header horizontal-col-header-html2png");
+            $("#grid_container.hide-cols-with-no-infection-html2png").addClass("hide-cols-with-no-infection").removeClass("hide-rows-with-no-infection-html2png");
+            $("#grid_container.hide-rows-with-no-infection-html2png").addClass("hide-rows-with-no-infection").removeClass("hide-rows-with-no-infection-html2png");
+        } else {
+            window.open(uri);
+        }
+    });
+}
\ No newline at end of file

src/viralhostrange/viralhostrangedb/templates/viralhostrangedb/browse.html

@@ -28,6 +28,12 @@
             <i class="fa fa-download"></i>
             {%trans "Download displayed data in a spreadsheet" %}
         </button>
+        <button class="dropdown-item" type="button"
+           onclick="grid_host2png('file-name.png');"
+        >
+            <i class="fa fa-image"></i>
+            {%trans "Download displayed data as a figure" %}
+        </button>
 <!--        <a class="dropdown-item disabled"-->
 <!--           href="{% url 'viralhostrangedb:download_responses' %}"-->
 <!--        >-->
@@ -69,6 +75,8 @@ var mem={};
 {{block.super}}
 <script type="text/javascript" src="{% sstatic '/js/browse.js' %}"></script>
 <script type="text/javascript" src="{% sstatic '/js/browse-sort.js' %}"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
+<script type="text/javascript" src="{% sstatic '/js/html2png.js' %}"></script>
 {% endblock %}
 
 {% block content %}

src/viralhostrange/viralhostrangedb/templates/viralhostrangedb/vh_detail.html

@@ -42,6 +42,12 @@ title="{% trans 'Open in the NCBI'%}">
                     <i class="fa fa-download"></i>
                     {%trans "Download displayed data in a spreadsheet" %}
                 </button>
+                <button class="dropdown-item" type="button"
+                   onclick="grid_host2png('file-name.png');"
+                >
+                    <i class="fa fa-image"></i>
+                    {%trans "Download displayed data as a figure" %}
+                </button>
             </div>
         </div>
     </div>
@@ -79,6 +85,8 @@ var detailed_kind="{{detailed_kind}}";
 {{block.super}}
 <script type="text/javascript" src="{% sstatic '/js/browse-sort.js' %}"></script>
 <script type="text/javascript" src="{% sstatic '/js/virus_or_host_detail.js' %}"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
+<script type="text/javascript" src="{% sstatic '/js/html2png.js' %}"></script>
 {% endblock %}
 
 {% block content%}