diff --git a/src/viralhostrange/viralhostrangedb/static/js/html2png.js b/src/viralhostrange/viralhostrangedb/static/js/html2png.js
new file mode 100644
index 0000000000000000000000000000000000000000..22445ffcc5f4790ff42c96acaad3fcfb3dc2271b
--- /dev/null
+++ b/src/viralhostrange/viralhostrangedb/static/js/html2png.js
@@ -0,0 +1,28 @@
+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
diff --git a/src/viralhostrange/viralhostrangedb/templates/viralhostrangedb/browse.html b/src/viralhostrange/viralhostrangedb/templates/viralhostrangedb/browse.html
index 2d05a41be73ecdb4db41435c248b4d8d09ff75c4..fdadd16fb75f8798324442d8e7b619b39dab3a51 100644
--- a/src/viralhostrange/viralhostrangedb/templates/viralhostrangedb/browse.html
+++ b/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 %}
diff --git a/src/viralhostrange/viralhostrangedb/templates/viralhostrangedb/vh_detail.html b/src/viralhostrange/viralhostrangedb/templates/viralhostrangedb/vh_detail.html
index 3e694e3e68244b5ec891608e40388d95fb4ac160..1f95abb5454fec9625abfe2e13c40c4c2f9385c2 100644
--- a/src/viralhostrange/viralhostrangedb/templates/viralhostrangedb/vh_detail.html
+++ b/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%}