Show pdf in browser from database

Question

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.

Hussam Barouqa · Answer

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 Kumar · Answer

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 Prasad · Answer

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 Agrawal · Answer

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 Scheeren · Answer

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.