Show pdf in browser from database

Abhishek Agrawal

Hi friends, I need to show pdf file in a pdfviewer in browser itself using AngularJs, i need to get response from webapi and my file is stored in database in bytes. I have been searching on the net but not finding any relevant solution to this.

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

Hussam Barouqa7y ago
After passing the PDF data, you will need use a PDF viewer to display it in your browser. Consider using the LEADTOOLS Library (https://www.leadtools.com/sdk/document/document-viewer-html5) , which has both a JavaScript/HTML5 Document Viewer that can accept the URL containing your PDF data and display it. (Disclaimer: I am an employee for the vendor of this toolkit).

For example, the code for doing this will look like the following:
var options = new lt.Documents.LoadDocumentOptions();
lt.Documents.DocumentFactory.loadFromUri(Url, options).done(function (document) {
documentViewer.setDocument(document);
});
So you can pass the webapi response as a URL response to this method and the document viewer will load and display it.
Muthu Kumar7y ago
Hi Abhiske Agarwal,

Here is an working example for you.

https://www.pdftron.com/blog/angular/build-a-pdf-viewer-in-angularjs-and-pdf-js/

https://www.beyondjava.net/ngx-extended-pdf-viewer

Thanks,
Muthukumar. M
Rahul Prasad7y ago
Hi, I found Spire.PDFViewer for ASP.NET might meet your needs. It supports to load a PDF file from stream and display it in web browser.

Here is the tutorial for your reference:
https://www.e-iceblue.com/Tutorials/Spire.PDFViewer/Spire.PDFViewer-Program-Guide/How-to-use-Spire.PDFViewer-for-ASP.NET.html

To load a PDF file from stream, use LoadFromStream method.
this.PdfDocumentViewer1.LoadFromStream(stream);
Abhishek Agrawal7y ago
the real problem is webapi part is ok but my angular part is not working properly,
below is my code for webapi:
public HttpResponseMessage GetPDF(int docId)
{
var response = new HttpResponseMessage(HttpStatusCode.OK);
byte[] bytes = System.IO.File.ReadAllBytes("bharat.pdf");
response.Content = new ByteArrayContent(bytes);
response.Content.Headers.ContentDisposition =
new System.Net.Http.Headers.ContentDispositionHeaderValue("inline");
response.Content.Headers.ContentDisposition.FileName = "bharat.pdf";
//Set MIME type.
response.Content.Headers.ContentType = new MediaTypeHeaderValue("application/pdf");
return response;
}
and below is angularjs

$scope.OpenPdf = function () {
$window.open('http://localhost:5000/common/api/Verification/GetPdf/76'); }

but it is showing only json in web browser like below:

{"version":{"major":1,"minor":1,"build":-1,"revision":-1,"majorRevision":-1,"minorRevision":-1},"content":{"headers":[{"key":"Content-Disposition","value":["inline; filename=bharat.pdf"]},{"key":"Content-Type","value":["application/pdf"]}]},"statusCode":200,"reasonPhrase":"OK","headers":[],"requestMessage":null,"isSuccessStatusCode":true}
now, please tell me whereis the lag?
Mario Scheeren7y ago
So what is the real Problem?
WebAPI should return FileResponse ... and then your Browser should be able to display the file. Or are you seachting for a PDFViewer API on your clientside?
I mean it's a basic FileDownload nothing to it.