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

这是plunk

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

<{1}}中的

（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

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标签。

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

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

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

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

如果网址会被更改，比如根据与UI的互动获取不同的参数，您可以随时使用javascript来更新代码上的网址 - 但这是一个不同的问题。

Reference for Anchor tag on MDN

下载文件不起作用

10 个答案: