Recommended way to embed PDF in HTML

Question

What is the recommended way to embed PDF in HTML    iFrame   Object   Embed    What does Adobe say itself about it   In my case  the PDF is generated on the fly  so it can t be uploaded to a third-party solution prior to flushing it

User · Answer

FDView combines PDF2SWF  which itself is based on xpdf  with an SWF viewer so you can convert and embed PDF documents on the fly on your server   xpdf is not a perfect PDF converter  If you need better results then Ghostview has some ability to convert PDF documents into other formats which you may be able to more easily build a Flash viewer for   But for simple PDF documents  FDView should work reasonably well

User · Answer

One of the options you should consider is Notable PDF It has a free plan unless you are planning on doing real-time online collaboration on pdfs  Embed the following iframe to any html and enjoy the results    lt iframe width  1000  height  800  src  http   bit ly 1JxrtjR  frameborder  0  allowfullscreen gt  lt  iframe gt

User · Answer

One of the options you should consider is Notable PDF It has a free plan unless you are planning on doing real-time online collaboration on pdfs  Embed the following iframe to any html and enjoy the results    lt iframe width  1000  height  800  src  http   bit ly 1JxrtjR  frameborder  0  allowfullscreen gt  lt  iframe gt

User · Answer

Using both  lt object gt  and  lt embed gt  will give you a wider breadth of browser compatibility    lt object data  http   yoursite com the pdf  type  application pdf  width  750px  height  750px  gt       lt embed src  http   yoursite com the pdf  type  application pdf  gt           lt p gt This browser does not support PDFs  Please download the PDF to view it   lt a href  http   yoursite com the pdf  gt Download PDF lt  a gt   lt  p gt       lt  embed gt   lt  object gt

User · Answer

Construct a blob of the input PDF bytes Use an iframe and PDF js patched with this cross browser workaround   The URI for the iframe should look something like this    viewer html file blob 19B579EA-5217-41C6-96E4-5D8DF5A5C70B   Now FF  Chrome  IE 11  and Edge all display the PDF in a viewer in the iframe passed via standard blob URI in the URL

User · Answer

If you don t want to host the PDFs yourself or want to customize your PDF viewer with additional security features like preventing users to download the PDF file  I recommend using CloudPDF  https   cloudpdf io  lt  DOCTYPE html gt   lt html lang  quot en quot  gt   lt head gt     lt meta charset  quot UTF-8 quot  gt     lt meta name  quot viewport quot  content  quot width device-width  initial-scale 1 0 quot  gt     lt title gt CloudPDF Viewer lt  title gt     lt style gt      body  html         height  100         margin  0px           lt  style gt   lt  head gt   lt body style  quot height  100  quot  gt     lt div id  quot viewer quot  style  quot width  800px  height  500px  margin  80px auto  quot  gt  lt  div gt     lt script type  quot text javascript quot  src  quot https   cloudpdf io viewer min js version 0 1 0-beta 11 quot  gt  lt  script gt     lt script gt      document addEventListener  DOMContentLoaded   function          const config              documentId   eee2079d-b0b6-4267-9812-b6b9eadb9c60           darkMode  true                 CloudPDF config  document getElementById  viewer    then  instance    gt                          lt  script gt    lt  body gt   lt  html gt

User · Answer

Have a look for this code- To embed the PDF in HTML   lt  -- Embed PDF File -- gt   lt object data  YourFile pdf  type  application x-pdf  title  SamplePdf  width  500  height  720  gt       lt a href  YourFile pdf  gt shree lt  a gt    lt  object gt

User · Answer

This is the way I did with AXIOS and Vue js           axios               url   urltoPDFfile pdf               method   GET               headers  headers              responseType   blob                      then  response    gt                this urlPdf   URL createObjectURL response data                      catch  error    gt                console log  ERROR      error               add urlPDF dynamically to HTML     lt object width  100   height  600px   data  urlPdf  type  application pdf  gt  lt  object gt

User · Answer

Probably the best approach is to use the PDF JS library  It s a pure HTML5 JavaScript renderer for PDF documents without any third-party plugins   Online demo  http   mozilla github com pdf js web viewer html  GitHub  https   github com mozilla pdf js

User · Answer

This is the way I did with AXIOS and Vue js           axios               url   urltoPDFfile pdf               method   GET               headers  headers              responseType   blob                      then  response    gt                this urlPdf   URL createObjectURL response data                      catch  error    gt                console log  ERROR      error               add urlPDF dynamically to HTML     lt object width  100   height  600px   data  urlPdf  type  application pdf  gt  lt  object gt

User · Answer

Construct a blob of the input PDF bytes Use an iframe and PDF js patched with this cross browser workaround   The URI for the iframe should look something like this    viewer html file blob 19B579EA-5217-41C6-96E4-5D8DF5A5C70B   Now FF  Chrome  IE 11  and Edge all display the PDF in a viewer in the iframe passed via standard blob URI in the URL

User · Answer

Convert it to PNG via ImageMagick  and display the PNG  quick and dirty     lt  php    dir     absolute path to my directory       name    myPDF pdf     exec   bin convert  dir name  dir name png      print   lt img src   dir name png    gt      gt    This is a good option if you need a quick solution  want to avoid cross-browser PDF viewing problems  and if the PDF is only a page or two  Of course  you need ImageMagick installed  which in turn needs Ghostscript  on your webserver  an option that might not be available in shared hosting environments  There is also a PHP  plugin  called imagick  that works like this but it has it s own special requirements

User · Answer

To stream the file to the browser  see Stack Overflow question How to stream a PDF file as binary to the browser using  NET 2 0 - note that  with minor variations  this should work whether you re serving up a file from the file system or dynamically generated     With that said  the referenced MSDN article takes a rather simplistic view of the world  so you may want to read Successfully Stream a PDF to browser through HTTPS as well for some of the headers you may need to supply   Using that approach  an iframe is probably the best way to go  Have one webform that streams the file  and then put the iframe on another page with its src attribute set to the first form

User · Answer

To stream the file to the browser  see Stack Overflow question How to stream a PDF file as binary to the browser using  NET 2 0 - note that  with minor variations  this should work whether you re serving up a file from the file system or dynamically generated     With that said  the referenced MSDN article takes a rather simplistic view of the world  so you may want to read Successfully Stream a PDF to browser through HTTPS as well for some of the headers you may need to supply   Using that approach  an iframe is probably the best way to go  Have one webform that streams the file  and then put the iframe on another page with its src attribute set to the first form

User · Answer

To stream the file to the browser  see Stack Overflow question How to stream a PDF file as binary to the browser using  NET 2 0 - note that  with minor variations  this should work whether you re serving up a file from the file system or dynamically generated     With that said  the referenced MSDN article takes a rather simplistic view of the world  so you may want to read Successfully Stream a PDF to browser through HTTPS as well for some of the headers you may need to supply   Using that approach  an iframe is probably the best way to go  Have one webform that streams the file  and then put the iframe on another page with its src attribute set to the first form

User · Answer

just use iFrame for PDF s   I had specific needs in my React js app  tried millions of solutions but ended up with an iFrame    Good luck

User · Answer

Before I got a problem with embeding base64 encoded with PDF because the URI limitation  so any files over 2MB won t render properly on Chrome  My solution is   Convert uri encoded to Blob   Generate the temporary DOM String base on Blob  const blob   dataURItoBlob this dataUrl   var temp url   window URL createObjectURL blob    Decide where you want to attach the iframe to DOM  const target   document querySelector targetID   target innerHTML     lt iframe src    temp url   type  quot application pdf quot  gt  lt  iframe gt

User · Answer

Our problem is that for legal reasons we are not allowed to temporarily store a PDF on the hard disk  In addition  the entire page should not be reloaded when displaying a PDF as Preview in the Browser  First we tried PDF jS  It worked with Base64 in the viewer for Firefox and Chrome  However  it was unacceptably slow for our PDF  IE Edge didn t work at all  We therefore tried it with a Base64 string in an HTML object tag  This again didn t work for IE Edge  maybe the same problem as with PDF js   In Chrome Firefox Safari again no problem  That s why we chose a hybrid solution  IE Edge we use an IFrame and for all other browsers the object-tag   The IFrame solution would of course also work for Chrome and co  The reason why we didn t use this solution for Chrome is that although the PDF is displayed correctly  Chrome makes a new request to the server as soon as you click on  quot download quot  in the preview  The required hidden-field pdfHelperTransferData  for sending our form data needed for PDF generation  is no longer set because the PDF is displayed in an IFrame  For this feature bug see Chrome sends two requests when downloading a PDF  and cancels one of them   Now the problem children IE9 and IE10 remain  For these we gave up a preview solution and simply send the document by clicking the preview button as a download to the user  instead of the preview   We have tried a lot but even if we had found a solution the extra effort for this tiny part of users would not have been worth the effort  You can find our solution for the download here  Download PDF without refresh with IFrame  Our Javascript  var transferData   getFormAsJson   if  isMicrosoftBrowser                 Case IE   Edge  because doesn t recoginzie Pdf-Base64 use Iframe          var form   document getElementById  pdf-helper-form               quot  pdfHelperTransferData quot   val transferData           form target    quot iframe-pdf-shower quot           form action    quot serverSideFunctonWhichWritesPdfinResponse quot           form submit       else              Case non IE use Object tag instead of iframe           ajax               url   quot serverSideFunctonWhichRetrivesPdfAsBase64 quot               type   quot post quot               data    downloadHelperTransferData  transferData                success  function  result                       quot  object-pdf-shower quot   attr  quot data quot   result                                 Our HTML   lt div id  quot pdf-helper-hidden-container quot  style  quot display none quot  gt      lt form id  quot pdf-helper-form quot  method  quot post quot  gt           lt input type  quot hidden quot  name  quot pdfHelperTransferData quot  id  quot pdfHelperTransferData quot    gt      lt  form gt   lt  div gt    lt div id  quot pdf-wrapper quot  class  quot modal-content quot  gt       lt iframe id  quot iframe-pdf-shower quot  name  quot iframe-pdf-shower quot  gt  lt  iframe gt       lt object id  quot object-pdf-shower quot  type  quot application pdf quot  gt  lt  object gt   lt  div gt   To check the browser type for IE Edge see here  How can I detect Internet Explorer  IE  and Microsoft Edge using JavaScript  I hope these findings will save someone else the time

User · Answer

lt object width  400  height  400  data  helloworld pdf  gt  lt  object gt

User · Answer

lt object width  400  height  400  data  helloworld pdf  gt  lt  object gt

User · Answer

lt embed src  quot data application pdf base64     quot   gt

User · Answer

This is quick  easy  to the point and doesn t require any third-party script   lt embed src  quot http   example com the pdf quot  width  quot 500 quot  height  quot 375 quot    type  quot application pdf quot  gt   UPDATE  2 3 2021  Adobe now offers it s own PDF Embed API  https   www adobe io apis documentcloud dcsdk pdf-embed html UPDATE  1 2018   The Chrome browser on Android no longer supports PDF embeds  You can get around this by using the Google Drive PDF viewer  lt embed src  quot https   drive google com viewerng  viewer embedded true amp url http   example com the pdf quot  width  quot 500 quot  height  quot 375 quot  gt

User · Answer

Convert it to PNG via ImageMagick  and display the PNG  quick and dirty     lt  php    dir     absolute path to my directory       name    myPDF pdf     exec   bin convert  dir name  dir name png      print   lt img src   dir name png    gt      gt    This is a good option if you need a quick solution  want to avoid cross-browser PDF viewing problems  and if the PDF is only a page or two  Of course  you need ImageMagick installed  which in turn needs Ghostscript  on your webserver  an option that might not be available in shared hosting environments  There is also a PHP  plugin  called imagick  that works like this but it has it s own special requirements

User · Answer

Probably the best approach is to use the PDF JS library  It s a pure HTML5 JavaScript renderer for PDF documents without any third-party plugins   Online demo  http   mozilla github com pdf js web viewer html  GitHub  https   github com mozilla pdf js

User · Answer

You do have some control over how the PDF appears in the browser by passing some options in the query string   I was happy to this working  until I realized it does not work in IE8      It works in Chrome 9 and Firefox 3 6  but in IE8 it shows the message  Insert your error message here  if the PDF cannot be displayed     I haven t yet tested older versions of any of the above browsers  though  But here s the code I have anyway in case it helps anyone   This sets the zoom to 85   removes scrollbars  toolbars and nav panes   I ll update my post if I do come across something that works in IE as well    lt object width  400  height  500  type  application pdf  data   my pdf pdf  zoom 85 amp scrollbar 0 amp toolbar 0 amp navpanes 0  gt       lt p gt Insert your error message here  if the PDF cannot be displayed  lt  p gt   lt  object gt

User · Answer

lt embed src  quot data application pdf base64     quot   gt

User · Answer

You can also use Google PDF viewer for this purpose  As far as I know it s not an official Google feature  am I wrong on this    but it works for me very nicely and smoothly  You need to upload your PDF somewhere before and just use its URL    lt iframe src  http   docs google com gview url http   example com mypdf pdf amp embedded true  style  width 718px  height 700px   frameborder  0  gt  lt  iframe gt    What is important is that it doesn t need a Flash player  it uses JavaScript

User · Answer

FDView combines PDF2SWF  which itself is based on xpdf  with an SWF viewer so you can convert and embed PDF documents on the fly on your server   xpdf is not a perfect PDF converter  If you need better results then Ghostview has some ability to convert PDF documents into other formats which you may be able to more easily build a Flash viewer for   But for simple PDF documents  FDView should work reasonably well

User · Answer

You do have some control over how the PDF appears in the browser by passing some options in the query string   I was happy to this working  until I realized it does not work in IE8      It works in Chrome 9 and Firefox 3 6  but in IE8 it shows the message  Insert your error message here  if the PDF cannot be displayed     I haven t yet tested older versions of any of the above browsers  though  But here s the code I have anyway in case it helps anyone   This sets the zoom to 85   removes scrollbars  toolbars and nav panes   I ll update my post if I do come across something that works in IE as well    lt object width  400  height  500  type  application pdf  data   my pdf pdf  zoom 85 amp scrollbar 0 amp toolbar 0 amp navpanes 0  gt       lt p gt Insert your error message here  if the PDF cannot be displayed  lt  p gt   lt  object gt

User · Answer

FDView combines PDF2SWF  which itself is based on xpdf  with an SWF viewer so you can convert and embed PDF documents on the fly on your server   xpdf is not a perfect PDF converter  If you need better results then Ghostview has some ability to convert PDF documents into other formats which you may be able to more easily build a Flash viewer for   But for simple PDF documents  FDView should work reasonably well

User · Answer

This is quick  easy  to the point and doesn t require any third-party script   lt embed src  quot http   example com the pdf quot  width  quot 500 quot  height  quot 375 quot    type  quot application pdf quot  gt   UPDATE  2 3 2021  Adobe now offers it s own PDF Embed API  https   www adobe io apis documentcloud dcsdk pdf-embed html UPDATE  1 2018   The Chrome browser on Android no longer supports PDF embeds  You can get around this by using the Google Drive PDF viewer  lt embed src  quot https   drive google com viewerng  viewer embedded true amp url http   example com the pdf quot  width  quot 500 quot  height  quot 375 quot  gt

User · Answer

Using both  lt object gt  and  lt embed gt  will give you a wider breadth of browser compatibility    lt object data  http   yoursite com the pdf  type  application pdf  width  750px  height  750px  gt       lt embed src  http   yoursite com the pdf  type  application pdf  gt           lt p gt This browser does not support PDFs  Please download the PDF to view it   lt a href  http   yoursite com the pdf  gt Download PDF lt  a gt   lt  p gt       lt  embed gt   lt  object gt

User · Answer

Our problem is that for legal reasons we are not allowed to temporarily store a PDF on the hard disk  In addition  the entire page should not be reloaded when displaying a PDF as Preview in the Browser  First we tried PDF jS  It worked with Base64 in the viewer for Firefox and Chrome  However  it was unacceptably slow for our PDF  IE Edge didn t work at all  We therefore tried it with a Base64 string in an HTML object tag  This again didn t work for IE Edge  maybe the same problem as with PDF js   In Chrome Firefox Safari again no problem  That s why we chose a hybrid solution  IE Edge we use an IFrame and for all other browsers the object-tag   The IFrame solution would of course also work for Chrome and co  The reason why we didn t use this solution for Chrome is that although the PDF is displayed correctly  Chrome makes a new request to the server as soon as you click on  quot download quot  in the preview  The required hidden-field pdfHelperTransferData  for sending our form data needed for PDF generation  is no longer set because the PDF is displayed in an IFrame  For this feature bug see Chrome sends two requests when downloading a PDF  and cancels one of them   Now the problem children IE9 and IE10 remain  For these we gave up a preview solution and simply send the document by clicking the preview button as a download to the user  instead of the preview   We have tried a lot but even if we had found a solution the extra effort for this tiny part of users would not have been worth the effort  You can find our solution for the download here  Download PDF without refresh with IFrame  Our Javascript  var transferData   getFormAsJson   if  isMicrosoftBrowser                 Case IE   Edge  because doesn t recoginzie Pdf-Base64 use Iframe          var form   document getElementById  pdf-helper-form               quot  pdfHelperTransferData quot   val transferData           form target    quot iframe-pdf-shower quot           form action    quot serverSideFunctonWhichWritesPdfinResponse quot           form submit       else              Case non IE use Object tag instead of iframe           ajax               url   quot serverSideFunctonWhichRetrivesPdfAsBase64 quot               type   quot post quot               data    downloadHelperTransferData  transferData                success  function  result                       quot  object-pdf-shower quot   attr  quot data quot   result                                 Our HTML   lt div id  quot pdf-helper-hidden-container quot  style  quot display none quot  gt      lt form id  quot pdf-helper-form quot  method  quot post quot  gt           lt input type  quot hidden quot  name  quot pdfHelperTransferData quot  id  quot pdfHelperTransferData quot    gt      lt  form gt   lt  div gt    lt div id  quot pdf-wrapper quot  class  quot modal-content quot  gt       lt iframe id  quot iframe-pdf-shower quot  name  quot iframe-pdf-shower quot  gt  lt  iframe gt       lt object id  quot object-pdf-shower quot  type  quot application pdf quot  gt  lt  object gt   lt  div gt   To check the browser type for IE Edge see here  How can I detect Internet Explorer  IE  and Microsoft Edge using JavaScript  I hope these findings will save someone else the time

User · Answer

FDView combines PDF2SWF  which itself is based on xpdf  with an SWF viewer so you can convert and embed PDF documents on the fly on your server   xpdf is not a perfect PDF converter  If you need better results then Ghostview has some ability to convert PDF documents into other formats which you may be able to more easily build a Flash viewer for   But for simple PDF documents  FDView should work reasonably well

User · Answer

If you don t want to host the PDFs yourself or want to customize your PDF viewer with additional security features like preventing users to download the PDF file  I recommend using CloudPDF  https   cloudpdf io  lt  DOCTYPE html gt   lt html lang  quot en quot  gt   lt head gt     lt meta charset  quot UTF-8 quot  gt     lt meta name  quot viewport quot  content  quot width device-width  initial-scale 1 0 quot  gt     lt title gt CloudPDF Viewer lt  title gt     lt style gt      body  html         height  100         margin  0px           lt  style gt   lt  head gt   lt body style  quot height  100  quot  gt     lt div id  quot viewer quot  style  quot width  800px  height  500px  margin  80px auto  quot  gt  lt  div gt     lt script type  quot text javascript quot  src  quot https   cloudpdf io viewer min js version 0 1 0-beta 11 quot  gt  lt  script gt     lt script gt      document addEventListener  DOMContentLoaded   function          const config              documentId   eee2079d-b0b6-4267-9812-b6b9eadb9c60           darkMode  true                 CloudPDF config  document getElementById  viewer    then  instance    gt                          lt  script gt    lt  body gt   lt  html gt

User · Answer

just use iFrame for PDF s   I had specific needs in my React js app  tried millions of solutions but ended up with an iFrame    Good luck

User · Answer

If you don t want to host PDF JS on your own  you could try DocDroid  It is similar to the Google Drive PDF viewer but allows custom branding

User · Answer

Probably the best approach is to use the PDF JS library  It s a pure HTML5 JavaScript renderer for PDF documents without any third-party plugins   Online demo  http   mozilla github com pdf js web viewer html  GitHub  https   github com mozilla pdf js

User · Answer

You can also use Google PDF viewer for this purpose  As far as I know it s not an official Google feature  am I wrong on this    but it works for me very nicely and smoothly  You need to upload your PDF somewhere before and just use its URL    lt iframe src  http   docs google com gview url http   example com mypdf pdf amp embedded true  style  width 718px  height 700px   frameborder  0  gt  lt  iframe gt    What is important is that it doesn t need a Flash player  it uses JavaScript

User · Answer

Have a look for this code- To embed the PDF in HTML   lt  -- Embed PDF File -- gt   lt object data  YourFile pdf  type  application x-pdf  title  SamplePdf  width  500  height  720  gt       lt a href  YourFile pdf  gt shree lt  a gt    lt  object gt

User · Answer

I found this works just fine and the browser handles it in firefox  I have not checked IE      lt script gt window location  url  lt  script gt

User · Answer

You can use the relative location of the saved pdf like this  Example1  lt embed src  quot example pdf quot  width  quot 1000 quot  height  quot 800 quot  frameborder  quot 0 quot  allowfullscreen gt   Example2  lt iframe src  quot example pdf quot  style  quot width 1000px  height 800px  quot  frameborder  quot 0 quot  allowfullscreen gt  lt  iframe gt

User · Answer

PdfToImageServlet using ImageMagick s convert command    Usage example   lt img src   webAppDirectory PdfToImageServlet pdfFile  usr share cups data default-testpage pdf  gt

User · Answer

I had to preview a PDF with React so after trying several libraries my optimal solution was to fetch the data and ebmed it   const pdfBase64     fetched from url or generated with jspdf or other library     lt embed     src  pdfBase64      width  500      height  375      type  application pdf     gt  lt  embed gt

User · Answer

If you don t want to host PDF JS on your own  you could try DocDroid  It is similar to the Google Drive PDF viewer but allows custom branding

User · Answer

I found that the best way to embed a pdf for my case was by using bootstrap because not only does it show the pdf but it also fill available space and you can specify the ratio as you wish  Here s an example of what i made with it   x000D   x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 5 0 css bootstrap min css  gt    lt div class  embed-responsive embed-responsive-1by1  gt     lt iframe class  embed-responsive-item  src  http   example com the pdf  type  application pdf  allowfullscreen gt  lt  iframe gt   lt  div gt    lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Scribd no longer require you to host your documents on their server  If you create an account with them so you get a publisher ID  It only takes a few lines of JavaScript code to load up PDF files stored on your own server   For more details  see Developer Tools

User · Answer

Scribd no longer require you to host your documents on their server  If you create an account with them so you get a publisher ID  It only takes a few lines of JavaScript code to load up PDF files stored on your own server   For more details  see Developer Tools

User · Answer

I found this works just fine and the browser handles it in firefox  I have not checked IE      lt script gt window location  url  lt  script gt

User · Answer

I had to preview a PDF with React so after trying several libraries my optimal solution was to fetch the data and ebmed it   const pdfBase64     fetched from url or generated with jspdf or other library     lt embed     src  pdfBase64      width  500      height  375      type  application pdf     gt  lt  embed gt

User · Answer

PdfToImageServlet using ImageMagick s convert command    Usage example   lt img src   webAppDirectory PdfToImageServlet pdfFile  usr share cups data default-testpage pdf  gt

User · Answer

Create a container to hold your PDF   lt div id  example1  gt  lt  div gt   Tell PDFObject which PDF to embed  and where to embed it   lt script src   js pdfobject js  gt  lt  script gt   lt script gt PDFObject embed   pdf sample-3pp pdf     example1    lt  script gt   You can optionally use CSS to specify visual styling  including dimensions  border  margins  etc    lt style gt   pdfobject-container   height  500px    pdfobject   border  1px solid  666     lt  style gt     source   https   pdfobject com

User · Answer

Create a container to hold your PDF   lt div id  example1  gt  lt  div gt   Tell PDFObject which PDF to embed  and where to embed it   lt script src   js pdfobject js  gt  lt  script gt   lt script gt PDFObject embed   pdf sample-3pp pdf     example1    lt  script gt   You can optionally use CSS to specify visual styling  including dimensions  border  margins  etc    lt style gt   pdfobject-container   height  500px    pdfobject   border  1px solid  666     lt  style gt     source   https   pdfobject com

User · Answer

To stream the file to the browser  see Stack Overflow question How to stream a PDF file as binary to the browser using  NET 2 0 - note that  with minor variations  this should work whether you re serving up a file from the file system or dynamically generated     With that said  the referenced MSDN article takes a rather simplistic view of the world  so you may want to read Successfully Stream a PDF to browser through HTTPS as well for some of the headers you may need to supply   Using that approach  an iframe is probably the best way to go  Have one webform that streams the file  and then put the iframe on another page with its src attribute set to the first form

User · Answer

I found that the best way to embed a pdf for my case was by using bootstrap because not only does it show the pdf but it also fill available space and you can specify the ratio as you wish  Here s an example of what i made with it   x000D   x000D   lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 5 0 css bootstrap min css  gt    lt div class  embed-responsive embed-responsive-1by1  gt     lt iframe class  embed-responsive-item  src  http   example com the pdf  type  application pdf  allowfullscreen gt  lt  iframe gt   lt  div gt    lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt   lt script src  https   maxcdn bootstrapcdn com bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   x000D   x000D

User · Answer

Before I got a problem with embeding base64 encoded with PDF because the URI limitation  so any files over 2MB won t render properly on Chrome  My solution is   Convert uri encoded to Blob   Generate the temporary DOM String base on Blob  const blob   dataURItoBlob this dataUrl   var temp url   window URL createObjectURL blob    Decide where you want to attach the iframe to DOM  const target   document querySelector targetID   target innerHTML     lt iframe src    temp url   type  quot application pdf quot  gt  lt  iframe gt

User · Answer

You can use the relative location of the saved pdf like this  Example1  lt embed src  quot example pdf quot  width  quot 1000 quot  height  quot 800 quot  frameborder  quot 0 quot  allowfullscreen gt   Example2  lt iframe src  quot example pdf quot  style  quot width 1000px  height 800px  quot  frameborder  quot 0 quot  allowfullscreen gt  lt  iframe gt

User · Answer

Probably the best approach is to use the PDF JS library  It s a pure HTML5 JavaScript renderer for PDF documents without any third-party plugins   Online demo  http   mozilla github com pdf js web viewer html  GitHub  https   github com mozilla pdf js

[html] Recommended way to embed PDF in HTML?

Examples related to html

Examples related to pdf