如何使用 javascript 在浏览器中显示 PDF 字节数组？答案

【问题标题】：How to display a PDF bytearray in browser using javascript?如何使用 javascript 在浏览器中显示 PDF 字节数组？
【发布时间】：2021-11-21 17:30:36
【问题描述】：

我一直在尝试下面的客户端代码来呈现从服务器端返回的 PDF 字节数组。它在浏览器中显示正确数量的缩略图/页面，但内容未显示。缩略图和页面都是全黑的。我在这里有什么遗漏吗？另外，我读到 createObjectURL 已被弃用。有没有更好的方法来实现这一点？

谢谢！

服务器端代码：

byte[] bytes = service.GetDocument(ID);

result.StatusCode = HttpStatusCode.OK;
result.Content = new ByteArrayContent(bytes, 0, bytes.Length);
result.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
result.Content.Headers.ContentDisposition = new ContentDispositionHeaderValue("inline");

客户端代码：

@model DocumentWeb.ViewModels.Document

<html>
    <body>

        <object data="" type="application/pdf" width="100%" height="100%">
        </object>

        <script>

            $(document).ready(function (e) {

                $("object").attr("width", screen.availWidth);

                $("object").attr("height", screen.availHeight);

                var url = "@Url.Content("~/pdf/document")";
            
                    var data = {
                        ID: "@Model.DocID",
                    };

                    var result = $.post({
                        url: url,
                        type: 'POST',
                        data: data
                    });

                    result.done(function (bytearray) {

                        var blob = new Blob([bytearray], { type: 'application/pdf' });

                        var link= window.URL.createObjectURL(blob);

                        $("object").attr("data", link);
                    
                    });

                    result.fail(function (xhr) {
                        console.log(xhr.responseText);
                    });
                
            });

        </script>

    </body>
</html>

【问题讨论】：

你总是可以base64编码你的字节数组。 HTML <object> 标签支持 base64 编码图像。 <object src="data:application/pdf;base64, ABC123... /> 之类的东西，其中 ABC123... 是您的 base64 编码 PDF 二进制文件。
谢谢。现在可以了。
由于我的建议似乎对您有用，因此我已将其作为此问题的答案，以便将来可以帮助其他有类似问题的人。请考虑投票并接受答案。

标签： javascript jquery asp.net-web-api

【解决方案1】：

您始终可以对字节数组进行 base64 编码。 HTML <object> 标签支持 base64 编码图像。 <object src="data:application/pdf;base64, ABC123... /> 之类的东西，其中 ABC123... 是您的 base64 编码 PDF 二进制文件。

【讨论】：