Javascript 下载PDF作为字节流

我有一个web API，它将文件存储为字节流。响应已经获取并保存在状态中，但现在我想单击按钮从react应用程序下载该文件。我的做法如下：

downloadContract( binaryData ) {
        const file = new Blob([binaryData], { type: 'application/pdf' });
        const fileURL = URL.createObjectURL(file);
        window.open(fileURL);
      }

调试后正确获取流，但下载文件时出错： 加载PDF文档时出错。

更新：

使用此源调用新端点：

  callLoadContract: {
    remote( state, id, contractId ) {
      const url = `${base}/vendor/${id}/${contractId }`;
      return $http.instance.api.get( url, id, contractId);
    },
    success: Actions.contractLoaded,
    error: Actions.fail
  }

处理回应：

  loadContract({id, contractId}) {
    this.getInstance().callLoadContract( id, contractId );
  }

  contractLoaded( response ) {
    if (response && response.data) {
      console.log(response);
      const file = new Blob([response.data], { type: 'application/pdf' });
      const fileURL = URL.createObjectURL(file);
      window.open(fileURL);
    }
  }

---

同样的错误。

也许您的问题与在客户端处理PDF的方式无关，因为您的代码运行得非常好：

import React from 'react';

export default class App extends React.Component {
    constructor(props, context) {
        super(props, context);
    }

    downloadContract() {
        var oReq = new XMLHttpRequest();

        var URLToPDF = "https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";

        oReq.open("GET", URLToPDF, true);

        oReq.responseType = "blob";

        oReq.onload = function() {
            // Once the file is downloaded, open a new window with the PDF
            // Remember to allow the POP-UPS in your browser
            const file = new Blob([oReq.response], { type: 'application/pdf' });

            const fileURL = URL.createObjectURL(file);

            window.open(fileURL, "_blank");
        };

        oReq.send();
    }

    render() {
        return (
            <div>
                <input type="button" onClick={this.downloadContract} value="Download PDF File"/>
            </div>
        );
    }
}

从“React”导入React；
导出默认类App扩展React.Component{
构造函数（道具、上下文）{
超级（道具、背景）；
}
下载合约（）{
var oReq=新的XMLHttpRequest（）；
var URLToPDF=”https://mozilla.github.io/pdf.js/web/compressed.tracemonkey-pldi-09.pdf";
open（“GET”，URLToPDF，true）；
oReq.responseType=“blob”；
oReq.onload=函数（）{
//下载文件后，使用PDF打开一个新窗口
//记住在浏览器中允许弹出窗口
const file=new Blob（[oReq.response]，{type:'application/pdf'}）；
const fileURL=URL.createObjectURL（文件）；
打开（fileURL，“_blank”）；
};
oReq.send（）；
}
render（）{
返回(
);
}
}

正如预期的那样，当用户单击下载时，PDF将被下载并显示在浏览器的新窗口中

---

然而，最简单的方法是@drinchev提到的方法，只需将其发送到URL中即可。

以下是我下载文件但不发送到新页面的解决方案：

try {
            let httpClient = new XMLHttpRequest();
            let pdfLink = "http://localhost/";
            httpClient.open('get', pdfLink, true);
            httpClient.responseType = "blob";
            httpClient.onload = function() {
                const file = new Blob([httpClient.response], { type: 'application/pdf' });
                const fileURL = URL.createObjectURL(file);
                const link = document.createElement("a");
                link.href = fileURL;
                link.download = "fileName.pdf";
                link.click();
                // document.body.removeChild(link);
                URL.revokeObjectURL(fileURL);
            };
            httpClient.send();
        } catch (e) {
            console.log(e);
        }

---

哪种响应类型正在接收您的JS代码，arraybuffer还是blob？为什么不从后端提供它呢。它们是blob格式的，我正在一次获取它们，然后用户应该选择查看哪一个@CarlosDelgado@drinchev多个文件位于同一个目录中entity@user1912404，您所说的在概念上是错误的，JSON字符串中的blob:v？你能解释一下你的问题吗？如果可能的话，还有服务器端代码吗？我同意你的观点，我们应该调用一个单独的端点来获取文档。只有一个问题，我能用flux架构实现同样的想法吗？它工作了，但没有经过altjs。我会接受的。对我来说是有效的，但我不想转到新的页面，只需下载