JS implementation blob download file

Time:2022-5-13

1. First create an HTTP request

let xhr = new XMLHttpRequest();
    xhr. open('get', url, true);  // URL is the address link
    xhr.setRequestHeader('Content-Type', `application/${type}`);
    xhr.responseType = "blob";
    xhr.onload = function () {
      if (this.status == 200) {
        //Accept binary stream
        var res = this.response;
        downloadExportFile(res, fileName, type)
      }
    }
    xhr.send();
  }

@Param res: file link
@Param filename: file name;
@Param type: file type;

2. Create a blob

function downloadExportFile (res,fileName,type) {
    const blob = new Blob([res],{type:'application/${type}'});
    const a = document.createElement('a');
    a.href = URL.createObjectURL(blob);
    a.download = fileName + '.pdf';
    a.click();
    URL.revokeObjectURL(a.href);
    a.remove();
}

This completes the blob download file function.
After publishing to the test environment, it is found that an error will be reported after clicking: mixed content: the page at HTTPS contains HTTP insecurity. Solution:
Add in HTML page

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />