文件下载

1.将二进制流转换为下载至浏览器,

/**
 * 将二进制流转换为下载至浏览器,
 * @param {Blob} blob blob对象
 * @param {String} fileName 文件名称
 */
export function convertRes2Blob(blob, fileName) {
  const mBlob = new Blob([blob])
  const name = fileName
  if ('download' in document.createElement('a')) {
    const elink = document.createElement('a')
    elink.download = name
    elink.style.display = 'none'
    elink.href = URL.createObjectURL(mBlob)
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href)
  } else {
    window.navigator.msSaveBlob(mBlob, name)
  }
}

2.创建a链接下载

/**
 * 创建a链接下载
 * @param {String} url 下载地址
 */
export function createAlinkDownload(url) {
  if (url) {
    let a = document.createElement('a')
    a.target ='_blank'
    a.href = url
    a.click()
  }
}

3. 通过iframe下载，下载图片和txt有可能会有问题

/**
 * 通过iframe下载，下载图片和txt有可能会有问题
 * @param {*} url 
 */
export function createIframeDownload(url) {
  const iframe = document.createElement('iframe')
  iframe.style.display = 'none'
  function iframeLoad() {
    console.log('下载')
    const win = iframe.contentWindow
    const doc = win.document
    if (win.location.href === url) {
      if (doc.body.childNodes.length > 0) {
        console.log('失败')
        window.alert('文件下载失败！')
      }
      iframe.parentNode.removeChild(iframe)
    }
  }
  if ('onload' in iframe) {
    iframe.onload = iframeLoad
  } else if (iframe.attachEvent) {
    iframe.attachEvent('onload', iframeLoad)
  } else {
    iframe.onreadystatechange = function onreadystatechange() {
      if (iframe.readyState === 'complete') {
        iframeLoad
      }
    }
  }
  iframe.src = ''
  document.body.appendChild(iframe)

  setTimeout(function loadUrl() {
    try {
      iframe.contentWindow.location.href = url
    } catch(e) {
      console.log('下载错误', e)
    }
  }, 50)
}

文件类型： responseType: "arraybuffer"

文件预览

1.通过iframe打开，vu中可以设置key值进行刷新页面

    <iframe
        v-if="fileObj.fileUrl"
        :src="`/ruralhomestead/comm/public/downFileByPath?macroPath=${encodeURI(
          fileObj.fileUrl
        )}&fileName=${fileObj.fileName}&value=2`"
        frameborder="0"
        :key="fileObj.fileUrl"
        class="file-preview"
      ></iframe>

2.直接使用window.open打开服务器上的文件

文件打印

1.打印截图

     setTimeout(() => {
        let opts = {
          tainttest: true, // 检测每张图片都已经加载完成
          useCORS: true, // 跨域处理，可以加载网络图片
          logging: true, // 日志开关
          allowTaint: true,
          height: that.$refs.pdfDom.scrollHeight,
        };
        html2Canvas(that.$refs.pdfDom, opts).then((canvas) => {
          that.preimg = canvas.toDataURL("png"); // 获取生成的图片的url
        });
      }, 500);
      
 // 预览打印
    printdata() {
      let newstr = document.getElementById("preimg").innerHTML;
      setTimeout(() => {
        document.getElementById("printbox").innerHTML = newstr;
        window.print();
      }, 500);
    },