钉H5微应用在IOS下载文件问题

钉钉H5微应用在IOS下载文件问题

最近做的这个项目是钉钉的H5微应用，这个项目是脱胎于PC端的HR系统项目，里面有离职请假转正等流程，在离职流程发起的时候，需要上传附件，附件是可以上传excel、word、pdf、图片的，这些文件上传之后，在PC端组件使用的是el-upload，上传之后回显出来的文件名字点击是可以下载下来的，下载下来就可以查看，但是这几个流程在移动端审批的时候，想查看或者把文件下载下来就没那么容易了。

首先是安卓

在移动端代码里面，根据后端返回的path，直接使用window.location.origin拼接上path，然后用

const url = window.location.origin + path
window.location.href = url 或者
window.open(url)

安卓端没有什么兼容性问题，这样写就直接可以跳转到默认浏览器并且询问是否下载了

然后IOS

1，上面安卓的写法在ios里面，会默认预览（预览也不是不可以，主要pdf预览文件乱码，所以就想跳转过去下载，后端就无需修改了），ios不能跳转过去下载，然后我想是不是兼容性问题，或者用a标签下载会不会就能跳转浏览器下载，然后我就在页面写上a标签，a标签上加download属性。

<a href="url" download="下载Promise.pdf">点击下载</a>
// download属性值为下载的文件的名字
// 该种方法兼容性并不好
// 只有 Firefox 和 Chrome 支持 download 属性。

故此种方法也不能解决问题

2，随后查询资料，知道下载还有其他的方法，比如，

downloadFile(url, fileName) {
  fetch(url).then(res => {
     res.blob().then(blob => {
       const a= document.createElement('a');
       const urlBlob = window.URL.createObjectURL(blob);
       a.href = urlBlob;
       a.download = fileName;
       a.click();
       window.URL.revokeObjectURL(urlBlob)
     })
  })
}
// 这种方式，在IOS和安卓都有兼容性问题，猜想可能是内置浏览器不支持
// 这种在PC端，H5模式调试，是可以下载的
// 这种方式还有其它形式

// 以form表单形式下载
function downloadFile() {
	 // 下载文件
	    // 下载文件
      var $iframe = $('