前端页面导出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})