Build a PDF Document Viewer Template Layout in HTML5 and CSS3 Full Project For Beginners

Build a PDF Document Viewer Template Layout in HTML5 and CSS3 Full Project For Beginners

 

Welcome folks today in this blog post we will be building a pdf document viewer template layout in html5 and css3. All the full source code of the application is shown below.

 

 

Get Started

 

 

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

 

index.html

 

<div class="body-pdf">
  <div class="page">
    <header>
        The PDF... That's actually an HTML page.
    </header>
  </div>
  <div class="page">
    <header>
        The PDF... That's actually an HTML page.
    </header>
  </div>
</div>

 

 

Now create a style.css file and copy paste the following code

 

script.js

 

/*Stuff neccesary to make PDF viewer work*/
body{
  margin:0;
}
.body-pdf{
  background-color:#525659;
}
.page {
  width: 351px;
  margin: 12px auto 5px;
  margin-bottom:12px;
  background-color: white;
  box-shadow: 0 1px 2px 3px #3e4143;
  height: 1054px;
  box-sizing: border-box;
  padding: 1px 0;
  page-break-after: always;
  page-break-inside:avoid;
  position: relative;
}
@media print {
  .page {
    box-shadow: none;
    margin: 0;
  }
  html{
    background-color: white !important;
  }
}

 

READ  Electron Drag and Drop File Example with Editing

 

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

 

Leave a Reply