Ir para conteúdo
Guilherme Costa Lopes

Download de qualquer arquivo em angular 9

Recommended Posts

component
     download(idArquivo: number): void {
         this.arquivosService.downloadArquivoOrcamento(idArquivo).subscribe(
           data => {
             const blob = new Blob([data.arquivo], { type: 'text/json; charset=utf-8' });
             const url= window.URL.createObjectURL(blob);
             window.open(url);
           },
           err => {
             console.error(err);
           }
         )
       }
Service
     import { HttpClient, HttpHeaders } from '@angular/common/http';
     import { Injectable } from '@angular/core';
     import { SERVER_API_URL } from 'app/app.constants';
     import { Observable } from 'rxjs';
     @Injectable({
         providedIn: 'root'
     })
     export class ArquivosService {
         constructor(
             private http: HttpClient
         ) {}
         downloadArquivoOrcamento(id: number, tipo: string): Observable<any> {
             return this.http.get(SERVER_API_URL + '/api/orcamento-anexo/' + id, 
             {
                 responseType: 'blob',
                 headers: new HttpHeaders().append('Content-Type', tipo)
             });
         }
     }
Retorno do backend

nG4rT.png

Não retorna o arquivo conforme imagem anterior
8SMxE.png

 

Dowload com erro

60cdt.png

 

 

Já pesquisei e fiz alguma alteração, mas não achei a solução. O que quero é simples. O arquivo vem do backend em bytesm nome e content-type. Só quero fazer o dowload.

O que pode ser ?

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por araujoitalo
      Olá a todos!
       
      Estou trabalhando em uma tabela utilizando a bilioteca ng2-smart-table e estou com uma dificuldade em passar para um componente customizado os valores inseridos na linha de edição:
       
      Veja o código abaixo, gostaria de passar para o componente SmartTableEditorFunctionsComponent os valores de Temperatura Máxima e Minima ao inserir uma nova linha na tabela.
      temperaturaMaxima: { type: 'number', title: 'Temperatura Máxima', }, temperaturaMinima: { title: 'Temperatura Mínima', type: 'number', }, temperaturaMedia: { title: 'Temperatura Média', type: 'number', editor: { type: 'custom', component: SmartTableEditorFunctionsComponent, valuePrepareFunction(instance) { instance.save.subscribe(); }, }, },  
      Imagem da tabela: 

       
      Criei um botão para tentar recuperar o valor, porem sem sucesso.
       
      Código do componente:
       
      export class SmartTableEditorFunctionsComponent extends DefaultEditor { @Input() value: string | number; @Input() rowData: any; @Output() save: EventEmitter<any> = new EventEmitter(); constructor() { super(); } getPlaceholder(value: any) { const id = value.column.temperaturaMaxima; return id; } test() { const id = this.rowData.temperaturaMaxima; alert('TESTE' + id); } } Código do template do componente: 
      {{ cell.newValue }} <input type="number" [(ngModel)]="cell.newValue" [name]="cell.getId()" [placeholder]="cell.getTitle()" [disabled]="!cell.isEditable()" (click)="onClick.emit($event)" /> <button (click)="test()">Pega Valor</button> Alguém poderia me ajudar?
    • Por araujoitalo
      Olá a todos!
       
      Estou trabalhando em uma tabela utilizando a bilioteca ng2-smart-table e estou com uma dificuldade em passar para um componente customizado os valores inseridos na linha de edição:
       
      Veja o código abaixo, gostaria de passar para o componente SmartTableEditorFunctionsComponent os valores de Temperatura Máxima e Minima ao inserir uma nova linha na tabela.
      temperaturaMaxima: { type: 'number', title: 'Temperatura Máxima', }, temperaturaMinima: { title: 'Temperatura Mínima', type: 'number', }, temperaturaMedia: { title: 'Temperatura Média', type: 'number', editor: { type: 'custom', component: SmartTableEditorFunctionsComponent, valuePrepareFunction(instance) { instance.save.subscribe(); }, }, },  
      Imagem da tabela: 

       
      Criei um botão para tentar recuperar o valor, porem sem sucesso.
       
      Código do componente:
       
      export class SmartTableEditorFunctionsComponent extends DefaultEditor { @Input() value: string | number; @Input() rowData: any; @Output() save: EventEmitter<any> = new EventEmitter(); constructor() { super(); } getPlaceholder(value: any) { const id = value.column.temperaturaMaxima; return id; } test() { const id = this.rowData.temperaturaMaxima; alert('TESTE' + id); } } Código do template do componente: 
      {{ cell.newValue }} <input type="number" [(ngModel)]="cell.newValue" [name]="cell.getId()" [placeholder]="cell.getTitle()" [disabled]="!cell.isEditable()" (click)="onClick.emit($event)" /> <button (click)="test()">Pega Valor</button> Alguém poderia me ajudar?
    • Por Guilherme Costa Lopes
      Estou usando o AgmCoreModule, para marcar endereços no google maps.
      No module, no import
           imports: [
               AgmCoreModule.forRoot({
                 apiKey: 'xxxxxxxxxxx'
              }),
           ]
      no export
            exports: [
                  AgmCoreModule
           ]
      No ts
           texto = 'teste';
             lat = -19.91506;
             lng = -44.00752;
             zoom = 15;
      No html
           <agm-map [latitude]="lat" [zoom]="zoom" [longitude]="lng">
             <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
           </agm-map>
      A principio ele mostra
       
      Mas depois dá este erro

      Ou este erro

      No servidor está dando este erro.

       
      O Chave key está  liberada
       
          main.cb562ea7df40e3f09b5f.bundle.js:2 Refused to load the script 'https://maps.googleapis.com/maps/api/js?v=quarterly&callback=agmLazyMapsAPILoader&key=AIzaSyCD54jiJhEBda5MtJkgFJB-hfR6dv5V9jw&language=pt' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://storage.googleapis.com". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
       
           main.cb562ea7df40e3f09b5f.bundle.js:2 ERROR Error: Uncaught (in promise): Event: {"isTrusted":true}
               at x (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at x (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at main.cb562ea7df40e3f09b5f.bundle.js:2
               at e.invokeTask (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at Object.onInvokeTask (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at e.invokeTask (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at t.runTask (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at y (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at t.invokeTask [as invoke] (main.cb562ea7df40e3f09b5f.bundle.js:2)
               at u (main.cb562ea7df40e3f09b5f.bundle.js:2)
      O  que pode ser ?
       
       
       
    • Por rdavisp
      Senhores, boa tarde.

      Pesquisei muito antes de abrir esse post, inclusive aqui, neste fórum. Encontrei dúvidas parecidas as quais tentei adaptar ao meu caso porem sem sucesso.

      A questão é a seguinte:

      Foi desenvolvida uma API em ASP.NET Core 2.0, mas por algumas solicitações do cliente, necessitei migrar para a versão 3.1. Existe uma SPA em Angular 7 que faz a requisição à API através de um método POST passando os parâmetros para a API que retornava um conjunto de dados para aplicação montar a tela. Após a atualização parou de funcionar! Por isso, gostaria de pedir a ajuda de vocês, por que, eu já esgotei as minhas tentativas.

      **No Controller da API está da seguinte maneira:**
       
      1 2 3 4 5 6 7 8 [HttpPost] [Route("api/[controller]")] public IGResult Post(Filtro filtro) {     Console.WriteLine("filtro: " + filtro);     var app = new IgApplication();     return app.getInstrucoes(filtro); }
      **E no angular se encontra dessa forma:**
       
      1 return this._http.post<IgResult>(environment.url + 'api/IG',  this.Filtro, options)

      Ao debugar a API, percebo que os dados do parâmetro **body** chegam nulos. Já tentei das seguintes maneiras abaixo, mudar a implementação do POST na API porém sem sucesso:
       
      1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 > //public async Task<IActionResult> Post([FromBody] Filtro pessoa) >         //public HttpResponseMessage Post(Filtro pessoa) >         //public async Task<ActionResult<IList<Todo>>> Create([FromBody]TodoCreateViewModel model) >         //public Task<IActionResult> Post([FromBody] Filtro filtro) >         //public ActionResult<Filtro> Post([FromBody] Filtro filtro) >         //public HttpResponseMessage Post(Filtro filtro) >         //public string Post([FromBody] Filtro filtro) >         //public IActionResult Post([FromBody] Filtro filtro) >         //{ >         //var app = new IgApplication(); >         //return app.getInstrucoes(filtro); >         //return null;// Json(filtro); >         //} >         //public async System.Threading.Tasks.Task<string> Post(HttpRequestMessage request) >         //{ >         //    string body = await request.Content.ReadAsStringAsync(); >         //    return body; >         //}

      Por isso se possível, gostaria muito de contar com a colaboração de vocês.

      Desde já muito obrigado!
    • Por rdavisp
      Senhores, bom dia.
      Mais uma vez recorro a ajuda de vocês para algo que não domino ainda. Vamos lá!
      Tenho uma API que quando startada, ela sobe no seguinte endereço: http://localhost:49013/api/values. Percebi que isto é parametrizado no arquivo launchSettings.json, que está assim:
       
      {   "iisSettings": {     "windowsAuthentication": false,     "anonymousAuthentication": true,     "iisExpress": {       "applicationUrl": "http://localhost:49013/",       "sslPort": 0     }   },   "profiles":    {     "IIS Express": {       "commandName": "IISExpress",       "launchBrowser": true,       "launchUrl": "api/values",       "environmentVariables": {         "ASPNETCORE_ENVIRONMENT": "Development"       }     },     "Cliente.IG.WebAPI": {       "commandName": "Project",       "launchBrowser": true,       "launchUrl": "api/values",       "environmentVariables": {         "ASPNETCORE_ENVIRONMENT": "Development"       },       "applicationUrl": "http://localhost:49012/"     }   } }  
      No meu controller da API, tenho seguinte método dentro do namespace:
       
          [Produces("application/json")]     [Route("api/IG")]     [ApiController]     public class IGController : Controller     {         [HttpPost]         public IGResult Post([FromBody] Filtro filtro)         {             var app = new IgApplication();             return app.getInstrucoes(filtro);         }     }  
      O "IgApplication" cria uma instância da classe onde é gerado uma lista que é populada com os valores atribuídos do DAO.
       
      Quando inicializo a aplicação "A" em angular através do localhost (http://localhost:4200/). Dentro do meu arquivo environment.prod.ts tenho a chamada:
       
      export const environment = {   production: true,   url: 'http://localhost:49013/' };  
      Ela passa por esse controller e segue o fluxo e faz o que tem que ser feito. 
      Porém, eis a questão! Eu possuo a aplicação "B", que acessa a mesma API porém possui funcionalidades diferente, por isso, dentro do mesmo controller eu criei uma nova classe e um método:
       
          [Produces("application/json")]     [Route("api/Item")]     public class APIIgItemController : Controller     {         [HttpGet]         public ItensResult Post([FromBody] Itens ValorItem)         {             var app = new CRUDApplication();             return app.GetItens();         }     }  
      Como faço para quando for startar a aplicação "B", ele passe por esse método "ItensResult" ao invés "IGResult", sendo que ambas são executadas pelo localhost:4200? Ou isso eu defino na aplicação angular? Vi que é possível configurar mais de uma "applicationUrl" dentro do json. Devo considerar essa configuração?
       
      Grato a quem puder ajudar!
       
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.