如何使用 javascript 在浏览器中显示 PDF 字节数组？
Posted
技术标签:
【中文标题】如何使用 javascript 在浏览器中显示 PDF 字节数组？【英文标题】：How to display a PDF bytearray in browser using javascript? 【发布时间】：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" >
</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 二进制文件。
谢谢。现在可以了。
由于我的建议似乎对您有用，因此我已将其作为此问题的答案，以便将来可以帮助其他有类似问题的人。请考虑投票并接受答案。
【参考方案1】：
您始终可以对字节数组进行 base64 编码。 HTML <object> 标签支持 base64 编码图像。 <object src="data:application/pdf;base64, ABC123... /> 之类的东西，其中 ABC123... 是您的 base64 编码 PDF 二进制文件。
【讨论】：
以上是关于如何使用 javascript 在浏览器中显示 PDF 字节数组？的主要内容，如果未能解决你的问题，请参考以下文章
如何使用 Javascript 启用浏览器 cookie？ [复制]
如何使用javascript获取浏览器显示高度和宽度[重复]
如何使用 JavaScript v12 SDK for Browsers 检索和显示（在浏览器中）存储在 Azure 存储帐户中的多个 pdf 的 URL