nginx 下前端 跨域 下载文件

使用 layui 上传文件后,需要下载,但是下载文件在上传的时候为了不重复,文件名直接使用了新规则保存,下载文件的时候需要将原来的文件名还原回去;但是由于跨域问题,可以下载,但无法重命名,html 的a标签 的属性 download 无法重命名,花了几个小时,找到一种方法,记录下:
html 的 form表单 下载文件法:
后台

@RequestMapping(value = "url", method = RequestMethod.GET)
    public void downloadEdiFile(HttpServletRequest request, HttpServletResponse response) throws IOException {
        String mainUrl = request.getParameter("fileUrl");//获取信息路径,包括文件路径、文件名、token
        String fileUrl = mainUrl.substring(mainUrl.indexOf("/"),mainUrl.indexOf("?"));//文件路径
        String mianFileName = mainUrl.substring(0,mainUrl.indexOf("/"));//文件名
        String fileExtension = fileUrl.substring(fileUrl.lastIndexOf("."));//文件后缀
        String fileName = mianFileName+fileExtension;//新的文件名(带后缀)
        //获取文件保存地址
        String filePath = "http://112.112.223.229:1013/fileload" + fileUrl;
        // 从网络读取文件
        URL url = new URL(filePath);
        URLConnection conn = url.openConnection();
        InputStream txtIn = conn.getInputStream();
        //读取文件
//        InputStream txtIn = new FileInputStream(new File(filePath));
        OutputStream os = response.getOutputStream();
        String userAgent = request.getHeader("user-agent").toLowerCase();
        if (userAgent.contains("msie") || userAgent.contains("like gecko")) {
            // win10 ie edge 浏览器 和其他系统的ie
            fileName = URLEncoder.encode(fileName, "UTF-8");
        } else {
            // 文件名转码
            fileName = new String(fileName.getBytes("UTF-8"), "iso-8859-1");
        }
        response.setContentType("application/octet-stream; charset=UTF-8");
        response.setHeader("Content-Disposition", "attachment; filename=" + fileName);// @TODO 下载的文件名称
        //文件缓存区
        byte[] bytes = new byte[1024];
        //判断输入流中的数据是否已经读完的标致
        int len = 0;
        while ((len = txtIn.read(bytes)) > 0) {
            os.write(bytes, 0, len);
        }
        if (os!=null){
            os.close();
        }
        if (txtIn!=null){
            txtIn.close();
        }
    }

简单的拼接路径,其中拼接了token和fileName

html js代码

//按钮点击事件
$(document).on('click', '.upload-btn', function () {
            var fileUrl = $(this).parent().parent().siblings("td[data-field='fileUrl']").children()[0].innerHTML;
            var fileName = $(this).parent().parent().siblings("td[data-field='fileName']").children()[0].innerHTML;
            if (fileName === null || fileName.length === 0) {
                fileName = radioData.procPlanName + "-" + ($(this).parent().parent().siblings("td[data-field='procRecipeName']").children()[0].innerText);
            }
            //fileUrl 为文件下载路径;fileName为文件名
            downloadFile(fileUrl, fileName);
        });

        //form 表单经过测试,发现当路径找不到文件时,会跳转至报错页面;为了不跳转,界面实现一个隐藏的iframe框,使用 target=\"mangguo\" 指向它
        function iframeFileFlag() {
            if (iframeFlag === false) {
                iframeFlag = true;
                alert("文件不存在或已失效");
            }
        }

        //下载文件
        function downloadFile(fileUrl, fileName) {
            iframeFlag = false;
            var $downForm = $("
"
); //后台路径 $downForm.attr("action", zuulUrl + "/file/upload/url"); var $input = $(""); $input.attr("name", "fileUrl"); var mainUrl = fileName + fileUrl + "?_token=" + _token; $input.val(mainUrl); $downForm.append($input); $(document.body).append($downForm); //提交表单,实现下载 $downForm.submit(); }

html

<button type="button" class="layui-btn upload-btn"><i class="layui-icon"></i>下载文件</button>

<iframe name="mangguo" style="display: none" onload="iframeFileFlag()"></iframe>

ps:代码参考了一位网友的答案;但是找不到那个界面了,感谢他

你可能感兴趣的:(文件下载,跨域,nginx)