前端下载远程文件

前端网页下载远程文件可以分为以下两种形式：

• 打开新窗口下载
• 在当前窗口直接下载

打开新窗口下载的方法：

• window.open方法(打开一个弹窗)：
  
   window.open('http://xxx/download?param=1&param2', '_blank', 'fullscreen=no,width=400,height=300')

•   创建一个隐藏form表单提交方法(打开新的标签页)：

  function downloadFile() {
      let form = document.createElement('form')
      form.setAttribute('action', 'http://xxx/download?param=1&param2')
      form.setAttribute('method', 'get')
      form.setAttribute('target', '_blank')
      form.setAttribute('style', 'display:none')
      document.body.appendChild(form);
      form.submit();
      document.body.removeChild(form)
  }

不打开新窗口的方法：

• HTML5中A标签的download属性：

  <a href="/img/skillnull.jpg" download="skillnull_logo">

  指定下载文件名为：skillnull_logo 来下载 skillnull.jpg。但是兼容性不太好，caniuse给出的兼容性：
  

 

• 服务端使用 Http Header : Content-Disposition 发送流文件
  Content-Disposition: inline
  Content-Disposition: attachment
  Content-Disposition: attachment; filename="filename.jpg"
• 使用 Ajax + FileSaver
  假如你要下载的文件URL需要服务端返回后才能请求，这时候你就要在触发方法的时候先调用获取URL的接口，
  在promise返回后才能去使用 Ajax + FileSaver 去下载文件，如：

  this.$store.dispatch('getDownloadUrlFun', params).then((result) => {
      let xhr = new XMLHttpRequest()
      xhr.open('GET', result.url)
      xhr.responseType = 'blob'
      xhr.onload = function () {
          saveAs(xhr.response, fileName + '.mp4')
      }
      xhr.send()
  }).catch((reason) => {
      // do somthing to handler the err msg.
  })

  
  前提是要先安装引用 FileSaver：
  npm install file-saver --save
  import saveAs from 'file-saver'