JavaScript 图片下载

文件和图片的下载在后管系统中是常见功能，这里记录一些刚用的代码，方便后续使用

1，图片下载

对于图片下载，后端传给前端多为图片在数据库中的下载地址

// 附件下载

// row: 后端返回给你的图片数据，包括name和path
// new Date().getTime()：获取当前时间的时间值，用于重命名图片
// this.fileBaseUrl：服务器下载图片的根地址

previewHandle(row) {
  let url = this.fileBaseUrl + '/' + row.path
  let xhr = new XMLHttpRequest()
  xhr.open('GET', url, true)
  xhr.responseType = 'blob'
  xhr.onload = () => {
      let blob = xhr.response
      var downloadElement = document.createElement('a')
      var href = window.URL.createObjectURL(blob) // 创建下载的链接
      downloadElement.href = href
      let temporary = row.path.split('.')[1]
      downloadElement.download = row.name ? new Date().getTime() + row.name : new Date().getTime() + '.' + temporary // 下载后文件名
      document.body.appendChild(downloadElement)
      downloadElement.click() // 点击下载
      document.body.removeChild(downloadElement) // 下载完成移除元素
      window.URL.revokeObjectURL(href) // 释放掉blob对象
  }
  xhr.onerror = (e) => {
      console.log(e, 'error')
  }
  xhr.send()
},

2，附件下载

对于附件下载，后端传给前端多为文件流，也不排除后端直接给你文件地址，两者之间的差距是文件流需要用new Blob() 进行处理文件流

// 如果有服务器地址，可以直接下载

    (1), 使用window.open(path)，直接浏览器打开地址
    (2), 使用类型为download的a标签下载，href属性是文件的链接 download属性可以默认下载文件名称。
        <a href="/images/ww.exe" download="xx">下载</a>


// 如果后端传给前端的是文件流
    let dateStr = new Date().getTime()
    let pdfblob = new Blob([res.data], {type: 'application/pdf;charset=utf-8'})
    let downloadElement = document.createElement('a')
    let pdfhref = window.URL.createObjectURL(pdfblob) // 创建下载的链接
    downloadElement.href = pdfhref
    downloadElement.download = '试卷'+dateStr+'.zip' // 下载后文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 点击下载
    document.body.removeChild(downloadElement) // 下载完成移除元素
    window.URL.revokeObjectURL(pdfhref) // 释放掉blob对象

PS：各种类型的type

'ppt'        => 'application/vnd.ms-powerpoint',
'dir'        => 'application/x-director',
'js'        => 'application/x-javascript',
'swf'        => 'application/x-shockwave-flash',
'xhtml'        => 'application/xhtml+xml',
'xht'        => 'application/xhtml+xml',
'zip'        => 'application/zip',
'mid'        => 'audio/midi',
'midi'        => 'audio/midi',
'mp3'        => 'audio/mpeg',
'rm'        => 'audio/x-pn-realaudio',
'rpm'        => 'audio/x-pn-realaudio-plugin',
'wav'        => 'audio/x-wav',
'bmp'        => 'image/bmp',
'gif'        => 'image/gif',
'jpeg'        => 'image/jpeg',
'jpg'        => 'image/jpeg',
'png'        => 'image/png',
'css'        => 'text/css',
'html'        => 'text/html',
'htm'        => 'text/html',
'txt'        => 'text/plain',
'xsl'        => 'text/xml',
'xml'        => 'text/xml',
'mpeg'        => 'video/mpeg',
'mpg'        => 'video/mpeg',
'avi'        => 'video/x-msvideo',
'xlsx'       => 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'

附：下载xlsx完整的一个方法

exportPersonList() {
      // 数据请求参数
      let exportPersonListParams = {
        examId: this.dataForm.examId,
        personCode: this.dataForm.personCode,
        deptId: this.dataForm.deptId
      }
      // 获取token
      let token = this.$cookie.get('token')
      this.$http({
        url: this.$http.adornUrl(
          '/spring-processweb/xlkjExam/export'
        ),
        method: 'GET',
        headers: {
          'Content-Type': 'multipart/form-data',
          Authorization: token
        },
        // 很重要，必须加上responseType: 'blob',
        responseType: 'blob',
        params: exportPersonListParams
      }).then(({ data }) => {
        if (data) {
          var blob = new Blob([data], {
            type: 'application/vnd.openxmlformats-  officedocument.spreadsheetml.sheet;charset=utf-8'
          }) // type这里表示xlsx类型
          var downloadElement = document.createElement('a')
          var href = window.URL.createObjectURL(blob) // 创建下载的链接
          // window.open(href)
          downloadElement.href = href
          downloadElement.download = '人员列表.xlsx' // 下载后文件名
          document.body.appendChild(downloadElement)
          downloadElement.click() // 点击下载
          document.body.removeChild(downloadElement) // 下载完成移除元素
          window.URL.revokeObjectURL(href) // 释放掉blob对象
        }else {
          this.$message.error('导出失败')
        }
      })
      .catch(err => {
        this.$message.error(err.message || '导出失败')
      })
    },
    // 20230519添加：获取部门数据
    getBaseData () {
      departList().then(({ data }) => {
        if (data && data.code === 0) {
          this.departList = [data.data[0]] || []
        } else {
          this.$message.error(data.msg || '操作失败')
        }
      }).catch((err) => {
        this.$message.error(err.message)
      })
    },

记录结束，拜了个拜，迪迦。。。