前端实现下载文件功能

    技术2022-07-10  162

    一、需求:

    将 jmeter 执行日志的结果从mysql数据表中读出来,并下载成一个文件;

    二、实现:

    1、发送ajax请求,查询需要下载的内容。

    function downloadFile(){ var row = $('#dg').datagrid('getSelected'); var fileName = row.resultFileName; if (null != row) { $.ajax({ url:"${basePath}/jmeterCaseExeLog/downloadScript?exeLogId="+row.id, dataType:"json", success:function (res) { if (res.header.flag) { var context = res.body; download(context,fileName); } else { Notify(res.header.msg, 'top-right', '5000', 'danger', 'fa-bolt', true); } } }); } }

    2、后端java代码从mysql中查询需要下载的内容,包装后返回给前端。

    @RequestMapping("downloadScript") @ResponseBody public Object downloadScript(HttpServletRequest request ,Integer exeLogId){ try { TmpJmeterExeLogPo tmpJmeterExeLogPo = jmeterExeLogService.getById(exeLogId); String xmlData = tmpJmeterExeLogPo.getResultData(); return success(xmlData); }catch (Exception e){ return error("500","下载文件失败"); } }

    3、ajax请求成功后,前端解析返回的内容,并下载到本地。

    // 下载文件方法 function download(content, filename) { var eleLink = document.createElement('a'); eleLink.download = filename; eleLink.style.display = 'none'; // 字符内容转变成blob地址 var blob = new Blob([content]); eleLink.href = URL.createObjectURL(blob); // 触发点击 document.body.appendChild(eleLink); eleLink.click(); // 然后移除 document.body.removeChild(eleLink); };
    Processed: 0.009, SQL: 9