返回文件为$ http.post响应

Question

I want to send some data back to my API and return an .xlsx file as a response, so that the client will be able to download it. The requirement which makes everything fall apart is that I have to create the .xlsx file as a temporary file. The problem I have been facing is when the file is opened after been downloaded it is completely corrupted.

I'm using AngularJS and Python Flask

Here is server side handling :

@app.route('/downloadxlsx', methods=['POST'])
def downloadOrderToExcel():
  try:
    data = request.get_json()
    productsBought = data.pop('products')
    data['datetime'] = datetime.datetime.now().strftime('%Y-%m-%d %H:%M:%S')

    output = io.BytesIO()
    wb = xlsxwriter.Workbook(output, {'in_memory': True})
    ws = wb.add_worksheet(data['fullname'])
    row = col = 0
    for columnName in excelColumnNames():
      ws.write(row, col, columnName)
      col += 1
    col = 0
    row = 1
    for cellValue in data:
      ws.write(row, col, data[cellValue])
      col += 1
    for product in productsBought:
      result = queryForProducts(product)
      for r in result:
        ws.write(row, col, r['categoryname'] + " pack of " + r['pack'])
        row += 1

    output.seek(0)
    wb.close()
    return send_file(output, as_attachment=True, attachment_filename='order.xlsx')
  except Exception as ex:
    print(str(ex))
    return 'False'

Here is request :

  vm.downloadExcel = function() {
    this.jsonCustomer = JSON.stringify(vm.customer);
    $http.post('/downloadxlsx', this.jsonCustomer)
    .then(response => {
        let blob = new Blob([response], {type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
        let url = URL.createObjectURL(blob);
        let a = document.createElement('a');
        a.href = url;
        a.target = '_blank';
        a.click();
    })
  }

Answer 1

It seems data is getting corrupted because browser in not able to make the sense of the data (content-type) while reading from blob and writing it in file.

looking at you code it seems you are using two step process. 1. get user input and provide him download link 2. on click of download link you provide him xlsx file. So why not wait till user click download link and then submit the user input data and respond back with xlxs file directly from server. So content-type will be handled by server only and its browser server interaction without ajax/client intervention in setting content-type.

Secondly, I see you are simply converting user input into xlsx and responding back. So instead of going to server we can develop the xlsx on client side using module like sheetjs