Question

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

控制器返回

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();
        }
    });

但是，如果呼叫与所示的控制器操作相同，则文件显示正确。

<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);

                   });

Answer 2

为什么不使用标准HTML？这里不需要Javascript（因为您为初始触发操作创建了标准<a>标记）。

类似的东西：

<form action="/PDFfile" method="post" target="_blank">
    <input type="submit" value="Show me the file in a new tab/window!"/>
</form>

注意：

请务必在Azure脚本中设置标题Content-Type: application/pdf，以便浏览器知道它是PDF
正如@JamesBlond所说，如果你没有浏览器的插件来阅读PDF，你可能看不到它。但是，您将拥有一个不错的下载框，并且新选项卡将自动关闭

在新窗口中使用jquery显示从控制器返回的PDF流

2 个答案: