Downloading from the server and launching a preview of a pdf or doc in a new browser window

Question

This is working functionality for downloading a file from the server. This works. What I am trying to do is launch a preview of a pdf or an image in a separate browser window, not getting results

        await fetch(docUri, {
            method: 'GET',
            headers: {
                Authorization: `Bearer ${token}`,
                Accept: `application/json`,
                'Content-Type': 'application/json',
                responseType: 'blob',
            },
        })
           
            .then((res) => {
                return res.blob();
            })

            .then((blob) => {
                const href = URL.createObjectURL(blob);

                const link = document.createElement('a');
                link.href = href;
                link.setAttribute('download', documentName);
                link.click();
            });
    };

Here's what I've replaced the .then(blob)... with, splicing in after the fetch, with no success.

Solution attempt #1 from How to open a pdf in new tab in reactjs?, this throws error with response.data because not fetching with Axios.

            //Create a Blob from the PDF Stream
            .then((response) => {
             const file = new Blob([response.data], { type: `application/${currentDocument.extension}` });
             //Build a URL from the file
             const fileURL = URL.createObjectURL(file);
             //Open the URL on new Window
             const pdfWindow = window.open();
             pdfWindow.location.href = fileURL;
             });

  Modifying the above to resolve errors opens a new tab and downloads something, but both are blank

            .then((res) => {
              //Build a URL from the file
                const fileURL = URL.createObjectURL(res);
                //Open the URL on new Window
                const pdfWindow = window.open();
                pdfWindow.location.href = fileURL;
             });

            //from Codex, downloads a blank file, does not open a new browser window
            .then((blob) => {
               const href = URL.createObjectURL(blob);
               window.open(href, '_blank');
            });

#3 different approach, trying to get reader.result but it's coming back null. based on this React js :I need to open file in chrome browser instead downloading.for ex: onclick docx,excel,pdf,zip file open in the recommended application

Type 'string | ArrayBuffer' is not assignable to type 'string'

            .then((blob) => {
         

                let csv = null;

                const promise = new Promise((resolve) => {
                    const reader = new FileReader();

                    reader.readAsDataURL(blob);
                    resolve(reader.result);
               });

               promise.then((res) => {
                    csv = res;
                });

               console.log({ csv }); // this is null still

                setTimeout(() => {
                    window.open(csv);
                }, 500);
             });

forgive the formatting of this post, multiple code blocks seem to mess up the styling here and there.