Capturar Región/pantalla – Print Screen in Oracle APEX

Amigos, en esta oportunidad veremos algo simple pero muchas veces útil, cuando deseamos capturar la pantalla, es decir tomar una imagen o también llamado printscreen.

]

Para esto usaremos la famosa librería de JavaScript html2canvas.

Veremos dos formas de agregar esta librería a APEX, aunque particularmente recomendare la segunda.

La primera forma es agregando el CDN (url) de esta librería https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js directamente a la APEX.

Y la segunda forma que recomiendo, es descargar el archivo JS desde la URL antes mencionada y cargarlo directamente en los static files de APEX

Luego usaremos esa ruta directamente en APEX, con ello evitamos la dependencia de un servidor externo en caso exista o no el link.

Finalmente, para el ejemplo, demo que la pueden encontrar aquí

Hemos creado un reporte y un botón, el botón tendrá una acción dinámica para ejecutar el siguiente JavaScript

Lo importante aquí es definir el ID de la región ah capturar, o en su defecto si queremos capturar toda la pantalla, solo sería cambio del selector.

Y el otro punto es el nombre y la descarga.

  // Specified the region to print
  // this example can be region report or any region
  var region = document.getElementById('employeeReport');
  // or can be all document
  var documentBod = document.body;

  // Use html2canvas to capture the region
  html2canvas(region).then(function(canvas) {
  // html2canvas(documentBod).then(function(canvas) {

    // Convierte el canvas a una URL de datos en formato PNG
    var imgData = canvas.toDataURL("image/png");

    // create a temporary link for download the image
    var link = document.createElement('a');
    link.href = imgData;

    var imageCaptureName = 'captura.png';
    link.download = imageCaptureName;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
  }).catch(function(error) {
    console.error('Error capturando la región:', error);
  });