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

需求: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: ''";
		// document.getElementsByTagName('body')[0].appendChild(iframe);

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


	},

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

后来后端介入并解决了
h5 ios Safair下载文件自动添加.html导致文件乱码问题,ios不能使用接口播放视频的问题_第1张图片
在这里插入图片描述
思路是前端判断是否在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
}

然后在调用后端指定的接口
后端的处理思路大致是 响应了 有.html尾缀的接口
成功的下载或预览了各类文件

ios不能使用接口播放视频的问题
在video 的 src 是用 /file/${id} 这样的方式访问,在安卓 手机播放没问题,在ios手机播放不出来

经过后端的处理,思路大致是,不分段传输,解决了在ios视频播放的问题

你可能感兴趣的:(前端,ios,html,safari)