SharePoint PDF preview for document library edit- and viewforms.

PdfViewer.js

const PdfPreview = () => {
    let _wopiDOM;
    async function GetWopiDOM(docUrl = CurrentItemUrl()) {
        if (_wopiDOM) { return _wopiDOM } else {
            return fetch(`${_spPageContextInfo.siteAbsoluteUrl}/_layouts/15/WopiFrame.aspx?sourcedoc=${encodeURIComponent(docUrl)}`, { credentials: "include" })
                .then(res => res.text().then(wopi => new DOMParser().parseFromString(wopi, "text/html")).then(dom => {
                    _wopiDOM = dom
                    return _wopiDOM
                }))
        }
    }
    const OnDoclibForm = () => window.WPQ2FormCtx ? WPQ2FormCtx.ItemContentTypeName === "Document" ? true : false : false
    const CurrentItemUrl = () => `${location.protocol}//${location.host}${WPQ2FormCtx.ItemAttributes.Url}` // Edge doesn't support location.origin
    const WopiAccessToken = async () => GetWopiDOM().then(wopiDOM => wopiDOM.querySelector("input[name='access_token']")["value"])
    const WopiFormActionUrl = async () => GetWopiDOM().then(wopiDOM => decodeURIComponent(wopiDOM.querySelector("form[target='WebApplicationFrame']")["action"]))
    const WopiItemId = async () => WopiFormActionUrl().then(u => u.substring(u.indexOf("files/") + 6, u.indexOf("files") + 38))
    const OWAServerHost = async () => WopiFormActionUrl().then(u => u.substring(0, u.indexOf("/wv/")))
    const FileName = WPQ2FormCtx.ListData.FileLeafRef.substring(0, WPQ2FormCtx.ListData.FileLeafRef.lastIndexOf("."))
    const FullPdfUrl = async () =>
        `${await OWAServerHost()}/wv/WordViewer/${FileName}.pdf?WOPISrc=${_spPageContextInfo.webAbsoluteUrl}/_vti_bin/wopi.ashx/files/${await WopiItemId()}&access_token=${await WopiAccessToken()}&type=accesspdf`;

 //Adds an 800px by 100% iframe to the right of the form 
    function AddIframeToForm(pdfUrl) {
        console.log(`Got PDF URL:\n${pdfUrl}`)
        let iframe = document.createElement("iframe")
        iframe.id = "pdfpreview"
        iframe.setAttribute("style", "position:absolute;right:0; top:0; bottom:0; height:100%; width:800px")
        let mainDiv = () => document.querySelector("#DeltaPlaceHolderMain>div") ?
            document.querySelector("#DeltaPlaceHolderMain>div") : // classic
            document.querySelector(".od-ListItemFormRoot") // modern
        let containerDiv = document.createElement("div")
        mainDiv().appendChild(containerDiv)
        iframe.setAttribute("type", "application/pdf")
        iframe.src = pdfUrl;
        containerDiv.appendChild(iframe);
        console.log("Added PDF-iframe to editform")
    }

    /**
     * Since the iFrame is absolutely positioned, we have to avoid it overflowing the title bar,
     * And still not drop down when the ribbon is enabled
     */
    function HandleIFramePlacement() {
        [].slice.call(document.querySelectorAll("#RibbonContainer li a")).map((ele) => {
            ele.addEventListener("click", () => {
                let tabId = SP.Ribbon.PageManager.get_instance().get_ribbon().get_selectedTabId();
                tabId === null || tabId === "Ribbon.Read" ?
                    document.getElementById("pdfpreview").style.top = "0px" :
                    document.getElementById("pdfpreview").style.top = "90px"
            })
        })
    }

    return {
        Show: () => {
            if (OnDoclibForm()) {
                FullPdfUrl().then(pdfUrl => {
                    AddIframeToForm(pdfUrl)
                    HandleIFramePlacement()
                })
            }
        }
    }
}

//IIFE
(() => ExecuteOrDelayUntilBodyLoaded(() => PdfPreview().Show()))()