前端实现下载文件功能

一、需求：

将 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);
};