js移动端下载复制剪切板

js移动端复制剪切板，实际操作后发现，其实是有兼容性问题要处理的，兼容性问题很麻烦，所以记录下当时做的时候采用的方法;

单纯h5移动端下载(IOS是无法直接下载文件的，已知的ppt、word、pdf会直接预览)

/*一下方法只适用于安卓*/
// 直接方法
window.open();
// form方式: 确定无法重命名文件
 var form = document.createElement('form');
 form.action = url;
 form.method = 'GET';
 document.body.appendChild(form);
 form.submit();
 document.body.removeChild(form);
// a标签形式
aDownlad(url, fileName) {
  const link = document.createElement('a');
	link.href = url;
	link.target = '_blank';
	link.download = fileName;
	link.style.display = 'none';
	document.body.append(link);
	link.click();
	document.body.removeChild(link);
}
// iframe方法1
iframeMethodOne(url) { // 缺点会无限创建iframe，无法重命名文件
    let myFrame = document.createElement('iframe');
    myFrame.src = url;
    myFrame.style.display = 'none';
    document.body.appendChild(myFrame);
    window.open(fileUrl);
}
//iframe方法2
iframeMethodTwo(url) {
   var iframe = document.createElement('iframe');
   iframe.style.display = 'none';
   /* eslint-disable */
   iframe.src =  "javascript: '<script>location.href=\"" + url + "\"<\/script>'";
   document.getElementsByTagName('body')[0].appendChild(iframe);
}

复制剪切板兼容IOS

copyTxt (txt) {
  var u = navigator.userAgent
  var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1
  // 要先判断当前是什么系统，否则会报错，无法执行语句
  if (isAndroid) {
    let _input = document.createElement('input')// 直接构建input
    _input.value = txt// 设置内容
    document.body.appendChild(_input)// 添加临时实例
    _input.select()// 选择实例内容
    document.execCommand('Copy')// 执行复制
    document.body.removeChild(_input)// 删除临时实例
    if (document.execCommand('Copy')) {
      // Toast('复制成功')
    } else {
      // Toast('复制失败，请手动复制')
    }
  } else {
    // 数字没有 .length 不能执行selectText 需要转化成字符串
    const textString = txt.toString()
    let input = document.querySelector('#copy-input')
    if (!input) {
      input = document.createElement('input')
      input.id = 'copy-input'
      input.readOnly = 'readOnly'
      input.style.position = 'absolute'
      input.style.left = '-1000px'
      input.style.zIndex = '-1000'
      document.body.appendChild(input)
    }
    input.value = textString
    // ios必须先选中文字且不支持 input.select()
    this.selectText(input, 0, textString.length)
    console.log(document.execCommand('copy'), 'execCommand')
    if (document.execCommand('copy')) {
      document.execCommand('copy')
      Toast('复制成功')
    } else {
      Toast('复制失败，请手动输入')
    }
    input.blur()
    document.body.removeChild(input)
    // input自带的select()方法在苹果端无法进行选择，所以需要自己去写一个类似的方法
    // 选择文本。createTextRange(setSelectionRange)是input方法
  }
},
  // 复制到剪切板
  selectText (textbox, startIndex, stopIndex) {
    if (textbox.createTextRange) { // ie
      const range = textbox.createTextRange()
      range.collapse(true)
      range.moveStart('character', startIndex)// 起始光标
      range.moveEnd('character', stopIndex - startIndex)// 结束光标
      range.select() // 不兼容苹果
    } else { // firefox/chrome
      textbox.setSelectionRange(startIndex, stopIndex)
      textbox.focus()
    }
  }