I have been trying the below client side code to render the PDF byte array returned from server side. It shows the correct number of thumbnails/pages in browser but the content is not displaying. Both the thumbnails and the pages are completely black. Is there anything I am missing here? Also, I read that createObjectURL is deprecated. Is there any better way to achieve this?
Thank you!
Server side code:
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");
Client side code:
@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>
You could always base64 encode your byte array. HTML <object> tags support base64 encoded images. Something like <object src="data:application/pdf;base64, ABC123... /> where ABC123... is your base64 encoded PDF binary.