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

2024-05-26 08:43| 来源: 网络整理| 查看: 265

钉钉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属性。

点击下载 // 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 = $('') var $form = $('') $form.attr('action', localUrl) // 设置get的url地址 // 设置请求的参数 $form.append('') $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；寻找答案

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

解决方法

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

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

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

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

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

在这里插入图片描述

【本文地址】

公司简介

联系我们