=> 此方法可以解决一些下载文件没有后缀即格式 问题
后端工具类:
/**
* 文件下载工具
* @param resp 响应对象
* @param name 文件名
* @param location 文件根地址
* @param downloadPath 文件下载地址
* @throws IOException
*/
public static void download(HttpServletResponse resp, String name, String location, String downloadPath) throws IOException {
location = location.replace("\\","/");
String newPath = downloadPath.replace(Constant.NGINX_ADDRESS, location);
newPath = URLDecoder.decode(newPath, "UTF-8");
File file = new File(newPath);
if (file.exists()){
System.out.println("文件是真实存在的.....");
}
String before = name.substring(0,name.lastIndexOf("."));
String last = name.substring(name.lastIndexOf("."));
name = new String(before.getBytes("UTF-8"), "ISO-8859-1") + last;
resp.reset();
resp.setContentType("application/octet-stream");
resp.setCharacterEncoding("utf-8");
resp.setHeader("Content-Disposition", "attachment;filename=" + name);
byte[] buff = new byte[1024];
BufferedInputStream bis = null;
OutputStream os = null;
try {
os = resp.getOutputStream();
bis = new BufferedInputStream(new FileInputStream(file));
int i = 0;
while ((i = bis.read(buff)) != -1) {
os.write(buff, 0, i);
os.flush();
}
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
if (bis!=null){
bis.close();
}
} catch (IOException e) {
e.printStackTrace();
}
}
}
前端axios api方法(此处使用了框架统一封装的请求对象):
export function downloadFile (params) {
return request({
url: `${baseMMSUri}/tec/download`,
responseType: 'blob',
method: 'post',
params: params
})
}
此处是element-ui组件的图片下载:
<!-- 图片上传Start-->
<el-upload action=""
ref="uploadImage"
:multiple="true"
:http-request="uploadImg"
list-type="picture-card"
accept="image/png,image/jpg,image/jpeg"
:on-preview="handlePictureCardPreview"
:file-list="reviewList"
:auto-upload="false"
:on-remove="onRemove"
:before-remove="beforeRemove">
<i class="el-icon-plus"></i>
<div slot="file"
slot-scope="{file}">
<el-image class="el-upload-list__item-thumbnail"
:src="file.url"
:alt="file.name">
</el-image>
<span class="el-upload-list__item-actions">
<span class="el-upload-list__item-preview"
@click="handlePictureCardPreview(file)">
<i class="el-icon-zoom-in"></i>
</span>
<span v-if="!imgdisabled"
class="el-upload-list__item-delete"
@click="handleDownload(file)">
<i class="el-icon-download"
v-show="file.status=='success'? true:false"></i>
</span>
<span v-if="!imgredisabled"
class="el-upload-list__item-delete"
@click="beforeRemove(file)">
<i class="el-icon-delete"></i>
</span>
</span>
</div>
</el-upload>
</el-dialog>
<!-- 图片上传End-->
相关下载方法:
handleDownload (file) {
var params = {
'name': file.name,
'url': file.url
}
api.downloadFile(params)
.then(res => {
let blob = new Blob([res], {
type: 'application/octet-stream;charset=utf-8'
})
// let objectUrl = URL.createObjectURL(blob);
// window.location.href = objectUrl;
const elink = document.createElement('a')
elink.download = file.name
elink.style.display = 'none'
elink.href = URL.createObjectURL(blob)
document.body.appendChild(elink)
elink.click()
URL.revokeObjectURL(elink.href) // 释放URL 对象
document.body.removeChild(elink)
this.$message.success('已成功下载')
})
},
PS: 注意!此处的res相应对象是已经经过拦截处理的,是直接数据,没有经过处理的,需要加res.data.data或者res.data具体看你数据在哪一层!