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

时间:2025-01-15 07:36:03

思路:本章内容包括移动端(ios、isAndroid)、web端;

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

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

手动复制链接方法:

1.利用input标签和相结合

   
      const input = ('input');
      (input);
       = text;
      ();
      ('copy');
      ();
    

    安装依赖 npm install clipboard

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

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

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

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