Build a IFrame PDF Google DOCS/Office Web Apps Viewer Embed in Website Using Vanilla Javascript Full Project For Beginners

Build a IFrame PDF Google DOCS/Office Web Apps Viewer Embed in Website Using Vanilla Javascript Full Project For Beginners

 

Welcome folks today in this blog post we will be building a iframe pdf google docs/office web apps viewer embed in website using vanilla javascript.All the full source code of the application is given below.

 

 

Get Started

 

 

In order to get started you need to make an index.html file and copy paste the following code

 

index.html

 

<body>
    <div class="wrapper">
    <h2>Testing Google Docs / Office Apps View Integration</h2>
    <button class="google-viewer btn">Google Docs Viewer</button>
     <button class="office-viewer btn">Office Apps Viewer</button>
    <iframe class="google-docs iframe" src="https://docs.google.com/viewer?url=https://gate.ac.uk/sale/talks/text-mining-course-sslst2011/slides/module1-intro.pdf&embedded=true"  frameborder="0"
      scrolling="no" marginheight="0" marginwidth="0" role="document" aria-label="PDF document" title="PDF document">Click to view the document</iframe>
   
   <iframe class = "office iframe" src="https://view.officeapps.live.com/op/embed.aspx?src=http%3A%2F%2Fstatsclass.org%2Fworkshops%2FDataScience%2FHandout8%2FHandout8.docx" frameborder="0"
      scrolling="no" marginheight="0" marginwidth="0" role="document" aria-label="Doc document" title="Doc document" >
  </iframe> 
    </div>  
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>                                                                                                                 
  </body>
  </html>

 

 

Now make a style.css file and copy paste the below code

 

style.css

 

body{
        background-color: #009688;
        color:#fefefe;
  font-family: Helvetica;
  padding: 2em;
    }
    .wrapper{
    text-align: center;
    }

  .btn{
    background: #fefefe;
    border: .625em;
    color: #009688;
    padding: .5em 1em;
  }
    
    
    
      
  .iframe{
    width: 100%;
    height: 600px;
    display: none;
  }

 

See also  jQuery Project to Lazy Load Youtube Videos on Page Load to Increase Speed of Website in HTML5 & Javascript Full

 

And now make a script.js file and copy paste the following code

 

script.js

 

$(document).ready(function(){
  $('.google-viewer').on('click', function(){
    if($('.office').css('display') !== 'none')
      $('.office').slideToggle();
    $('.google-docs').slideToggle();
  });

  $('.office-viewer').on('click', function(){
    if($('.google-docs').css('display') !== 'none')
      $('.google-docs').slideToggle();
    $('.office').slideToggle();
  });
});

 

 

Now if you open the index.html file inside the browser you will see the below screenshot

 

Leave a Reply