解决前后端传送文件名，出现乱码问题，URLEncoder

出现???.doc,无法完成下载，后端的文件名在传输过程中，编码出现了问题。

解决，采用后端java在响应头中的里设置文件名称(URLEncoder.encode),前端vue，var fileName = decodeURIComponent(fileNameUtf8)，进行解码。

 response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode(fileName, "UTF-8") );

@GetMapping("/download/{id}")publicvoiddownload(@PathVariable("id")int id,HttpServletResponse response){String fileRealPath = submitHomeworkService.queryById(id).getFileRealPath();String fileName = submitHomeworkService.queryById(id).getFileName();File file =newFile(fileRealPath);byte[] buffer =newbyte[1024];BufferedInputStream bis =null;OutputStream os =null;try{//文件是否存在if(file.exists()){
                response.setHeader("Access-Control-Allow-Origin","*");// 允许所有//设置响应
                response.setContentType("application/octet-stream;charset=UTF-8");// 将响应头中的Content-Disposition暴露出来，不然前端获取不到
                response.setHeader("Access-Control-Expose-Headers","Content-Disposition");// 在响应头中的Content-Disposition里设置文件名称
                response.setHeader("Content-Disposition","attachment;filename="+URLEncoder.encode(fileName,"UTF-8"));//                response.setHeader("Content-Disposition", "attachment;filename=" + fileName);
                os = response.getOutputStream();
                bis =newBufferedInputStream(newFileInputStream(file));while(bis.read(buffer)!=-1){
                    os.write(buffer);}}}catch(Exception e){
            e.printStackTrace();}finally{try{if(bis !=null){
                    bis.close();}if(os !=null){
                    os.flush();
                    os.close();}}catch(IOException e){
                e.printStackTrace();}}}

saveFile(id){// window.open(url);// window.open(url, '_blank');this.$axios.get('http://localhost:8888/file/download/'+ id,{responseType:'blob'}).then((res)=>{// console.log('文件下载成功');const blob =newBlob([res.data]);// 获取文件名称, res.headers['content-disposition']:  attachment;filename=???????.docxconst fileNameUtf8 = res.headers['content-disposition'].split(";")[1].split("filename=")[1];//%E8%BD%AF%E4%BB%B6%E9%A1%B9%E7%9B%AE%E8%AE%A1%E5%88%92%E8%A1%A8.docx  解码后：软件项目计划表.docxvar fileName =decodeURIComponent(fileNameUtf8)
                    console.log("res:"+ res.headers['content-disposition'])
                    console.log("fileName:"+ fileName)//对于<a>标签，只有 Firefox 和 Chrome（内核） 支持 download 属性//IE10以上支持blob，但是依然不支持download//支持a标签download的浏览器const link = document.createElement('a');//创建a标签
                    link.download = fileName;//a标签添加属性
                    link.style.display ='none';
                    link.href =URL.createObjectURL(blob);
                    document.body.appendChild(link);
                    link.click();//执行下载URL.revokeObjectURL(link.href);//释放url
                    document.body.removeChild(link);//释放标签this.$message.success("作业下载成功！")}).catch((res)=>{this.$message.error("作业下载失败！请重试！")});}

效果图：

人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到网站:
https://www.captainai.net/shuai