jueves, 28 de julio de 2022

Exportar Imagen en Excel JS

 Hola a todos, en este momento aremos un archivo de excel a partir de la informacion en un arreglo de propiedades, entre estas propiedades estará una constante con images en base64.
Para ello utilizaremos las librerias de exceljs.js y FileSaver.js puedes acceder a estas librerías en las siguientes direcciones.


<script src="https://cdnjs.cloudflare.com/ajax/libs/amcharts/3.21.15/plugins/export/libs/FileSaver.js/FileSaver.min.js" type="text/javascript"> </script>
 <script crossorigin="anonymous" integrity="sha512-UnrKxsCMN9hFk7M56t4I4ckB4N/2HHi0w/7+B/1JsXIX3DmyBcsGpT3/BsuZMZf+6mAr0vP81syWtfynHJ69JA==" referrerpolicy="no-referrer" src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.3.0/exceljs.min.js"> </script>


A partir de aquí lo que sigue es preparar nuestra información.

  var arreglo = [{ name: "Jane Doe",foto:'data:image/png;base64,/9j/4QAYRXhpZgAAS...'},{ name: "John Doe",foto:'data:image/png;base64,/9j/4QAYRXhpZgAAS...'}];
 var cols= [{field:'name',title:'Nombre'},{field:'foto',title:'IMAGEN'}];
  
Una vez que tenemos el insumo creamos nuestra función.
  async function exportFile(arry,cols,fileName){
     var workbook = new ExcelJS.Workbook();
     workbook.creator = 'inovania.blogspot.com';
     workbook.lastModifiedBy = 'inovania.blogspot.com';
     workbook.created = new Date();
     var worksheet =  workbook.addWorksheet('Sheet 1');
     var grd={
          columns:cols,
          data:array
     };
     var arrRow=[];
     grd.columns.map((e,i) => {
          arrRow.push(e.title);
     });
     worksheet.addRow(arrRow);
     for(var e=0;e<grd.data.length;e++){
          var arrDt = [];
          var logo;
          for(var x=0;x<grd.columns.length;x++){
               var c = grd.columns[x].field;
               if(x==0){
                    logo = workbook.addImage({
                         base64: grd.data[e][c],
                         extension: 'jpg',
                    });
                    arrDt.push("");
               }else{
                    arrDt.push(grd.data[e][c]);
               }
          }
          worksheet.addRow(arrDt);
          worksheet.addImage(logo, ('A'+(e+2)+":"+"A"+(e+2)));
     }
     await workbook.xlsx.writeBuffer()
          .then(buffer => saveAs(new Blob([buffer]),fileName+".xlsx"))
          .catch(err => console.log(err) );
};
  
Con esto solo nos queda el llamado el cual queda de la siguiente manera

  exportFile(arreglo,cols,"archivoInnovania");
De esta manera queda nuestro objeto capas de exportar imagenes en base64 en un archivo de excel.

Cabe mencionar que la función worksheet.addImage(img,rango); ocupa dos parámetros el primero es la imagen y el segundo parámetro es un rango de celdas, en este caso lo deje en la misma celda, pasándole como rango desde la celda ( A1 hasta la celda A1) A1:A1, simulando que este será un rango de celdas.


Quedo en espera de sus comentarios, hasta la proxima.