从 api 调用获取文件路径字符串后自动下载 PDF答案

【问题标题】：Download PDF automatically after getting file path string from api call从 api 调用获取文件路径字符串后自动下载 PDF
【发布时间】：2019-07-30 21:32:26
【问题描述】：

我有这个代码 sn-p，它返回一个字符串，它是一个 pdf 文件的路径。我想知道，在我进行此调用后，我可以让它在浏览器中自动下载 pdf，而不是只返回字符串吗？如果是这样，怎么做？

getMergedPDF(filesToUpload: Array<string>) {
    return this.http.post<string>('http://localhost:8080/merge-pdf', filesToUpload)
    .subscribe(data  => this.mergedUrl = data);
  }

上面返回的字符串是文件路径：/Users/foo/Documents/PDFMerger/PDFMerger/server/test-pdfs/merged-pdf.pdf

编辑：当我尝试以下解决方案时，文件无法加载。

【问题讨论】：

嗨。我是应你的要求来的。我不确定为什么您的解决方案不起作用，但如果我必须猜测那是因为您没有任何服务器为您的 pdf 文件提供服务？如果你是这样，应该将你的 url 从“localhost:4200/.../”更改为“file://users/.../”。如果我是你，我会尝试让 ng 服务主机并提供我的 pdf 文件。将它放在您的 Angular 项目中的资产文件夹中。然后，该 URL 应类似于“localhost:4200/assets/merge-pdf.pdf”。这将是确保您的打字稿代码正确获取文件的第一步。

标签： javascript node.js angular typescript

【解决方案1】：

你会有类似的东西：

.subscribe(data  => {
  var dl = document.createElement('a');
  dl.setAttribute('href', data);
  dl.setAttribute('download', 'pdfname.pdf');
  document.body.appendChild(dl);
  dl.click();
  document.body.removeChild(dl);
});

【讨论】：

这里的“a”是什么？
HTML 锚标记
应该将 appendChild(a) 改为 appendChild(dl) 吗？
另外，您似乎已经很接近了，但它在路径上返回了一个文件：localhost:4200/(filepath-i-specify-above) 它没有找到。
已编辑。你需要有相对的文件路径才能工作。

【解决方案2】：

你可以试试这个：

            getMergedPDF(filesToUpload: Array<string>) {
    return this.http.post<string>('http://localhost:8080/merge-pdf', filesToUpload)
    .subscribe(data  => {
             this.mergedUrl = data;
             this.getPDF(this.mergedUrl);});
getPDF(uri){
this.http.get(uri, { responseType: 'blob' }) .subscribe(x=>{

            var newBlob = new Blob([x], { type: "application/pdf" });

           //IE Fix
            if (window.navigator && window.navigator.msSaveOrOpenBlob) {
                window.navigator.msSaveOrOpenBlob(newBlob);
                return;
            }
            const data = window.URL.createObjectURL(newBlob);
            var link = document.createElement('a');
            link.href = data;
            link.download = "merge.pdf";
            link.dispatchEvent(new MouseEvent('click', { bubbles: true, cancelable: true, view: window }));

            setTimeout(function () {
                window.URL.revokeObjectURL(data);
                link.remove();
            }, 100);
        });

【讨论】：

ReferenceError: x 未定义
您得到的是链接而不是对象。我修改了我的答案。现在它应该可以工作了
我收到这个错误：HttpErrorResponse {headers: HttpHeaders, status: 404, statusText: "Not Found", url: "localhost:4200/Users/~/Documents/PDFMerger/PDFMerger/server/…", ok: false, ...}