轻应用中下载功能实现

259 阅读1分钟

概述:轻应用中将h5页面嵌入到原生app中,区分安卓和ios,安卓可以直接使用功能a标签进行下载,ios无法下载,目前的解决方式是弹框,提示复制到浏览器下载。

1.下载

//下载
export function download(url, fileName) {

  if (!url) {
    Toast.fail('无效下载地址')
    return
  }
  //如果是ios,就弹框,复制链接,提示复制到浏览器下载。

  if (isAndroidOrIOS() === 'ios') {
    Dialog.confirm({
      title: '请复制链接到浏览器进行下载',
      confirmButtonText: '复制',
      message: fileName,
    })
      .then(() => {
        // on confirm

        copyArticle(url)
      })
      .catch(() => {
        // on cancel
      })
    return
  }
  //不是ios直接使用功能a标签下载。
  const link = document.createElement('a')
  link.href = url
  link.target = '_blank'
  //设置文件名,需要同源下载才生效。
  link.download = fileName
  link.style.display = 'none'
  document.body.append(link)
  link.click()
}

2.苹果上进行快捷复制功能。

使用原生的document.execCommand('copy')方法复制当前选中的内容
export function copyArticle(content) {
  const input = document.createElement('input')
  input.setAttribute('readonly', 'readonly')
  input.setAttribute('value', content)
  document.body.appendChild(input)
  input.setSelectionRange(0, 9999)
  input.select()
  if (document.execCommand('copy')) {
    document.execCommand('copy')
    Toast('复制成功')
  }
  document.body.removeChild(input)

}