前端頁面導出CSV格式文件代碼實現（后端采用Flask）

參考鏈接：https://www.cnblogs.com/dengnan/p/3990211.html

我使用的是參考鏈接的第一種方法

具體思路就是在后端拼接出需要的data數據類型

前端參考代碼

前端的思路就是通過向后端傳遞參數ta_csv查詢出需要的數據，然后json.dumps()返回給前端

 var ta_csv = $("#drop").text()
 var label_data = null

      {#等待頁面加載完成#}
      window.onload = function () {
          {#點擊下載按鈕#}
          document.getElementById("download").onclick = function () {
              {#使用ajax從后端查詢數據#}
              $.ajax({
                  url: '/labels_csv/',
                  type: 'POST',
                  data: {"ta": ta_csv},
                  success: function (data) {
                      {#string數據類型的data,通過JSON.parse()轉成對象類型#}
                      label_data = JSON.parse(data)['data'] 

                      exportCsv({
                          title: ["標簽名", "文章數"],
                          titleForKey: ["num1", "num2"],
                          {#for循環取出label,num組成一個字典，append到列表中#}
                          data: label_data
                      });
                  }
              })
          }
      }

后端參考代碼

后端思路就是查詢出下載的數據，然后拼接成前端需要下載的格式，這里注意return給前端的數據不能是list,數字之類的，最好json.dumps()序列化一下

def labels_csv():
    data=[]
    #獲取前端ajax傳遞的ta
    ta=request.form.get('ta').strip()
    #根據治療領域查詢出所有的標簽數據，返回給前端做csv文件下載
    Labels = dbS.session.query(Label.label_name, func.count(Label.id)).filter(Label.ta == ta).group_by("label_name").all()
    for label in Labels:
        result = {}
        result["num1"]=label[0]
        result["num2"]=label[1]
        data.append(result)

    return json.dumps({'data':data})