gdoc_embed.html

<div data-id="{gdoc_id}" class="gdoc-embed-wrapper" style="position:relative;width:100%;">
  <div style="padding-top: 141%"></div>
  <script>
    const parent = document.currentScript.parentElement;
    const id = parent.dataset.id;
    const t = "https://docs.google.com/document/d/"+id+"/export?format=pdf";
    const loader = document.createElement("DIV");
    loader.innerHTML = "Loading document...
    Object.assign(loader.style, {
      position: "absolute",
      top: "25px",
      marginLeft: "-1rem",
      left: "50%",
    });
    loader.role="status";
    parent.appendChild(loader);
    
    fetch(t).then(res=>{
      if(!res.ok){
        throw new Error("Request to doc "+id+" failed with status : "+res.statusText);
      }
      return res.blob();
    }).then(blob=>{
      const url = URL.createObjectURL(blob);
      const i = document.createElement("IFRAME");
      i.src = url;
      Object.assign(i.style, {
        position: "absolute",
        top: 0,
        bottom: 0,
        left: 0,
        width: "100%",
        height: "100%",
        border: 0,
      });
      parent.appendChild(i);
    })
    .catch(e=>{
        let error = document.createElement("DIV");
        error.innerHTML = e.message;
        Object.assign(error.style, {
          position: "absolute",
          top: 0,
        });
        parent.appendChild(error);
    })
    .finally(()=> {
      parent.removeChild(loader);
    });
  </script>
</div>