钉钉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)
1
2
3

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

然后IOS

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

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

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

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 = $('<iframe />')
      var $form = $('<form  method="get" target="_self"/>')
      $form.attr('action', localUrl) // 设置get的url地址
      // 设置请求的参数
      $form.append('<input type="hidden"  name="' + 'attachmentId' + '" value="' + attachmentId + '" />')
      $iframe.append($form)
      $(document.body).append($iframe)
      $form[0].submit()// 提交表单
      $iframe.remove()// 移除框架
}
// form表单下载没有在真机调试
// 在chrome浏览器手机模拟器测试，是可以下载下来文件的

// 手动的使用dispatchEvent()方法派发事件。
function downloadFile() { 
	 let a = document.createElement('a')
      a.href = localUrl
      a.download = (title || '文件') + '.xlsx'
      a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}))
}
// 这种方法没有在真机调试
// 在chrome浏览器手机模拟器测试，是可以下载下来文件的
// bubble（布尔值）：是否冒泡；cancelable（布尔值）：是否可取消；view（AbstractView）：与事件关联的视图，一般为document.defaultView；
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

寻找答案

后面查询资料和咨询大佬，知道了IOS是不支持文件下载的，因为IOS对单个应用做了限制，下载跳转到浏览器的行为是不支持的，单个应用内的操作就局限在单个应用内。所以各种下载方式想在IOS上下载是不行的。那我就只能从IOSpdf预览乱码着手了。

解决方法

有可能是IOS直接打开文件，解析文件格式不对出现乱码。

`${window.location.origin}${url}/file?attachmentId=1813`
// 获取文件地址的后端接口
response.setContentType("application/octet-stream");
//原本后端文件请求的接口格式可能是二进制的，会不会出现格式不兼容，没有把pdf渲染成pdf文件
1
2
3
4

这个时候，请求后端的帮助，帮忙加个接口，判断pdf文件，如果是pdf文件

response.setContentType("application/pdf");
// 设置response为PDF格式
`${window.location.origin}${url}/file/dingdingIOS?attachmentId=1813`
// 新加dingdingIOS单独接口，用来单独渲染ios 的 PDF预览乱码问题
1
2
3
4

这样处理之后，IOS预览就不会乱码了