JSFiddle - React, Tailwind, and code Playground
by Bian Jiaping
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<body>
<form id="Form1" runat="server">
<div id="wrapper" style="background-color: white;">
<p>Inside the wrapper 1</p>
<p>Inside the wrapper 2</p>
<p>Inside the wrapper 3</p>
<p>Inside the wrapper 4</p>
<p>Inside the wrapper 5</p>
<p>Inside the wrapper 6</p>
<p>Inside the wrapper 7</p>
<p>Inside the wrapper 8</p>
<p>Inside the wrapper 9</p>
<p>Inside the wrapper 10</p>
<p>Inside the wrapper 11</p>
<p>Inside the wrapper 12</p>
<p>Inside the wrapper 13</p>
<p>Inside the wrapper 14</p>
<p>Inside the wrapper 15</p>
<p>Inside the wrapper 16</p>
<p>Inside the wrapper 17</p>
<p>Inside the wrapper 18</p>
<p>Inside the wrapper 19</p>
<p>Inside the wrapper 20</p>
<p>Inside the wrapper 21</p>
<p>Inside the wrapper 22</p>
<p>Inside the wrapper 23</p>
<p>Inside the wrapper 24</p>
<p>Inside the wrapper 25</p>
<p>Inside the wrapper 26</p>
<p>Inside the wrapper 27</p>
<p>Inside the wrapper 28</p>
<p>Inside the wrapper 29</p>
<p>Inside the wrapper 30</p>
<p><a href="javascript:return false;" class="print-screen-button-link">Print Screen</a> - Click here to capture 1-49</p>
<p>Inside the wrapper 31</p>
<p>Inside the wrapper 32</p>
<p>Inside the wrapper 33</p>
<p>Inside the wrapper 34</p>
<p>Inside the wrapper 35</p>
<p>Inside the wrapper 36</p>
<p>Inside the wrapper 37</p>
<p>Inside the wrapper 38</p>
<p>Inside the wrapper 39</p>
<p>Inside the wrapper 40</p>
<p>Inside the wrapper 41</p>
<p>Inside the wrapper 42</p>
<p>Inside the wrapper 43</p>
<p>Inside the wrapper 44</p>
<p>Inside the wrapper 45</p>
<p>Inside the wrapper 46</p>
<p>Inside the wrapper 47</p>
<p>Inside the wrapper 48</p>
<p>Inside the wrapper 49</p>
<p><a href="javascript:return false;" class="print-screen-button-link">Print Screen</a> - Click here to capture only what's visible in the...JavaScript
$(document).ready(function(){
$('.print-screen-button-link').click(function (e) {
e.preventDefault();
var useWidth = $('#wrapper').prop('scrollWidth'); //document.getElementById("primary").style.width;
var useHeight = $('#wrapper').prop('scrollHeight'); //document.getElementById("primary").style.height;
html2canvas(document.getElementById("wrapper"), {width: useWidth, height: useHeight}).then(function (canvas) {
//document.body.appendChild(canvas);
var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // here is the most important part because if you dont replace you will get a DOM 18 exception.
//var image = canvas.toDataURL("image/png"); // here is the most important part because if you dont replace you will get a DOM 18 exception.
window.location.href = image; // it will save locally
});
});
});