Я новичок в Javascript, я хочу загрузить файл, который исходит из динамического url после результата обещания, это сгенерированный PDF файл, который я пытаюсь загрузить с помощью следующего вызова, но не могу заставить его работать как загрузка. t начать.
<button (click)='downloadMyFile()'>Download</button>
downloadMyFile(){
//url
.then((result)=>{
//result is contains a url www.abc.com/file234
window.location.href = result
})
.catch((error)=>{
//myerror
})
}
Вот плунж
Вы можете принудительно загрузить файл загрузки следующим образом:
const link = document.createElement('a');
link.href = result;
link.download = 'download';
link.target = '_blank';
link.click();
Просто создайте привязывающий тег, установите его атрибуты href и download и активируйте событие click.
Также обратите внимание, что на самом деле это не касается URL-адреса, заканчивающегося расширением или нет, - это больше о заголовках, которые вы отправляете с ответом на файл (а именно Content-Type и Content-Disposition).
<button (click)='downloadMyFile()'>Download</button>
downloadMyFile(){
.then((result)=>{
var a= document.createElement('a');
a.href = result;
a.download = 'download name';
a.click();
}).catch((error)=>{})
}
Используйте эту строку кодов:
//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
вместо того, чтобы делать запрос ajax для загрузки файла, просто выполните следующее.
window.open(url);
(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');
}
использовать функцию 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);
}
}
Вы можете загрузить ответ своего обещания, как указано ниже:
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
})
}
Вот код, который работает для загрузки 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);
}
вы можете загрузить любой динамический файл, просто напишите загрузку в теге, где вы выбрали url для файла. попробуйте это и сообщите мне, если он сработает для вас.
вот рабочий пример:
<a href="http://unec.edu.az/application/uploads/2014/12/pdf-sample.pdf" download>
Javascript на самом деле не нужен для этого, поэтому я предлагаю самое ленивое и самое простое решение - вместо этого просто используйте базовый тег html.
Вместо кнопки используйте тег привязки с ключевым словом для загрузки:
<a href="www.abc.com/file234" download="SuggestedFileName">Download</a>
Очень старые браузеры, которые не поддерживают HTML5, потерпят неудачу элегантно - вместо загрузки целевой страницы старые браузеры просто отображают цель в браузере. Это очень грациозная деградация и вполне приемлемый откат.
Вы можете привязать якорь так, как хотите, с помощью css, а также наиболее семантически правильный тег: привязки для ссылок (и это ссылка), а кнопки для взаимодействия с формами (например, submit) или другими взаимодействиями с UI. Конечный пользователь не будет знать, какой тег вы используете в любом случае.
Если URL будет изменен, например, получение разных параметров на основе взаимодействия с пользовательским интерфейсом, вы всегда можете использовать javascript для обновления URL-адреса в теге, но это другой вопрос.