javascript - 使用 ajax 发布复杂数据并在新窗口中打开返回的 PDF

Question

我需要使用 JQuery ajax 将复杂且敏感的数据对象(嵌套对象、数组和个人身份信息)发布到我的服务器，然后生成 PDF 并将其返回给客户端。然后，客户端浏览器应在新窗口中打开 PDF。

由于数据的性质，请求既不能也不应该是经过编码的 URL - 它必须将数据作为 JSON 正文包含在内。

关于这个主题的其他问题/答案没有解决我的问题，或者没有完全解决。

Answer 1

解决方案

1. 将正文中的数据作为 JSON 进行 POST。
2. 将响应的预期 Content-Type 设置为 arraybuffer(在客户端和服务器上)。
3. 请求成功完成后，将响应转换为 Blob。
4. 创建指向 Blob 的对象 url 并在新窗口中打开它。

注意事项

• JQuery ajax does not support arraybuffer Content-Type 因此必须使用基本 JavaScript xhr(如果您没有任何其他选项)。
• Internet Explorer 有自己的处理和显示 Blob 的功能，因此需要一种特殊情况。
• Supported browsers不包括 IE9

代码

RequestPdf = function (url, data) {
    var request = new XMLHttpRequest(), file, fileURL;
    request.open("POST", url);
    request.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
    request.responseType = "arraybuffer";
    request.send(data);
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            file = new Blob([request.response], { type: 'application/pdf' });
            if (window.navigator && window.navigator.msSaveOrOpenBlob) { // IE
                window.navigator.msSaveOrOpenBlob(file);
            } else {
                fileURL = URL.createObjectURL(file);
                window.open(fileURL);
            }
        }
    };
};