h5 ios Safair下载文件自动添加.html导致文件乱码问题，ios不能使用接口播放视频的问题

但是在ios的Safair 下载时会被自动添加html尾缀，导致下载后是乱码的不能使用的文件。经过后端的处理，思路大致是，不分段传输，解决了在ios视频播放的问题。这样的方式访问，在安卓手机播放没问题，在ios手机播放不出来。在安卓手机和 ios上的uc浏览器是可以正常的下载或者预览的。思路是前端判断是否在ios的Safair 的浏览器上。后端的处理思路大致是响应了有.html尾缀的接口

wulijuan888666

1558人浏览 · 2022-09-01 10:21:59

wulijuan888666 · 2022-09-01 10:21:59 发布

需求：h5 页面下载pdf，doc,docx，xlsx,xls 文件的功能
在安卓手机和 ios上的uc浏览器是可以正常的下载或者预览的
但是在ios的Safair 下载时会被自动添加html尾缀，导致下载后是乱码的不能使用的文件

前端尝试了不用的下载方式的代码


// 下载文件
	download (url) {
		
		var $a = document.createElement('a');
		$a.setAttribute("href", url);
		$a.setAttribute("download", "");
		var evObj = document.createEvent('MouseEvents');
		evObj.initMouseEvent('click', true, true, document.defaultView, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
		$a.dispatchEvent(evObj);

		
		// var src = url
		// var iframe = document.createElement('iframe'); iframe.style.display = 'none';
		// iframe.src = "javascript: '<script>location.href=\"" + src + "\"</script>'";
		// document.getElementsByTagName('body')[0].appendChild(iframe);

		
		//window.open(url, '_blank')


	},

仍然没有解决这个棘手的问题

后来后端介入并解决了
在这里插入图片描述

思路是前端判断是否在ios的Safair 的浏览器上

//判断是否Safari浏览器
let is_Safari = false
var ua = navigator.userAgent.toLowerCase();
//判断是不是在iPhone的Safair浏览器打开的本页面
if (ua.indexOf('applewebkit') > -1 && ua.indexOf('mobile') > -1 && ua.indexOf('safari') > -1 &&
  ua.indexOf('linux') === -1 && ua.indexOf('android') === -1 && ua.indexOf('chrome') === -1 &&
  ua.indexOf('ios') === -1 && ua.indexOf('browser') === -1) {
  // document.write("【是 Safari】");
  is_Safari = true
}