问题描述：我是将我的web项目使用hbuilder打包成apk安装在手机上，然后使用下载功能的时候，跳转到报错页面，但是在pc端浏览器和手机浏览器上没有问题，报错页面如下：
其实这是因为使用a链接发送请求下载文件时，默认会有短暂跳转到空白页的行为，但是我后面使用form，以及iframe方式下载，虽然可以下载，但是我在手机上找不到文件位置，这样，软件又需要自动打开刚才下载的文件，不然用户找起来很费劲。 于是，我搜集了很多资料终于完美解决了这个问题。 思路：在下载文件，如点击a链接时，让它跳转到外部浏览器上，使用外部浏览器进行托管下载，这样，能使得下载功能达到最大人性化。 首先介绍一个api：
plus.runtime.openURL(url) //url：使用外部浏览器让用户下载的页面地址 //如http://101.40.131.45:8080/downfile/ //这个plus是Hbuilder提供的第三方插件，只有在打包的app上面才有效 //在pc端的浏览器上是不存在的，所以提供下方代码，判断当前设备类型 //检测用户当前的设备 var system = { win: false, mac: false, xll: false, ipad:false }; //检测平台 var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; //当用户的设备是win时， if(system.win){ //xxxxx }else{ //xxxxxx }下面是我使用的代码，真实项目中的：
//html标签： ///down/downProjFile/1中的1是要下载文件存在数据库中的id号 //其它字段还有文件的存储路径等，反正通过id号，我的后台就能够知道下载哪个文件 <a href="/down/downProjFile/1" fileid="1" class="downABtn btn btn-warning">下载</a> //js代码： $(".downABtn").click(function () { var system = { win: false, mac: false, xll: false, ipad:false }; //检测平台 var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Linux") == 0); system.ipad = (navigator.userAgent.match(/iPad/i) != null)?true:false; if(system.win){ return true; } const fileid = $(this).attr("fileid"); plus.runtime.openURL('https://101.210.165.250:8443/wzq-0.0.1-SNAPSHOT/down/downFilePage/' + fileid); //阻止a链接的默认行为 return false; })Java的后台代码：（根据你使用的语言进行对比即可）
@Controller @RequestMapping("/down") public class DownLoadController { //存储文件的目录 @Value("${system.filePath}") private String filePath; @Autowired private ProjFileService projFileService; //跳转到下载页面的请求，即是使用plus跳转的请求 @RequestMapping("/downFilePage/{fileId}") public String downFilePage(@PathVariable("fileId")Integer fileId, Map<String, Object> map){ map.put("fileId", fileId); return "proj/downFilePage"; } //下载文件的请求 @RequestMapping("/downProjFile/{fileId}") public void downProjFIle(@PathVariable("fileId") Integer fileId, HttpServletResponse res) throws Exception{ ProjFile projFile = projFileService.getProjFileById(fileId); String fileName = projFile.getName(); //下面的代码是通用的 res.setHeader("content-type", "application/*"); res.setContentType("application/*"); res.setHeader("Content-Disposition", "attachment; filename=" + new String(fileName.getBytes("utf-8"), "iso8859-1")); byte[] buff = new byte[1024]; BufferedInputStream bis = null; OutputStream os = null; try { os = res.getOutputStream(); //这里的 filePath + fileName 可以改成你文件存储的位置 bis = new BufferedInputStream(new FileInputStream( new File(filePath + fileName ))); int i = bis.read(buff); while (i != -1) { os.write(buff, 0, buff.length); os.flush(); i = bis.read(buff); } } catch ( IOException e ) { e.printStackTrace(); } finally { if (bis != null) { try { bis.close(); } catch (IOException e) { e.printStackTrace(); } } } } }下载页面我用的thymeleaf，做的很简单，只有一个确认下载按钮，代码如下：
<!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org"> <head> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <meta charset="UTF-8"> <title>Title</title> </head> <script th:src="@{/webjars/jquery/3.0.0/jquery.js}" type="text/javascript"></script> <link rel="stylesheet" th:href="@{/asserts/css/bootstrap.min.css}" /> <body> <center> <a th:href="@{'/down/downProjFile/' + ${fileId}}" class="btn btn-warning btn-lg" id="downABtn">确认下载</a> </center> </body> </html>页面效果：（这里的页面就是使用外部浏览器打开的） 为什么要把下载文件和转到下载页面的两个请求放到独立的Controller中，因为我项目中涉及到登录，有拦截器配置，放到独立的Controller中容易配置，打开外部浏览器即可下载，不需要用户再进行登录操作。
