Trials/2_Include_Pdfs.qmd

# Original Latex master thesis

The original master thesis which was submitted can be seen and downloaded below.

<!-- <iframe src="https://nbviewer.org/github/jav-ed/Test_1/raw/master/Javed_Butt_Missioninformer.pdf" width="100%" height="97%"></iframe> -->

<!-- download link: https://github.com/jav-ed/Test_1/raw/master/Javed_Butt_Missioninformer.pdf -->

<!-- Does not work
<iframe src="https://mozilla.github.io/pdf.js/web/viewer.html?file=https://github.com/jav-ed/Test_1/raw/master/Javed_Butt_Missioninformer.pdf#page=3&zoom=50&scrollbar=0&toolbar=0" width="100%" height="97%"></iframe> -->

<!-- embeed does not work
<embed src="https://github.com/jav-ed/Test_1/raw/master/Javed_Butt_Missioninformer.pdf" 
type="application/pdf"
 width="100%" height="600px"> -->

<!-- google docs, does not look really good -->
<!-- <iframe 
src="https://docs.google.com/gview?embedded=true&url=https://github.com/jav-ed/Test_1/raw/master/Javed_Butt_Missioninformer.pdf" 
width="100%"
height="97%" >
</iframe> -->

<!-- works using nbviewer nice. It does not store any data, rather is gets the data from provided url and then does some rendering work on its won server (no server required from users side):
https://nbviewer.org/, looks impressively good7
https://nbviewer.org/faq#how-can-i-remove-a-notebook-from-nbviewer

-->
<!-- <iframe src="https://nbviewer.org/github/jav-ed/Test_1/raw/master/Javed_Butt_Missioninformer.pdf" width="100%" 
height="91%"></iframe> -->
<!-- 
<iframe src="https://nbviewer.org/github/jav-ed/Test_1/raw/master/Javed_Butt_Missioninformer.pdf" width="100%" 
height="91%"></iframe>
 -->

<!-- using hugging face does work when combined with google docs
Note, the perfoamnce of google docs is not satisfying - the pdf doucments looks blurred
download link: 
https://huggingface.co/spaces/JavedA/Test/resolve/main/Javed_Butt_Missioninformer.pdf

https://huggingface.co/spaces/JavedA/Test/blob/main/Javed_Butt_Missioninformer.pdf

raw will give you a git large file remark  -> not suited to download or embeed pdf or any other binary files -> use resolve instead of blob or raw 
https://huggingface.co/spaces/JavedA/Test/raw/main/Javed_Butt_Missioninformer.pdf
 -->

<!-- <iframe src="https://docs.google.com/gview?embedded=true&url=https://huggingface.co/spaces/JavedA/Test/resolve/main/Javed_Butt_Missioninformer.pdf"
height="91%"
width="100%"
></iframe> -->


Finally, what worked was:

Define a iframe and some of its styling
<style>
    #pdf_Iframe {
      width: 100%;
      height: 91%;
      border: 1px solid #ccc;
    }
</style>

  <iframe id="pdf_Iframe"></iframe>
  <script>

    // DOMContentLoaded is an event in JavaScript that fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading.
    document.addEventListener('DOMContentLoaded', function() {
      // Code to be executed after the DOM has been loaded
      openPdf();
    });

    // use resolve for pdf, not raw and not blob
    const url = 'https://huggingface.co/spaces/JavedA/Test/resolve/main/Javed_Butt_Missioninformer.pdf';

    // download the pdf using the url provided above
    function openPdf() {
      fetch(url)
        .then(response => response.blob())
        .then(blob => {
          const blobUrl = URL.createObjectURL(blob);

          const iframe = document.getElementById('pdf_Iframe');
          iframe.src = blobUrl;

        });
    }
  </script>