下载文件不起作用

Question

我是Javascript的新手，我想在承诺的结果后下载来自动态网址的文件，它是生成的pdf，我试图通过以下调用下载，但无法使其工作，因为下载没有开始

<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
})
}

这是插件

Answer 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 ）。

Answer 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)=>{})
}

Answer 3

使用以下代码行：

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

或者你可以使用http://mozilla.github.io/pdf.js/上的 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

Answer 4

而不是制作ajax请求下载文件只需执行以下操作。

window.open(url);

Answer 5

app.module.ts （3个不同的文件）：

 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');
  }

Answer 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);
    }
  }

Answer 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
      })
  }

Answer 8

以下代码适用于在IE和chrome / safari中下载API respone。 这里的响应变量是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);
    }

Answer 9

你可以通过在标签中写下载来下载任何动态文件，你可以在其中获取文件的URL。 尝试这个，让我知道它是否适合你。

这是工作示例：

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

Answer 10

Javascript实际上并不是必需的，所以我会建议最懒惰和最简单的解决方案 - 简单地使用基本的html标签。

使用带有download关键字的锚标记而不是按钮：

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

非常老的不支持HTML5的浏览器会优雅地失败 - 不是下载目标，旧的浏览器只会在浏览器中显示目标。 这是非常优雅的退化和完全可以接受的后备。

您可以使用css将锚设置为任何您想要的样式，并且也是语义上最正确的标记：锚点用于链接（这是一个链接），而按钮用于与表单交互（如提交）或与其他交互UI。 最终用户无论如何都不会知道或关心您使用的标签。

如果将更改网址，例如根据与UI的交互获取不同的参数，您可以始终使用javascript更新标记上的网址 - 但这是一个不同的问题。

在MDN上引用Anchor标记