Newer
Older
smart-metering-front / src / utils / download.ts
/**
 * 下载本地图片 href为 127.0.0.1/xxxx
 * @param href 图片地址
 * @param name 图片名称
 */
function downloadImg(href: string, name: string) {
  const eleLink = document.createElement('a')
  eleLink.download = name
  eleLink.href = href
  eleLink.click()
  eleLink.remove()
}

/**
 * 下载文件
 * @param file 文件对象
 * @param name 图片名称
 */
export function downloadFile(file: File, name: string) {
  // console.log(new Blob([file]), 'new Blob([file])')
  const objectUrl = URL.createObjectURL(new Blob([file]))
  const link = document.createElement('a')
  link.download = name
  link.href = objectUrl
  link.click()
  link.remove()
  window.URL.revokeObjectURL(link.href)
}
// 各种文件类型的type
export const fileType: { [key: string]: string } = {
  pdf: 'application/pdf',
  doc: 'application/doc',
  docx: 'application/docx',
  excel: 'application/excel',
  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',
  movie: 'video/x-sgi-movie',
}
/**
 * 将网络文件地址转化为文件对象
 * @param url 文件地址
 * @param fileName 文件名称
 */
export function getFileFromUrl(url: string, fileName: string) {
  return new Promise((resolve, reject) => {
    var blob = null
    var xhr = new XMLHttpRequest()
    xhr.open('GET', url)
    const urlFileType = url.split('.')[url.split('.').length - 1]
    xhr.setRequestHeader('Accept', fileType[urlFileType])
    xhr.responseType = 'blob'
    // 加载时处理
    xhr.onload = () => {
      // 获取返回结果
      blob = xhr.response
      const file = new File([blob], fileName, { type: fileType[urlFileType] })
      // 返回结果
      resolve(file)
    }
    xhr.onerror = (e) => {
      reject(e)
    }
    // 发送
    xhr.send()
  })
}
/**
 * 将网络地址转化为 blob地址 并下载
 * @param url 文件地址
 * @param fileName 文件名称
 */
export function urlToBlob(url: string, name: string) {
  const xhr = new XMLHttpRequest()
  xhr.open('get', url)
  xhr.responseType = 'blob' // ""|"text"-字符串 "blob"-Blob对象 "arraybuffer"-ArrayBuffer对象
  xhr.onload = function () {
    const path = URL.createObjectURL(xhr.response)
    const link = document.createElement('a')
    link.download = name
    link.href = path
    link.click()
    link.remove()
    window.URL.revokeObjectURL(link.href)
  }
  xhr.send()
}

/**
 * 下载文件 各种文件
 * @param url 网络文件地址
 * @param name  文件名
 */
export function download(url: string, name: string) {
  // 下载图片
  const photo = ['jpg', 'jpeg', 'png']
  const fileType = url.split('.')[url.split('.').length - 1]
  console.log(fileType, 'fileType文件类型')
  if (photo.includes(fileType)) {
    // 图片 将服务器图片地址转化成本地地址
    const image = new Image()
    image.setAttribute('crossOrigin', 'anonymous')
    image.src = url
    image.onload = () => {
      const canvas = document.createElement('canvas')
      canvas.width = image.width
      canvas.height = image.height
      const ctx = canvas.getContext('2d');
      (ctx as CanvasRenderingContext2D).drawImage(image, 0, 0, image.width, image.height)
      canvas.toBlob((blob) => {
        const url = URL.createObjectURL(blob as Blob)
        downloadImg(url, name)
        // 用完释放URL对象
        URL.revokeObjectURL(url)
      })
    }
  }
  else {
    // 预览一般都是用的a标签,文件下载用的window.open
    // 1.pdf文件路径放到window.open里面,点击是进行在线预览
    // 2.word文件和excel文件通过a标签打开时,是直接下载了
    // 将网络地址转化为 blob地址 并下载
    urlToBlob(url, name)
  }
}

// 将二进制流转为base64
export function getBase64(data) {
  const blob = new Blob([data], { type: 'image/jpg' })
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(blob)
    reader.onload = () => resolve(reader.result)
    reader.onerror = error => reject(error)
  })
}