vue下載xls文件 （后端django）

vue下載xls文件 （后端django）

• 前端vue

  async exportOrder () {
        if (this.batchEditOrderStatus.length === 0) {
          this.$message.warning('您當前什么都沒有選')
          return
        }
        // {responseType: 'blob'} 的設置很重要否則無法下載
        axios.post('export_order/', {'data': this.batchEditOrderStatus}, {responseType: 'blob'}).then((res) => {
          // 創建標簽a
          const link = document.createElement('a')
          let blob = new Blob([res.data], {type: 'application/vnd.ms-excel'})
          link.style.display = 'none'
          link.href = URL.createObjectURL(blob)
          let num = ''
          // 生成隨機數
          for (let i = 0; i < 10; i++) {
            num += Math.ceil(Math.random() * 10)
          }
          link.setAttribute('download', '航海者有限公司訂單信息_' + num + '.xlsx')
          document.body.appendChild(link)
          link.click()
          // 刪除標簽
          document.body.removeChild(link)
        })
      }
  

• django

  def send_csv(request):
      if request.method == "POST":
          result_str = request.body.decode("utf-8")
          result_dict = json.loads(result_str)
          order_list = result_dict.get("data")
          try:
              # csv 函數為自定義，生成excel的格式
              ws = csv(order_list)
              sio = BytesIO()
              ws.save(sio)
              sio.seek(0)
              str_time = fmt_time()
              # 定義返回數據類型
              response = HttpResponse(sio.getvalue(), content_type="application/vnd.ms-excel", )
              # 定義文件名。
              response["Content-Disposition"] = "attachment; filename=%s" % (
                  urlquote(DEFAULT_FILENAME % (str_time,)),
              )
              response.write(sio.getvalue())
              return response
          except Exception as e:
              return JsonResponse(
                  {"code":1002, "msg":"生成xls失敗", "data":""}
              )
      else:
          return JsonResponse(
              {"code": 1008, "msg": "請求方式有問題", "data": ""}
          )