a标签下载文件,文档流 xls,xlsx,doc,docx,pdf

4,891 阅读1分钟

通过a标签下载文件

  1. 项目中需要下载后台execl文件,通过接口下载,使用js文档流
  2. 创建单独js文件,局部引入使用
export function $_downloadFile(obj, name, suffix) {
  const DOWNLOAD_TYPE_MAP = {
    xls: 'application/vnd.ms-excel',
    xlsx: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    doc: 'application/msword',
    docx: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    pdf: 'application/pdf'
  }
  if (!DOWNLOAD_TYPE_MAP[suffix]) {
    throw new Error('请传入文件下载的格式后缀,eg:xls,xlsx,doc,docx,pdf')
  }
  const blob = new Blob([obj], {
    type: DOWNLOAD_TYPE_MAP[suffix]
  })
  const fileName = `${name}.${suffix}`
  let link = document.createElement('a')
  document.body.appendChild(link)
  link.href = URL.createObjectURL(blob)
  link.setAttribute('download', fileName)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(link.href) // 销毁url对象
}

3.使用

//接口
export function exportExcel(data) {
  return request({
    url: '/item/exportExcel',
    method: 'get',
    responseType: 'blob', //一定要加,不然无效
    params: { ...data }
  })
}

//用法
import { $_downloadFile } from '@/utils/download'
//接口中使用
exportExcel(queryData)
   .then(res => {
    $_downloadFile(res, '导出文件名', 'xlsx')  //res:返回数据
   })
  .catch(() => {})

真实有效可以使用特此记录!!!