JS实现点击按钮下载文件

下载项目中的文件

目录

1.下载项目中的文件

2.发送请求地址下载文件

1.get请求

2.post请求

1.下载项目中的文件：

1 <i class="fa fa-download" aria-hidden="true" title="下载" onclick="window.open('file/user.xlsx')"></i>

这样点击下载文件后，文件就自动下载了

2.发送请求地址下载文件

JQuery的ajax函数的返回类型只有xml、text、json、html等类型，没有“流”类型，所以我们要实现ajax下载，不能够使用相应的ajax函数进行文件下载。但可以用js生成一个form，用这个form提交参数，并返回“流”类型的数据。在实现过程中，页面也没有进行刷新。

1.get请求

    var tt = new Date().getTime();
    var url = 'http://192.168.1.231:8080/91survey/ws/excel/download';

    /**
     * 使用form表单来发送请求
    * 1.method属性用来设置请求的类型——post还是get
    * 2.action属性用来设置请求路径。
    * 
     */
    var form=$("<form>");//定义一个form表单
    form.attr("style","display:none");
    form.attr("target","");
    form.attr("method","get");  //请求类型
    form.attr("action",url);   //请求地址
    $("body").append(form);//将表单放置在web中

    　　/**
         * input标签主要用来传递请求所需的参数：
         *
         * 1.name属性是传递请求所需的参数名.
         * 2.value属性是传递请求所需的参数值.

         *  相当于key  value
         *这个方法理由两个参数，一个是tt，一个是companyId；
         * 3.当为get类型时，请求所需的参数用input标签来传递，直接写在URL后面是无效的。
         * 4.当为post类型时，queryString参数直接写在URL后面，formData参数则用input标签传递
         *       有多少数据则使用多少input标签
         *
    　　　*/
    var input1=$("<input>");
    input1.attr("type","hidden");
    input1.attr("name","tt");
    input1.attr("value",tt);
    form.append(input1);

    var input2=$("<input>");
    input2.attr("type","hidden");
    input2.attr("name","companyId");
    input2.attr("value",companyId);
    form.append(input2);

    form.submit();//表单提交
})

2.post请求

    var tt =newDate().getTime();
    var url = restUrl +'/excel/download?userId='+ userId;
    var form=$("<form>");//定义一个form表单
    form.attr("style","display:none");
    form.attr("target","");
    form.attr("method","post");//请求类型
    form.attr("action",url);//请求地址
    $("body").append(form);//将表单放置在web中
        /**
      *1.tt是参数
      tt1相当于关键字。tt2相当于关键字的值
      *
      */
    var input1=$("<input>");
    input1.attr("type","hidden");
    input1.attr("name","tt1");
    input1.attr("value",tt2);
    form.append(input1);

    var input2=$("<input>");
    input2.attr("type","hidden");
    input2.attr("name","companyId");
    input2.attr("value",companyId);
    form.append(input2);
    form.submit();//表单提交
});