前端实现下载、导出_js创建a标签下载文件

• js创建a标签实现下载url 

// js创建a标签实现下载
export const downloadUtils = (url) => {
  if (!url) {
    return ElMessage.info({
      message: '无可下载文件',
      type: 'info'
    })
  }
  console.log('下载')
  let a = document.createElement('a')
  let event = new MouseEvent('click')
  a.download = ''
  a.href = url
  a.dispatchEvent(event)
  ElMessage.success({
    message: '下载成功',
    type: 'success'
  })
}

• js 根据url 下载图片

// 下载图片地址和图片名
export const downloadIamge = (imgsrc, name) => {
  let image = new Image()
  // 解决跨域 Canvas 污染问题
  image.setAttribute('crossOrigin', 'anonymous')
  image.onload = function () {
    let canvas = document.createElement('canvas')
    canvas.width = image.width
    canvas.height = image.height
    let context = canvas.getContext('2d')
    context.drawImage(image, 0, 0, image.width, image.height)
    let url = canvas.toDataURL('image/png') // 得到图片的base64编码数据
    let a = document.createElement('a') // 生成一个a元素
    let event = new MouseEvent('click') // 创建一个单击事件
    a.download = name || 'photo' // 设置图片名称
    a.href = url // 将生成的URL设置为a.href属性
    a.dispatchEvent(event) // 触发a的单击事件
  }
  image.src = imgsrc
}

• 后端返回二进制流文件下载

/**
 * 导出数据（兼容ie浏览器）
 * @param {string, string} fileName
 */
export function exportSearchList (dowLoadFileName, result) {
  const blob = new Blob([result])
  const fileName = dowLoadFileName + '.xls'
  // 判断浏览器
  var brower = ''
  if (navigator.userAgent.indexOf('Edge') > -1) {
    brower = 'Edge'
  }
  if ('download' in document.createElement('a')) {
    // 非IE下载
    if (brower === 'Edge') {
      navigator.msSaveBlob(blob, fileName)
      return
    }
    const elink = document.createElement('a')
    elink.download = fileName
    elink.style.display = 'none'
    elink.href = URL.createObjectURL(blob)
    document.body.appendChild(elink)
    elink.click()
    URL.revokeObjectURL(elink.href)
    // 释放URL 对象
    document.body.removeChild(elink)
  } else {
    // IE10+下载
    navigator.msSaveBlob(blob, fileName)
  }
}

• 前端导出excel文件并下载

import XLSX from 'xlsx'
 
/**
 * 前端导出数据
 * @param {Array, Array, String}
 */
 
export function outputFile (data, header, name) {
  const ws = XLSX.utils.json_to_sheet(data, header)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, name)
  XLSX.writeFile(wb, name + '.xlsx')
}
// 提取相对应字段的数据
export function formatJson (filterVal, jsonData) {
  return jsonData.map(v => filterVal.map(j => v[j]))
}
 
/**
 * 前端导出数据
 * @param {Array Array, Array, String}
 * 与上面的区别是直接用抽离table组件的入参拿到header和filterVal 不需要导出方法里拼对象
 */
export function exportExcel (data, filterVal, header, name) {
  const list = formatJson(filterVal, data)
  list.unshift(header)
  const ws = XLSX.utils.aoa_to_sheet(list)
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, ws, name)
  XLSX.writeFile(wb, `${name}.xlsx`)
}

// 导出
const handleExport = async () => {
  let { pageNum, pageSize, startTime, endTime, operateType, companyAccountId } = orderParam
  let params = {
    pageNum,
    pageSize,
    startTime,
    endTime,
    operateType,
    companyAccountId,
    queryAll: true
  }
  let { code, message, result } = await queryFirstCompanyAccountLog(params)
  if (code !== 200) return proxy.$message({ message, type: 'info' })
  if (!result || result.length === 0) return proxy.$message({ message: '无可导出的数据', type: 'info' })
  const header = ['交易时间', '公司编码', '公司简称', '公司全称', '能源账户类型', '收支金额', '账户总余额', '交易类型', '订单号', '备注', '签约主体']
  const newData = []
  result.forEach(item => {
    newData.push({
      交易时间: item.createTime,
      公司编码: item.gasId,
      公司简称: item.companyName,
      公司全称: item.companyAllName,
      能源账户类型: item.energyTypeDesc,
      收支金额: item.amount,
      账户总余额: item.balanceAmount,
      交易类型: item.operateTypeDesc,
      订单号: item.outOrderId,
      备注: item.remark,
      签约主体: item.signingBodyDesc
    })
  })
  outputFile(newData, header, `账户明细-${getLocalTime(new Date().getTime())}`)
}