hugo-toha/layouts/shortcodes/embed-pdf.html

{{ $url := .Get "src" }}
{{ $hidePaginator := .Get "hidePaginator" | default "false" }}
{{ $hideLoader := .Get "hidePaginator" | default "false" }}
{{ $pageNum := .Get "renderPageNum" | default "1"}}

<div 
  class="pdf-viewer" 
  data-url="{{ $url }}" 
  data-hide-paginator="{{ $hidePaginator }}" 
  data-hide-loader="{{ $hideLoader }}"
  data-page-num="{{ $pageNum }}"
>
  <div class="paginator">
    <button class="prev">Previous</button>
    <button class="next">Next</button>
    <span>Page: <span class="page-num"></span> / <span class="page-count"></span></span>
  </div>

  <div class="embed-pdf-container">
      <div class="loading-wrapper">
        <div class="loading"></div>
      </div>
      <canvas class="pdf-canvas"></canvas>
  </div>
</div>

<!-- Finally, make the canvas more beautiful -->
<style>
.pdf-viewer canvas {
  border: 1px solid black;
  direction: ltr;
  width: 100%;
  height: auto;
  display: none;
}

.pdf-viewer  .paginator {
  display: none;
  text-align: center;
  margin-bottom: 10px;
}

.pdf-viewer .loading-wrapper {
  display: none;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 350px;
}

.pdf-viewer .loading {
  display: inline-block;
  width: 50px;
  height: 50px;
  border: 3px solid #d2d0d0;;
  border-radius: 50%;
  border-top-color: #383838;
  animation: spin 1s ease-in-out infinite;
  -webkit-animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
@-webkit-keyframes spin {
  to { -webkit-transform: rotate(360deg); }
}
</style>