使用发布请求下载Excel文件

Question

I've an API endpoint that takes in a JSON and returns a excel file. The endpoint directly sends the file, not the link to the file. How do I download the file using JQuery AJAX.

Backend Code:

public function postExcel() {

  // Parse request body
  $reqBody = json_decode(file_get_contents('php://input'));

  // On Valid Request
  if(isset($reqBody, $reqBody->regno, $reqBody->offset) && $reqBody->offset < 100 && $reqBody->offset >= 0) {
    // Create and add metadata to the workbook
    $workbook = new \PHPExcel();
    $workbook->getProperties()
             ->setCreator('AUScraper')
             ->setTitle('AU Results')
             ->setLastModifiedBy('AUScraper')
             ->setDescription('generated by AUScraper')
             ->setSubject('generated by AUScraper')
             ->setKeywords('anna university unofficial semester result API')
             ->setCategory('semester results');

    $worksheet = $workbook->getSheet(0);
    $worksheet->setTitle('results');

    // Get the results
    $results = $this->requestAU($reqBody->regno, $reqBody->offset);

    // Update worksheet



    //Output the file
    ob_clean();
    header("Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");
    header("Content-Disposition: attachment; filename=\"results.xlsx\"");
    header("Cache-Control: max-age=0");
    header("Expires: 0");

    $workbookWriter = new \PHPExcel_Writer_Excel2007($workbook);
    $workbookWriter->save("php://output");
  }

  // On Invalid Request
  header('Content-Type: application/json');
  http_response_code(400);
  return json_encode(['error' => 'invalid request']);
}

Frontend Code:

import $ from 'jquery';
import 'materialize';

 $(() => {
    $('#reg_form').submit(() => {

  // format data to send
  let form_data = {};
  form_data.regno = $('#reg_no').val();
  form_data.offset = $('#offset').val();

  // Send the request
  $.ajax({
    url: 'http://localhost/git_repo/AUScraper/app/public/api/excel',
    data: JSON.stringify(form_data),
    type: 'POST',
    contentType: 'application/json',
    success: function(data) {
          var blob=new Blob([data], {type : 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'});
          var link=document.createElement('a');
          link.href=window.URL.createObjectURL(blob);
          link.download="result_"+new Date()+".xlsx";
          link.click();
        },
    error: (xhr,status,error) => {
      let errorMessage = JSON.parse(xhr.responseText);
      Materialize.toast(errorMessage.error, 2000);
    }
  });

    return false;
  });
});

I don't want to save the file in server beforehand, but just download it. Thanks in advance.

Answer 1

The problem in the above question was, I was able to download the file but it was corrupted. I fixed it by setting responseType of xhr to blob .

New AJAX code for reference:

let xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost/git_repo/AUScraper/app/public/api/excel');
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.responseType = 'blob';

xhr.onload = function(e) {
  if (this.status == 200) {
    let link=document.createElement('a');
    link.href=window.URL.createObjectURL(this.response);
    link.download="results.xlsx";
    link.click();
  }
  else {
    Materialize.toast('Invalid data!', 2000);
  }
}

xhr.send(form_data);