Flask框架实现下载功能

基于Flask做web开发免不了需要有下载数据的功能，在此就把一些走过的弯路记录下

前期准备：

1.安装node.js

$wget https://nodejs.org/dist/v10.9.0/node-v10.9.0-linux-x64.tar.xz

$xz -d node-v10.9.0-linux-x64.tar.xz

$tar -xf node-v10.9.0-linux-x64.tar

$cd node-v10.9.0-linux-x64/

$./bin/node -v 

v10.9.0

打开bashrc添加路径：export PATH=$PATH:/home/chris/node/node-v10.9.0-linux-x64/bin，然后$source ~/.bashrc

2.安装json2csv

$mkdir package.json

$npm install json2csv --save  下载json2csv到node_modules中

参考资料:https://www.runoob.com/nodejs/nodejs-install-setup.html         https://github.com/boychina/json2csv

或者跳过此步，直接使用github上作者附带的json2csv文件:https://github.com/boychina/json2csv/tree/master/dist

一、普通下载

此功能在HTML上设置下载按钮，把后端传递到前端的json数据下载下来（数据也可以全部放前端，放后端安全点）

app.py

from flask import Flask,render_template

app = Flask(__name__)

@app.route("/demo", methods=['POST','GET'])

def demo():

    data=[{'a':1,'b':2,'c':3},{'a':4,'b':5,'c':6}]

    return render_template('demo.html',data=data)

if __name__ == '__main__':

    app.run(debug=True, host='0.0.0.0', port=9875)

templates/demo.html

<p><input type="button" value="Download"></p>

<script src="static/json2csv.js" type="text/javascript" charset="utf-8"></script>

<script charset="utf-8">

     	var fields = ["a","b","c"]

        var tt={{data|safe}}

        console.log(tt)

        var csv = json2csv({ data: tt, fields: fields });

        console.log(csv)

                var eleButton = document.querySelector('input[type="button"]');

        // 下载文件方法

        var funDownload = function (content, filename) {

            var eleLink = document.createElement('a');

            eleLink.download = filename;

            eleLink.style.display = 'none';

            // 字符内容转变成blob地址

            data = "\ufeff"+content;

            var blob = new Blob([data]);

            eleLink.href = URL.createObjectURL(blob);

            // 触发点击

            document.body.appendChild(eleLink);

            eleLink.click();

            // 然后移除

            document.body.removeChild(eleLink);};      

 eleButton.addEventListener('click', function () {funDownload(csv, 'test.csv');});

</script>

二、跳转链接下载

在前端HTML点下按钮的时候，跳出要下载数据的界面框

app.py：

from flask import Flask,render_template,Response

app = Flask(__name__)

@app.route("/demo", methods=['POST','GET'])

def demo():

    return render_template('demo.html')

@app.route("/getcsv")

def getcsv():

    table='a,b,c,\n1,2,3,\n4,5,6'

    return Response(table,mimetype="text/csv",headers={"Content-disposition":"attachment; filename=getcsv.csv"})

if __name__ == '__main__':

    app.run(debug=True, host='0.0.0.0', port=9875)

templates/demo.html：

<div style="width:10%;float:left"><form method="get" action="/getcsv">

<button type="submit">Download</button></form></div>

这是目前想到在flask框架下实现的下载功能，如果有更好的方法，可以互相交流下，谢谢

代码可以参考我的github：https://github.com/Cherishsword/Test-Download