将 ByteArray 下载为 pdf /处理 React 中的错误

Question

I have an api called from react. it returns a pdf file. When i click the link as href, i can download the pdf. Now, instead of an href, i am calling a function, on clicking and from that function, i call the api. But i am not able to download the file. This is what i am doing:

 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);
        });

I am not able to download any file. The api (written in kotlin) returns a bytearray. Also, if the api throws an exception instead of returning bytearray, i need to show a pop up, Any thoughts on this?

Answer 1

You can create an invisible anchor tag somewhere in your component and use it. In my solution i created an invisible anchor tag with id invisible-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
}

here's a link of my code using this approach

Answer 2

To download the file you could use the file-saver npm package and use it as following:

import { saveAs } from 'file-saver';

const file = new Blob([blob]);

saveAs(file, 'fileName');

To open the file in your browser:

const file = new Blob([blob], {
  type: 'application/pdf',
});

const fileURL = URL.createObjectURL(file);

window.open(fileURL);

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);