Access our premium support and let us know your problems, we will help you solve them.

0
No products in the cart.

Forum Replies Created

Viewing 1 post (of 1 total)
  • Author
    Posts
  • in reply to: Recommended way to embed PDF in HTML? #9320
    blanknenad
    Participant

    Update – Adobe PDF Embed API

    Adobe released their Adobe PDF Embed API which is completely free. Since they created the PDF format itself, their API is probably the best for this.

    • It delivers the highest quality PDF rendering available.
    • You can fully customize user experience and choose how to display a PDF.
    • You will also have analytics on PDF usage so you can understand how users interact with PDFs, including time spent on a page and searches.

    All you have to do is create an api_key and use it in the code snippet.

    Displaying PDF by file_url

    Here is the example of the code snippet that you can just add to your HTML and take advantage of their API for displaying PDF by file_url. You would have to add { location: { url: "url_of_the_pdf" } } config.

    <div id="adobe-dc-view"></div>
    
    <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
    
    <script type="text/javascript">
      document.addEventListener("adobe_dc_view_sdk.ready", function(){
        var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
        adobeDCView.previewFile({
          content: { location: { url: "url_of_the_pdf" } },
          metaData: { fileName: "file_name_to_display" }
        }, {});
      });
    </script>
    

    Displaying PDF as buffer

    Here is the example of the code snippet that you can just add to your HTML and take advantage of their API for displaying PDF if you have the buffer (local file for example). You would have to add { promise: <FILE_PROMISE> } config.

    <div id="adobe-dc-view"></div>
    
    <script src="https://documentcloud.adobe.com/view-sdk/main.js"></script>
    
    <script type="text/javascript">
      document.addEventListener("adobe_dc_view_sdk.ready", function(){
        var adobeDCView = new AdobeDC.View({clientId: "api_key", divId: "adobe-dc-view"});
        adobeDCView.previewFile({
          content: { promise: <FILE_PROMISE> }
          metaData: { fileName: "file_name_to_display" }
        }, {});
      });
    </script>
    
Viewing 1 post (of 1 total)