Question

我要点击按钮下载.pdf文件，我正在使用以下代码

downloadMyFile() {
        const link = document.createElement('a');
        link.setAttribute('target', '_blank');
        link.setAttribute('href', 'http://designs.mydeievents.com/jq-3d-flip-book/books/pdf/aqua_imagica_visit_learnings.pdf');
        link.setAttribute('download', 'aqua_imagica_visit_learnings.pdf');
        document.body.appendChild(link);
        link.click();
        link.remove();
      }

<button (click)="downloadMyFile()">download File</button>

但是，当我单击按钮时，它会重定向到新页面，但我想下载“ aqua_imagica_visit_learnings.pdf”文件。请帮助我。这是我的链接[http://stackblitz.com/edit/angular-4hjad7]

Answer 1

根据this。如果您在锚点上使用download属性，则不会下载.pdf文件：

但是，某些文件类型（例如图像，.pdf，.txt和.doc）将不会下载。相反，它们将在浏览器中打开。

Answer 2

使用检查元素并确保您的链接看起来像这样代替

link.setAttribute('download', 'aqua_imagica_visit_learnings.pdf');

尝试这样做。

link.download = "aqua_imagica_visit_learnings.pdf";

Answer 3

您可以使用ts下载：

 async download(id: number) {
        try {
            const res = await this.service.getDocument(id);
            this.downloadFile(res);
        } catch (e) {
            this.session.addSingleMessage(e.body.message);
        }
    }

    downloadFile(data) {
        const url = window.URL.createObjectURL(data);
        window.open(url);
    }

模板：

<button click="download(1)>Download</button>

服务：

 async getDocument(id: number): Promise<any> {
        this.session.setLoading();
        const resp = await this.httpClient.get(`/api/document/${id}/download`, { responseType: 'blob' }).toPromise();
        this.session.resetLoading();
        return resp;
    }

如何在Angular 6中单击按钮下载PDF文件

3 个答案: