javascript - 在新窗口中使用 jquery 显示从 Controller 返回的 PDF 流

Question

我有一个 Controller 操作，它从 azure blobstorage 读取一个 .pdf 文件并将流对象返回给 $.ajax() 方法。

Controller 返回

var stream = blobStorage.OpenRead(filepath);
await FileAsync(stream, "application/pdf");

Ajax 调用和响应

$.ajax({
        type: "POST",
        url: "/PDFfile",
        data: { 'id': Id },
        dataType: "application/pdf",
        traditional: true,
        complete: function(data) {
            var w = window.open("data:application/pdf, " + escape(data.responseText));
            w.document.write(data.responseText);
            w.document.close();
        }
    });

但是，如果调用的是与所示相同的 Controller 操作，则文件会正确显示。

<a class="pull-right btn-link" target="_blank" data-bind="attr: { href: '/PDFfile/' + Id }"></a>

它可能看起来像一个重复的问题，但没有一个解决方案对我有用。 我得到的输出如图所示。

Answer 1

我找不到这个问题的确切答案。我发现了一堆不同的问题。 我终于能够使用 fetch 拼凑起来了。 您需要接受 'arraybuffer' 类型，然后使用 resopnse.blob() 变成一个 blob。然后您可以在新窗口中打开 blob。

          fetch('/post/url', {
                        method: 'POST',
                        headers: {
                            Accept: 'arraybuffer',
                            'Content-Type': 'application/json',
                        },
                        //you need to use json here
                        body: JSON.stringify({ items: [{ ItemId: 3, Quantity: 40 }], fileId: 2 });
                    })
                        .then(response => response.blob())
                        .then(data => {
                            var popup = window.open(URL.createObjectURL(data), "height=500,width=750);

                   });