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

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.