In modern browsers, you can use a Blob to create an object URL which can then be used instead of a base64 URL (which has some limitations in different browsers, like length limits).
Here's a working example that does that. This sample displays the PDF inside an iframe, but you can really do whatever you want with that objectURL like open it in a new tab or whatever.
var xhr = new XMLHttpRequest();
xhr.responseType = 'arraybuffer';
xhr.onload = function() {
// Create the Blob URL:
var buffer = xhr.response;
var blob = new Blob([buffer], {
type: 'application/pdf'
});
var objectURL = URL.createObjectURL(blob);
// Create an iframe to demonstrate it:
var iframe = document.createElement('iframe');
iframe.className = 'sample-iframe';
iframe.src = objectURL;
document.body.appendChild(iframe);
console.log(objectURL);
};
xhr.open('GET', 'https://gist.githubusercontent.com/AlexanderOMara/4cd0ae77a3027a8363eecb5929b30ee3/raw/900734831709f3cb94718649ca8f7f9715adeb78/hello-world.pdf', true);
xhr.send();
html, body {
width: 100%;
height: 100%;
}
.sample-iframe {
width: 90%;
height: 90%;
}
Of course, the browser's built-in print function for the PDF will work also.
Answer from Alexander O'Mara on Stack OverflowStream pdf and then convert that to html as bytes array .. (pdf to html) using stream - Free Support Forum - aspose.com
Embed PDF Byte Data in HTML
c# - Show byte[] as pdf with html5 - Stack Overflow
Display PDF from byte array | Telerik Forums
If you already have the byte[], you should use FileContentResult, which "sends the contents of a binary file to the response". Only use FileStreamResult when you have a stream open.
public ActionResult DisplayPDF()
{
byte[] byteArray = GetPdfFromDB();
return new FileContentResult(byteArray, "application/pdf");
}
You can show the byte array PDF directly in your browser simply by using MemoryStream instead of Stream and FileStreamResult instead of File:
public ActionResult DisplayPDF()
{
byte[] byteArray = GetPdfFromDB();
using( MemoryStream pdfStream = new MemoryStream())
{
pdfStream.Write(byteArray , 0,byteArray .Length);
pdfStream.Position = 0;
return new FileStreamResult(pdfStream, "application/pdf");
}
}
I would recommend creating another action on the controller designed specifically for rendering the PDF data. Then it's just a matter of referencing it within your data attribute:
data="@Url.Action("GetPdf", "PDF")"
I'm not sure you can dump raw PDF data within the DOM without hitting some kind of encoding issue. You may be able to do like images, though I've never tried. But, for demo's sake and image would look like:
src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
So, assuming the same could be done it would probably look like the following:
@{
String base64EncodedPdf = System.Convert.ToBase64String(Model.pdfInBytes);
}
@* ... *@
<object data="data:application/pdf;base64,@base64EncodedPdf"
width="900" height="600" type="application/pdf"></object>
I still stand by my original response to create a new action however.
protected ActionResult InlineFile(byte[] content, string contentType, string fileDownloadName)
{
Response.AppendHeader("Content-Disposition", string.Concat("inline; filename=\"", fileDownloadName, "\""));
return File(content, contentType);
}
Add this code to your base controller or the controller itself and call this function to show file in the browser itself.
This works for me on Chrome, but not on IE:
// base64DataFromWebAPI comes from a Web API, in the form of base 64 string
var pdfData = base64DataFromWebAPI;
var x = window.open();
var iframe = x.document.createElement('iframe')
iframe.width = '100%'
iframe.height = '100%'
iframe.frameBorder = 0
iframe.style = "border: 0"
iframe.src = "data:application/pdf;base64, " + pdfData
x.document.body.appendChild(iframe);
I got it from the following Stack Oveflow question: JsPDF - Not allowed to navigate top frame to data URL
Using Chrome*, you can also simply paste the following code in the address bar:
data:application/pdf;base64, YOUR_PDF_DATA_HERE
It will open it in the included PDF viewer of the browser.
*didn't tested other browsers
I tried this in jsFiddle, and it works well in Chrome & FF, need to check on other browsers as well.
Convert the byte[] to Base64 using,
string base64PDF = System.Convert.ToBase64String(outputPDF, 0, outputPDF.Length);
All I had to do is specify the MIME type as data:application/pdf;base64, in the source and give the Base64 version of the PDF.
<object data="data:application/pdf;base64, JVBERi0xLjQKJeLjz9MKMyA..." type="application/pdf" width="160px">
<embed src="data:application/pdf;base64, JVBERi0xLjQKJeLjz9MKMyA..." type="application/pdf" />
</object>
I couldn't be able to hide the top toolbar which appears in FF by appending #toolbar=0&navpanes=0&statusbar=0.
IE8 needs a saved pdf file to be displayed.
Try this
Response.ContentType = "application/pdf";
Response.AddHeader("content-length", outputPDF.Length.ToString());
Response.BinaryWrite(outputPDF);
I have a slight problem in a Blazor Server application when displaying PDF documents. I have tried to find a C# based solution for this but cannot find one anywhere.
The background to this is I am working on an application that is used in part to store and display PDF documents. For various reasons (which I won't go into as I have tried to change this many times but the arguments to not do it are actually quite well presented) these are not stored in a document format but within the database so are handled in the Blazor application as byte[] variables.
So for display to the user when they select the document we convert the byte[] into base64 and embed the resultant code into the pages displayed.
In the C#
string DisplayPDF; DisplayPDF = "data:application/pdf;base64," + Convert.ToBase64String(nc.DocData);
and in the HTML
<embed src="@DisplayPDF" type="application/pdf" width=1000 height=800 />
And to some extent this works fine, until we get over approx 2Mb in size for the document at which point we get a blank screen. I believe this is to do with the URL size displayed as over 2Mb the src value gets too long and most browsers won't display it.
Has anyone had any experience with this issue and know of a solution? I have found one using Java but this doesn't work for us. How do we handle large PDF files as the vast majority of the files in use are over the size limit set by this issue?