Скачать файл не работает

Ответ 1

Вы можете принудительно загрузить файл загрузки следующим образом:

const link = document.createElement('a');
link.href = result;
link.download = 'download';
link.target = '_blank';
link.click();

Просто создайте привязывающий тег, установите его атрибуты href и download и активируйте событие click.

Также обратите внимание, что на самом деле это не касается URL-адреса, заканчивающегося расширением или нет, - это больше о заголовках, которые вы отправляете с ответом на файл (а именно Content-Type и Content-Disposition).

Ответ 2

<button (click)='downloadMyFile()'>Download</button>

downloadMyFile(){
  .then((result)=>{
       var a= document.createElement('a');
       a.href = result;
       a.download = 'download name';
       a.click();
   }).catch((error)=>{})
}

Ответ 3

Используйте эту строку кодов:

    //redirect current page to success page
    window.location="www.example.com/success.html";
    window.focus();

ИЛИ Вы можете использовать pdf.js из http://mozilla.github.io/pdf.js/

    PDFJS.getDocument({ url: pdf_url }).then(function(pdf_doc) {
        __PDF_DOC = pdf_doc;
        __TOTAL_PAGES = __PDF_DOC.numPages;

        // Hide the pdf loader and show pdf container in HTML
        $("#pdf-loader").hide();
        $("#pdf-contents").show();
        $("#pdf-total-pages").text(__TOTAL_PAGES);

        // Show the first page
        showPage(1);
    }).catch(function(error) {

        alert(error.message);
    });;

Источник и полный код: http://usefulangle.com/post/20/pdfjs-tutorial-1-preview-pdf-during-upload-wih-next-prev-buttons

Ответ 4

вместо того, чтобы делать запрос ajax для загрузки файла, просто выполните следующее.

window.open(url);

Ответ 5

(3 разных файла) в app.module.ts:

 import {HttpClientModule} from '@angular/common/http';
 ...
 providers: [
    HttpClientModule,
    ...

в api.service.ts:

import {HttpClient, HttpErrorResponse, HttpHeaders, HttpParams, HttpResponse} from '@angular/common/http';
...
public getMeMyPDF(): any {
    const url =  '/my/api/for/pdf';
    this.PDF = this.http.get(url, {
      observe: 'response',
      headers: new HttpHeaders({'Content-Type', 'application/pdf'}),
      responseType: 'text' as 'text' // <-- this part is rediculous but necessary
    }).catch(this.handleError);
    return this.PDF;
}

handleError(error: HttpErrorResponse) {
  console.log('an http get error happened.');
  console.error(error);
  let errorMessage;
  if (error.error instanceof Error) {
    errorMessage = 'An error occurred: ${error.error.message}';
  } else {
    errorMessage = 'Server returned code: ${error.status}, error message is: ${error.message}';
  }
  console.error(errorMessage);
  return errorMessage;
}

и в my.component.that.calls.api:

getMeAPDF(){
    this.apiService.getMeMyPDF().subscribe(res => {
      if(res !== null && res !== undefined){
        this.saveToFileSystem(res.body);
      }
    }, (error) => console.log(error), () => {});
  }

  private saveToFileSystem(response) {
    const blob = new Blob([response], { type: 'text/pdf' });
    const d = new Date();
    saveAs(blob, 'WOWPDF_' + this._datepipe.transform(d, 'yyyyMMdd_HHmmss') + '.pdf');
  }

Ответ 6

использовать функцию saveAs() с помощью npm install @types/file-saver --save-dev

или в package.json:

  "dependencies": {
    "file-saver": "^1.3.3"
  }

Образец для экспорта CSV файла:

HTML:

<button (click)="exportCsv()" id="exportCsv" class="btn btn-primary" type="submit">CSV Export</button>

Составная часть:

import { FooService } from '../services/foo.service';

constructor(private fooService: FooService) { }

async exportCsv() {
  this.fooService.exportCsv(this.fooid);
}

Сервис (fooService):

import { saveAs } from 'file-saver';
import { HttpParams, HttpResponse} from '@angular/common/http';

exportCsv(fooid: string) {
    let params: HttpParams = new HttpParams();
    params = params.append('fooid', fooid);
    this.apiService.getCSVFile('api/foo/export', params).subscribe(response => this.saveToFileSystem(response)
    , error =>  this.errorProcessor(error));
}

private saveToFileSystem(response: HttpResponse<Blob>) {
    const contentDispositionHeader = response.headers.get('Content-Disposition');
    let filename = 'export.csv';
    if (contentDispositionHeader !== null) {
      const parts: string[] = contentDispositionHeader.split(';');
      filename = parts[1].split('=')[1];
    }
    const blob = response.body;
    if (blob !== null) {
        saveAs(blob, filename);
    }
  }

Ответ 7

Вы можете загрузить ответ своего обещания, как указано ниже:

 var triggerDownload = function(url, fileName) {
      var a = document.createElement("a");
      a.setAttribute("href", url);
      a.setAttribute("download", fileName);
      opts.container.append(a);
      a.click();
      $(a).remove();
  };

  downloadMyFile() {
      promise
       .then((result) => {
          triggerDownload(result, 'xyz.pdf'); 
        })
       .catch((error) => {
          //myerror
      })
  }

Ответ 8

Вот код, который работает для загрузки API в IE и chrome/safari. Здесь переменная ответа - ответ API.

 let blob = new Blob([response], {type: 'application/pdf'});
    let fileUrl = window.URL.createObjectURL(blob);
    if (window.navigator.msSaveOrOpenBlob) {
        window.navigator.msSaveOrOpenBlob(blob, fileUrl.split(':')[1] + '.pdf');
    } else {
        window.open(fileUrl);
    }

Ответ 9

вы можете загрузить любой динамический файл, просто напишите загрузку в теге, где вы выбрали url для файла. попробуйте это и сообщите мне, если он сработает для вас.

вот рабочий пример:

<a href="http://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf" download>

Ответ 10

Javascript на самом деле не нужен для этого, поэтому я предлагаю самое ленивое и самое простое решение - вместо этого просто используйте базовый тег html.

Вместо кнопки используйте тег привязки с ключевым словом для загрузки:

<a href="www.abc.com/file234" download="SuggestedFileName">Download</a>

Очень старые браузеры, которые не поддерживают HTML5, потерпят неудачу элегантно - вместо загрузки целевой страницы старые браузеры просто отображают цель в браузере. Это очень грациозная деградация и вполне приемлемый откат.

Вы можете привязать якорь так, как хотите, с помощью css, а также наиболее семантически правильный тег: привязки для ссылок (и это ссылка), а кнопки для взаимодействия с формами (например, submit) или другими взаимодействиями с UI. Конечный пользователь не будет знать, какой тег вы используете в любом случае.

Если URL будет изменен, например, получение разных параметров на основе взаимодействия с пользовательским интерфейсом, вы всегда можете использовать javascript для обновления URL-адреса в теге, но это другой вопрос.

Ссылка для тега привязки на MDN