下载 by ByteArray 作为 pdf /handle error in React 中的 pdf /handle

Question

我有一个从 react 调用的 api。 它返回一个 PDF 文件。当我单击链接作为href时，我可以下载pdf。 现在，我正在调用一个函数，而不是 href，单击并从该函数调用 api。但是我无法下载该文件。 这就是我正在做的：

fetch(<url>, {
method: "GET",
headers: {
Accept: "application/pdf",
"Content-Type": "application/pdf",
},
}).then(response => response.blob())
.then(response => {
var blob=response
var reader = new window.FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
window.open(base64data);
}
})
.catch(error => {
console.error(error);
});

我无法下载任何文件。api(用 kotlin 编写(返回一个字节数组。 另外，如果 api 抛出异常而不是返回字节数组，我需要显示一个弹出窗口， 对此有什么想法吗？

Answer 1

要下载文件，您可以使用文件保护程序 npm 包并按如下方式使用它：

import { saveAs } from 'file-saver';
const file = new Blob([blob]);
saveAs(file, 'fileName');

要在浏览器中打开文件：

const file = new Blob([blob], {
type: 'application/pdf',
});
const fileURL = URL.createObjectURL(file);
window.open(fileURL);

Answer 2

您可以在组件中的某个位置创建一个不可见的锚标记并使用它。在我的解决方案中，我创建了一个不可见的锚标记，其 idinvisible-link

async function download(payload) {
const response = await axios({
url: getFileLink(payload), responseType: 'blob'
})
if (response.status !== 200) {
// handle error
return
}
const anchor = document.getElementById('invisible-link')
const objectUrl = window.URL.createObjectURL(response.data)
anchor.href = objectUrl;
anchor.download = getDownloadFilename(response.headers)
anchor.click()
window.URL.revokeObjectURL(objectUrl)
}
function getDownloadFilename(headers = {}) {
const { 'content-disposition' : disposition = '' } = headers
const keyValue = disposition.split(';').find(e => e.includes('filename')) || ''
const [,filename] = keyValue.split('=')
return filename
}

这是我使用这种方法的代码链接

Answer 3

// Function to download the file from byte array in REACT JS   

const downloadPdfFromArrayBytes = (fileName = 'testFile.pdf', byteArrayResFromAPI) => {
const arr = new Uint8Array(array);
const blob = new Blob([arr]);
if (navigator.msSaveBlob) {
// IE 10+
navigator.msSaveBlob(blob, fileName);
} else {
const link = document.createElement('a');
// Browsers that support HTML5 download attribute
if (link.download !== undefined) {
const url = URL.createObjectURL(blob);
link.setAttribute('href', url);
link.setAttribute('download', fileName);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
};


// Example 
// if you have api resp in byteArray as [10,12,30,20,34,49]

const fileName = 'myfileexample.pdf';
const apiResByteArr = [10,12,30,20,34,49];

downloadPdfFromArrayBytes(fileName ,apiResByteArr);