首頁>技術>

場景

注意是匯出檔案的場景,不是普通的現在檔案,匯出檔案一般先要生成檔案然後在下載檔案,比如企業中經常用到的excel匯出功能,先生成excel表格。在下載excel表格

如果現在讓你做這麼一個匯出excel的功能你第一時間會想到什麼?一般都會想到在檔案生成之後在response中宣告Content-Type的MIME為二進位制檔案瀏覽器會自動進行下載,這是在response上面做文章,整個過程發了一次請求

在實際開發過程中還看到一種做法:不在response上面做文章,直接在伺服器上生成可以下載的檔案,然後返回檔案的路徑,js在請求下載該檔案,這是在js上做文章,整個過程發了兩次請求

下面分別看一下兩種思路的實現方案

在response上宣告下載

在Java Spring框架中你可以這麼寫

@GetMapping("/export")public void export(HttpServletRequest request, HttpServletResponse response,SwaggerUserFindVO user) throws IOException {    //set header    String fileName = "使用者資料匯出"+System.currentTimeMillis()+".xls";                String userAgent = request.getHeader("user-agent").toLowerCase();    // WIN10 IE EDGE 瀏覽器 和其他系統的ie    if (userAgent.contains("msie") || userAgent.contains("like gecko") ) {        fileName = URLEncoder.encode(fileName, "UTF-8");    //非IE    } else {        fileName = new String(fileName.getBytes(),"ISO8859-1");    }    response.setContentType("application/octet-stream;charset=ISO8859-1");    response.setHeader("Content-Disposition", "attachment;filename="+ fileName);    response.addHeader("Pargam", "no-cache");    response.addHeader("Cache-Control", "no-cache");        //write file    OutputStream os = response.getOutputStream();        //組裝excel    XSSFWorkbook wb = createWorkbook();    wb.write(os);        os.flush();    os.close();}

最後直接在瀏覽器位址列輸入路徑,用GET請求下載即可,整個過程一次請求

在js中請求檔案下載

後端

@RequestMapping(value = "/export",produces = "application/text; charset=utf-8")@ResponseBodypublic String exportKeywordSceneMonitoringData(HttpServletRequest request)  {    //容器根path,這個地方生成的檔案可以被容器直接訪問    String path = request.getSession().getServletContext().getRealPath("/")    //定義臨時目錄    String folderName = "/tempLoad";    //建立目錄    File file = new File(path + folderName);    if (!file.exists()) {        file.mkdirs();    }    //檔名字    fileName = "/檔案匯出.xlsx";    StringBuilder filePath = new StringBuilder(path).append(folderName).append(fileName);    //生成此檔案    SXSSFWorkbook workbook = new SXSSFWorkbook();//TODO    FileOutputStream out = new FileOutputStream(filePath);    workbook.write(out);        //返回檔名稱    return folderName + fileName;}

前端

var params = {};$.ajax({    type: 'post',    url:  '../app/export',    data: params,    dataType: 'text',    success: function(_fileName){        if (_fileName != '') {            //瀏覽器位址列給生成的檔案傳送GET請求即可下載            window.location.href = "../" + _fileName;        }    },    error: function(){    }});

在js中控制下載,整個過程兩次請求

10
  • BSA-TRITC(10mg/ml) TRITC-BSA 牛血清白蛋白改性標記羅丹明
  • 精選高頻 VS Code 外掛