jquery利用动态创建form表单下载文件,以及利用ajax先在后台生成文件之后回调自动触发a标签点击事件下载文件,导出excel

提交表单下载excel

$('#exportExcel .layui-btn').on('click', function(){
     
    var form = document.createElement('form');
    form.setAttribute('style','display:none');
    form.setAttribute('target','');
    form.setAttribute('method','post');
    form.setAttribute('action','/layui/downExcel')

    var inputContent = document.createElement('input')
    inputContent.setAttribute('type','hidden');
    inputContent.setAttribute('name','item');
    inputContent.setAttribute('value','test');

    $('body').append(form);
    form.append(inputContent);
    form.submit();
    form.remove();

});

后端使用springmvc,主要使用HttpServletResponse给浏览器返回数据流,
这里使用了EasyExcel可参考我另一篇博文https://blog.csdn.net/weixin_43944305/article/details/107911981

后端这里可以使用request.getParameter接收的原因是form表单默认是使用application/x-www-form-urlencoded提交的,可以查看http的请求头中的content-type,这是因为Tomcat的HttpServletRequest类的实现类为org.apache.catalina.connector.Request处理post请求时当请求的content-type=application/x-www-form-urlencoded时是会解析表单数据来放到request parameter map中.

@PostMapping("downExcel")
@ResponseBody
public void downExcel(HttpServletRequest request, HttpServletResponse response) throws IOException {
     
	String requestItemData = request.getParameter("item").toString();
    // 这里注意 有同学反应使用swagger 会导致各种问题，请直接用浏览器或者用postman
    response.setContentType("application/vnd.ms-excel");
    response.setCharacterEncoding("utf-8");
    // 这里URLEncoder.encode可以防止中文乱码 当然和easyexcel没有关系
    String fileName = URLEncoder.encode("测试", "UTF-8");
    response.setHeader("Content-disposition", "attachment;filename=" + fileName + ".xlsx");
    EasyExcel.write(response.getOutputStream(), EasyExcelTest.class).sheet("模板").doWrite(data());
}

通过ajax现在后台生成文件,然后在js中通过js触发click事件

jquery

$('#ajaxFormExport').on('click', function(){
     
$.ajax({
     
    type: 'post',
    dataType: 'json',
    contentType: 'application/json',
    url: '/layui/downForA',
    data: JSON.stringify({
     aaa: 111}),
    success: function (data) {
     
        console.log(data);

        var a = $('');
        a.attr('href',data.filePath);
        //这里download属性是为了避免直接打开pdf等格式,只有chrome和firefox支持
        a.attr('download',data.fileName);
        $('body').append(a);
        a[0].click();
        a.remove();
    },
    error: function (error) {
     
        console.log(error);
    }
});
});

原生document

const a = document.createElement('a'); 	// 创建a标签
a.setAttribute('download', '');			// download属性
a.setAttribute('href', '');				// href链接
a.click();								// 自执行点击事件
a.remove();								//在dom4的规范中才有