Print a screenshot from web page

Question

I'm creating a web page and I need to make a button that prints a selected area. After several searches everything led me to implement html2canvas. I installed it with npm install html2canvas in the command prompt. In the official html2canvas website they mention import html2canvas from 'html2canvas'; that I suppose I need to add in the top of my aspx file(?) So far I've coded this code portion:

function getScreenshot() {
  alert("bob");
  html2canvas(document.body, {
    onrendered: function(canvas) {
      var canvasImg = canvas.toDataURL("image/jpg");
      $('#test').html('<img src="' + canvasImg + '" alt="">');
    }
  });
  var printContent = document.getElementById("row");
  var printWindow = window.open("", "");
  printWindow.document.write(printContent.innerHTML);
  printWindow.document.write("<script src=\'http://code.jquery.com/jquery-1.10.1.min.js\'><\/script>");
  printWindow.document.write("<script>$(window).load(function(){ print(); close(); });<\/script>");
  printWindow.document.close();
};

<div id="test" class="body-content animated fadeIn">
  <a href="javascript:getScreenshot()">
    <img src="Images/printer.png" width="40" height="40" align="right">
  </a>
</div>

The issue is when I click the button, no window opens for printing. The button works for sure because I get the alert window. What am I missing for this to work? Can be a installation procedure? Can be bad attributes implementation?

Answer 1

First make sure that you're including your script file correctly. There should be a <script> tag that includes a web-compatible version of your library. Most instructions that use npm install ...; import ... assume that you are using a web bundler like webpack or rollup to make a single bundled JavaScript file, or are using the new es6 module importer. That doesn't look like what you're doing here.

Instead, you can include a prebuilt version of html2canvas, like from https://html2canvas.hertzen.com/dist/html2canvas.js or https://unpkg.com/html2canvas@1.0.0-alpha.12/dist/html2canvas.js.

<script src="https://unpkg.com/html2canvas@1.0.0-alpha.12/dist/html2canvas.js"></script>

You can see a working example here: http://jsfiddle.net/u8Lz32k0/7/