H5页面实现下载文件兼容移动端

H5页面实现下载文件兼容移动端

问题1：之前写的H5 blob方式下载 主要是以后台返回文件流的方式进行下载 pc端没有问题 发现有些手机不支持

移动端的下载的方式改成通过文件Url直接下载或打开 但是这种方式不太安全

方式一 iframe方式 发现有的手机图片下载不支持

function downloadHandle (url) {
  let iframe = document.getElementById('downloadIframe')
  if (iframe) {
    document.body.removeChild(iframe)
  }
  iframe = document.createElement('iframe')
  iframe.setAttribute('id', 'downloadIframe')
  iframe.style.display = 'none'
  iframe.src = "javascript: '<script>location.href=\"" + url + "\"<\/script>'"
  document.getElementsByTagName('body')[0].appendChild(iframe)
 }

方式二 from提交方式 发现有的手机图片下载是当前地址栏直接打开

function downloadHandle (url) {
  let form = document.getElementById('downloadForm')
  if (!form) {
     form = document.createElement('form')
     form.setAttribute('id', 'downloadForm')
     document.getElementsByTagName('body')[0].appendChild(form)
   }
   form.action = url
   form.submit()
 }

综合以上问题 暂时根据文件的url截取一下文件的后缀名 图片格式的我暂时用window.open方式 其他格式用以上两种方式都可以。

哪位大佬有更好的意见请多多指教！