1

estoy teniendo unos problemas al momento de agregar la función de descargar excel a través del cliente, el siguiente problema es, que al momento de descargar el archivo excel, el archivo me descarga correctamente. Pero también agrega el archivo excel dentro mi proyecto del lado backend. Estoy utilizando la librería ExcelJS. y para el lado del frontend utilizo axios.

Código para crear el Excel(BACKEND)

  const id_rdi = req.params.id;
  const rdi = await pool.query("SELECT *, p.name FROM rdi r INNER JOIN project p ON r.id_project = p.id WHERE r.id =  ?", [id_rdi]);
  // Creacion RDI
  let workbook = new Excel.Workbook();
  workbook = await workbook.xlsx.readFile("RDI_template.xlsx");
  let worksheet = await workbook.getWorksheet("Hoja1");
  // Guardar Informacion en la template
  worksheet.getRow(5).getCell(3).value = await rdi[0].name; //Nombre del la empresa
  worksheet.getRow(8).getCell(3).value = await ""; //Nombre del la empresa
  worksheet.getRow(8).getCell(7).value = await rdi[0].type; //Tipo de RDI
  worksheet.getRow(8).getCell(11).value = await rdi[0].reporter; //Emisor
  worksheet.getRow(9).getCell(3).value = await rdi[0].speciality; //Especialidad
  worksheet.getRow(9).getCell(11).value = await rdi[0].created_at; //Fecha de Emision
  worksheet.getRow(10).getCell(3).value = await rdi[0].location; //Ubicacion
  worksheet.getRow(10).getCell(11).value = await rdi[0].deadline; //Fecha requerida
  worksheet.getRow(11).getCell(3).value = await rdi[0].reference; //Referencia
  worksheet.getRow(13).getCell(3).value = await rdi[0].title; //Titulo de RFI
  worksheet.getRow(15).getCell(2).value = await rdi[0].description; //Descripcion

  // Crear Excel
  await workbook.xlsx.writeFile(`F-RFI-V${id_rdi}.xlsx`);
  file = `${__dirname}/F-RFI-V${id_rdi}.xlsx`;
  console.log("Exito");
  await res.sendFile(file);

Código de la lectura del Excel (FRONTEND)

axios.get(Url_base + `/rdi/download/${id}`, {
          responseType: 'blob',
          headers: {
            'Accept': 'vnd.ms-excel'
          }
        })
        .then(res => {
          const url = window.URL.createObjectURL(new Blob([res.data]));
          console.log("URL => ", url);
          const link = document.createElement("a");
          link.href = url;
          link.setAttribute("download", `F-RFI-V${rdi_id}.xlsx`);
          document.body.appendChild(link);
          link.click();
          document.body.removeChild(link);

        })
        .catch(err => {
          toastr.error(err.message, "Error", {
            progressBar: true,
            positionClass: "toast-bottom-left"
          });
        });

Si me realiza la descarga correctamente en lado del cliente. introducir la descripción de la imagen aquí

Esto es el problema, que también realiza la descarga dentro de mis archivos del backend.

introducir la descripción de la imagen aquí

Agradecería demasiado su apoyo.

1
  • 1
    añade el código como texto y no como imagen por favor
    – user128299
    Commented el 14 jul. 2019 a las 21:04

2 respuestas 2

2

El problema lo tienes en el método que estás usando para generar el archivo de Excel. El método writeFile() realizará la escritura del archivo en el sistema de archivos. Para evitar esto, debes usar el método writeBuffer() y cambiar la forma en que envías los datos al cliente.

PROBLEMA

Cada vez que se realiza una petición de descarga del recurso al servidor, el proceso que se encarga de enviar el recurso crea una copia local del archivo en el servidor.

Se desea evitar dicho comportamiento.

SOLUCIÓN

De acuerdo a la documentación de ExcelJS, debes usar el método writeBuffer(), el cual devuelve los datos en una variable tipo Buffer.

De esta forma la variable almacena el contenido del archivo de Excel sin realizar una escritura del mismo en el sistema de archivos.

Luego puedes enviar el buffer de datos usando el método send() del objeto response de ExpressJS.

Una forma en la que puedes implementar la solución sería la siguiente:

const id_rdi = req.params.id;

const rdi = await pool.query("SELECT *, p.name FROM rdi r INNER JOIN project p ON r.id_project = p.id WHERE r.id =  ?", [id_rdi]);
// Creacion RDI
let workbook = new Excel.Workbook();
workbook = await workbook.xlsx.readFile("RDI_template.xlsx");
let worksheet = await workbook.getWorksheet("Hoja1");
// Guardar Informacion en la template
worksheet.getRow(5).getCell(3).value = await rdi[0].name; //Nombre del la empresa
worksheet.getRow(8).getCell(3).value = await ""; //Nombre del la empresa
worksheet.getRow(8).getCell(7).value = await rdi[0].type; //Tipo de RDI
worksheet.getRow(8).getCell(11).value = await rdi[0].reporter; //Emisor
worksheet.getRow(9).getCell(3).value = await rdi[0].speciality; //Especialidad
worksheet.getRow(9).getCell(11).value = await rdi[0].created_at; //Fecha de Emision
worksheet.getRow(10).getCell(3).value = await rdi[0].location; //Ubicacion
worksheet.getRow(10).getCell(11).value = await rdi[0].deadline; //Fecha requerida
worksheet.getRow(11).getCell(3).value = await rdi[0].reference; //Referencia
worksheet.getRow(13).getCell(3).value = await rdi[0].title; //Titulo de RFI
worksheet.getRow(15).getCell(2).value = await rdi[0].description; //Descripcion
// Crear Excel
// AQUI USARAS EL METODO writeBuffer() que devuelve un Buffer
const buffer =  await workbook.xlsx.writeBuffer();

//DECLARAS EL NOMBRE DE TU ARCHIVO
const fileName = `F-RFI-V${id_rdi}.xlsx`

// ESTABLECES LA CABECERA PARA INDICAR QUE ENVIARAS UN ARCHIVO PARA DESCARGAR
// EN LA CABECERA INDICAS EL NOMBRE DEL ARCHIVO
console.log('Sending buffer');

res.set({
  'Content-Type': 'application/octet-stream',
  'Content-Disposition': 'attachment; filename="' + fileName + '"',
  'x-processed-filename': fileName // <= cabezera personalizada para enviar el nombre del archivo procesado para su descarga
});

// Usaremos el método send(), en vez del método sendFile().
await res.status(200).send(buffer); // <= No le veo el sentido a hacer la llamada con await

EDICIÓN

Dado que usas axios en el lado cliente, te muestro una manera básica de obtener el archivo que estás generando en el servidor para su descarga. Puedes adaptar el código a tu requerimiento agregando los detalles que hagan falta sobre la ruta. Puedes enviar el nombre del archivo en una cabecera personalizada para extraerlo al momento de recibir la respuesta del servidor.

<button type="button" id="download">Descargar</button>
<div id="headers"></div>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
    const button = document.getElementById('download');
    button.addEventListener('click', (event) => {
      event.preventDefault();
      axios.get('http://localhost:3000/download', {  // <= sustituyes por tu ruta
        responseType: 'blob',
        headers: {
          Accept: 'application/octet-stream'
        }
      })
        .then((res) => {
          const fileName = res.headers['x-processed-filename']; // <= cabezera personalizada
          const url = window.URL.createObjectURL(new Blob([res.data]));
          const link = document.createElement('a');
          link.href = url;
          // link.setAttribute('download', fileName);
          link.setAttribute("download", `F-RFI-V${rdi_id}.xlsx`);
          document.body.appendChild(link);
          link.click();
          link.remove();
        });
    });
</script>

Con esto ya podrás realizar la descarga del archivo usando la librería ExcelJS.

Puedes leer más sobre las cabeceras y métodos usados en:

Puedes ver una implementación básica en el siguiente repositorio de Github:

https://github.com/virtualkur2/node-exceljs-example

EDICIÓN 2

Había un bug en el código, se deben pasar las siguientes opciones de configuración al método get() de axios:

{
  responseType: 'blob',
  headers: {
    Accept: 'application/octet-stream'
  }
}

Además, el stream de datos viene en el objeto data del response, por lo tanto hay que cambiar el argumento del método createObjectURL(), el mismo debe quedar así:

const url = window.URL.createObjectURL(new Blob([res.data])); // <= se debe usar res.data

Espero que con esto soluciones el problema.

P.D.:

El repositorio de github ya ha sido actualizado.

10
  • Hola amigo hice la implementación tal cual me comentas, pero el resultado es una hoja de texto, sin mostrar ningún resultado. Commented el 16 jul. 2019 a las 14:46
  • Tienes razón, había un error en el código, faltó poner el argumento de opciones de tipo de respuesta esperada y la cabecera Accept, además el stream de datos viene en el objeto res.data, y erróneamente lo olvidé al colocar el argumento. Ya todo está editado y funcionando. Saludos Commented el 16 jul. 2019 a las 15:36
  • Amigo, igual me sigue descargando un archivo en texto plano con nombre undefined, a diferencia del anterior es que esta vez me agrego la data. Commented el 16 jul. 2019 a las 15:45
  • Estás usando el código del repositorio? Tal vez sea un tema de navegador o algo, uso Firefox 67.0.4 (64-bit) sobre Linux, también lo he probado con Google Chrome, si el nombre del fichero te sale undefined debes verificar que el mismo se envía correctamente en la cabecera personalizada y que lo estás capturando correctamente en el cliente. Has un console.log(res.headers); en el lado cliente, para que veas las cabeceras que vienen incorporadas. Commented el 16 jul. 2019 a las 15:56
  • 1
    Bueno, solo falta el valor del archivo, yo te doy esta alternativa. En tu código de la pregunta lo tenías escrito a mano: link.setAttribute("download", `F-RFI-V${rdi_id}.xlsx`);, si esa forma te funciona, puedes hacerlo así. No puedo reproducir el error que te da a ti ya que no tengo a mano un equipo con Windows 10, aunque no creo que sea ese el problema. Commented el 16 jul. 2019 a las 16:10
0

en que momento creas el archivo? si tienes que crearlo cada vez que lo envías entonces tendrás que guardarlo, hay un var workbook = createAndFillWorkbook(); en tu código? si es así entonces se creara un archivo cada vez que ese código se ejecute.

6
  • Acabo de agregar el codigo completo amigo. Commented el 14 jul. 2019 a las 21:55
  • Intenta quitando la linea await workbook.xlsx.writeFile(F-RFI-V${id_rdi}.xlsx); estas escribiendo un nuevo excel , envia el que ya tenias creado RDI_template.xlsx Commented el 14 jul. 2019 a las 22:13
  • Me sale el siguiente problema en el cliente GET localhost:3000/rdi/download/1 404 (Not Found) y en el servidor el siguiente problema Error: ENOENT: no such file or directory, stat 'C:\Users\user\Desktop\lisis_v2_server\F-RFI-V1.xlsx' Commented el 14 jul. 2019 a las 22:16
  • debes de cerrar la conexión para que el archivo pueda liberarse y poder ser enviado intenta con worksheet.commit() Commented el 14 jul. 2019 a las 22:22
  • En que parte estaría agregando la linea que mencionas? Commented el 14 jul. 2019 a las 22:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.