最近做的这个项目是钉钉的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)
安卓端没有什么兼容性问题，这样写就直接可以跳转到默认浏览器并且询问是否下载了
然后IOS1，上面安卓的写法在html" class="superseo">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 = $('')
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预览就不会乱码了
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）