移动端H5文件下载（ios、isAndroid)

最新推荐文章于 2024-06-05 22:22:59 发布

子桑言洛

最新推荐文章于 2024-06-05 22:22:59 发布

阅读量1w

点赞数 3

分类专栏： javascript 文章标签： vue.js html git

本文链接：https://blog.csdn.net/weixin_42489478/article/details/121553887

版权

javascript 专栏收录该内容

11 篇文章 2 订阅

订阅专栏

思路：本章内容包括移动端（ios、isAndroid）、web端；

移动端必须需要后台返回http文件路径，isAndroid可以直接跳转浏览器下载，ios需要用户手动复制链接，然后去浏览器下载，web端文件不管是流还是http路径都可以下载

    const u = navigator.userAgent;
      const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
      const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); // ios终端
      if (isAndroid) {
        // 安卓终端使用iframe
        window.open(item.url);
      } else if (isiOS) {
        Dialog.alert({
          title: '请复制链接至浏览器下载',
          message: item.url,
          confirmButtonText: '复制',
        }).then(() => {
          clipBoard(item.url);
        });
      } else {
     1.如果是地址
     window.open(item.url);
     2.如果是文件流
     // 浏览器
     const aEle = document.createElement('a');
        aEle.href = window.URL.createObjectURL(blob);
        if (!filename) {
          // 没传文件名，就用后台的filename， 后台也没有传就。。。。
          filename = res.headers['content-disposition'].split('filename=')[1];
          filename = decodeURIComponent(filename || '');
        }
        aEle.download = filename;
        aEle.click();
        window.URL.revokeObjectURL(aEle.href);
  }

手动复制链接方法：

1.利用input标签和document.execCommand相结合

   
      const input = document.createElement('input');
      document.body.appendChild(input);
      input.value = text;
      input.select();
      document.execCommand('copy');
      input.remove();

2.Clipboard

    安装依赖 npm install clipboard

    // 在要使用的组件里引入

    import Clipboard from 'clipboard' // 复制功能

    <div @click="linkTap($event,link)">复制链接</div>

    // 复制链接
    linkTap(e, text) {
      const clipboard = new Clipboard(e.target, { text: () => text })
      clipboard.on('success', e => {
        Toast('复制成功')
      })
      clipboard.onClick(e)
    },