0

Ola, eu estou com problemas em fazer do download de um arquivo gerado pelo backend no meu projeto angular, eu tenho o seguinte metodo

generateXlsx(obj) {
let headers = new Headers();
let token = localStorage.getItem('token');
let client = localStorage.getItem('client');
let uid = localStorage.getItem('uid');
headers.append('access-token', token);
headers.append('client', client);
headers.append('uid', uid);
return this.http.get(this.xlsxUrl, { params: obj, headers: headers });
}

Quando ele e chamado ele vai para Url de download do meu arquivo, porem quando eu chamo essa Rota/Url via angular, ele não faz o download, porem na aba de Network o arquivo esta salvo em response, segue print do resultado Codigo gerado no response

No meu FrontEnd, quando eu aperto um botão e chamado o seguinte metodo

generatePlanilha(obj) {
this.api.generateXlsx(obj)
  .subscribe(response => {
    if (response) {
      console.log("Planilha Gerada");
    }
  },
    (error => { console.log("NAO GEROU PLANILJA") }));
  }

Eu queria saber como eu faço para baixar a resposta que esta no Network

1 Resposta 1

1

Você pode criar um blob a partir do response e fazer o download dele abrindo um popup com os dados:

 import 'rxjs/add/operator/map';

 .map((res:Response) => res.text())
 .subscribe(response => {
    if (response) {
      const blob = new Blob([response], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      const url= window.URL.createObjectURL(blob);
      window.open(url);
    }
  },
    (error => { console.log("NAO GEROU PLANILJA") }));
  }

https://developer.mozilla.org/pt-BR/docs/Web/API/Blob

https://developer.mozilla.org/en-US/docs/Web/API/Window/open

https://stackoverflow.com/questions/2937465/what-is-correct-content-type-for-excel-files

10
  • Esta dando o seguinte erro no "[response]" [ts] Type 'Response' is not assignable to type 'BlobPart'. Type 'Response' is not assignable to type 'Blob'. Property 'size' is missing in type 'Response'. [2322] (parameter) response: Response 3/12/2018 às 16:18
  • Tenta com essa modificação que fiz, .map((res:Response) => res.text()) 3/12/2018 às 16:22
  • agora os parametros do .map deu o seguinte erro: [ts] Argument of type '(res: Response) => Promise<string>' is not assignable to parameter of type '(value: Response, index: number) => Promise<string>'. Types of parameters 'res' and 'value' are incompatible. Type 'import("/home/marcelo/Desktop/Mercatorio/dashboard/node_modules/@angular/http/src/static_response").Response' is not assignable to type 'Response'. Property 'redirected' is missing in type 'Response'. [2345] 3/12/2018 às 16:24
  • Qual a versão do angular? Pode ter alguma mudança na importação do map, tenta assim : import { map } from "rxjs/operators"; 3/12/2018 às 16:41
  • Angular CLI: 7.0.4 Node: 8.12.0 OS: linux x64 Angular: 5.1.2, eu ja importei o map 3/12/2018 às 16:47

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .