时间戳

首页 > 解决方案 > Angular 8 + Django RestFramework 文件（csv）下载

python - Angular 8 + Django RestFramework 文件（csv）下载

问题描述

我是角度的新手。我想下载 CSV，点击下载按钮。

django 视图集

@action(detail=False, methods=['get'])
def download_csv(self, request):
        data = {
          "student_data": [
            {
              "roll_no": 12,
              "detail": {
                "name": "Tom",
                "address": "XYZ"
              }
            },
            {
              "roll_no": 8,
              "detail": {
                "name": "Ryan",
                "address": "ABC"
              }
            },
            {
              "roll_no": 12,
              "detail": {
                "name": "Tom",
                "address": "PQR"
              }
            }
          ]
        }
        response = HttpResponse(content_type='text/csv')
        response['Content-Disposition'] = 'attachment; filename="emp_details.csv"'
        writer = csv.DictWriter(response, fieldnames=['name', 'roll', 'address'])
        writer.writeheader()
        for i in data["student_data"]:
            meta_data = i["detail"]
            detail_dict = {}
            detail_dict["name"] = meta_data["name"]
            detail_dict["address"] = meta_data["address"]
            detail_dict["roll"] = i["roll"]
            writer.writerow(address)
        return response

当我点击 URL http://localhost:8000/download_csv/ 时。CSV 以文件名“emp_details.csv”下载。

现在我想将此响应与 anuglar 集成。单击 Angular 前端的下载按钮后，如何订阅此 API 端点并下载 csv 文件。这是该端点的响应（不是通常的 JSON）。

标签： pythondjangoangulardjango-rest-framework

解决方案

我能够解决它。用下面的代码

零件

import * as FileSaver from 'file-saver';

onDownloadClick() 
    {
      this.serviceModule.download().subscribe(
        (res) => {
          let blob = new Blob([res], { type: 'text/csv' });
          FileSaver.saveAs(blob, "example.csv")
        }
      );
    }

服务

public download(): Observable<any> {
    return this.http
      .get(
        "http://localhost:8000/download_csv/",
        { responseType: "arraybuffer" }
      )
  }

希望这对将来的人有所帮助！

推荐阅读