使用 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 = $("<form method='get' target=\"mangguo\"'></form>");
//后台路径
$downForm.attr("action", zuulUrl + "/file/upload/url");
var $input = $("<input type='hidden'>");
$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:代码参考了一位网友的答案;但是找不到那个界面了,感谢他