Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

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

  • 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.