前端实现将表格直接导出excel及表格数据导出

1.安装并引用excle库

// 安装
npm install -S file-saver xlsx
// 引用
import FileSaver from 'file-saver'
import XLSX from 'xlsx'

2.利用表格dom导出

/**
 * @description: 表格dom导出excel
 * @param {String} dom  表格ref名称
 * @param {String} title 表格名称
 */

exportTableDom2Excel(dom, title = '导出表格') {
  if (!this.$refs[dom]) {
    console.log('dom未加载')
    return
  }
  let xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
  let wb = XLSX.utils.table_to_book(this.$refs[dom].$el, xlsxParam)
  /* get binary string as output */
  let wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
  try {
    FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), `${title}.xlsx`)
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout)
  }
  return wbout
}

3.利用表格数据导出

/**
 * @description: json数据导出excel
 * @param {Arrasy} data  表格数据  数据样例：[{ A:"S", B:"h", C:"e", D:"e", E:"t", F:"J", G:"S" },...]
 * @param {Array} header 表头数据  数据样例：["A","B","C","D","E","F","G"]
 * @param {String} title 导出名称
 */
exportTableJson2Excel(data, header, title = '导出表格') {
      const ws = XLSX.utils.json_to_sheet(data, { header })
      const wb = XLSX.utils.book_new()
      XLSX.utils.book_append_sheet(wb, ws, 'sheet1') // sheet1为表格内页签名
      XLSX.writeFile(wb, `${title}.xlsx`)
    }

4.图片导出

// 安装html2canvas
npm install -S html2canvas xlsx
// 引用
import html2canvas from 'html2canvas'
// 调用方法
/**
 * @description: 导出图片
 * @param {*} chartdom
 * @param {*} title
 */
exportImg(chartdom, title = '导出图片') {
  if (!this.$refs[chartdom]) {
    console.log('dom未加载')
    return
  }
  window.pageYoffset = 0
  document.documentElement.scrollTop = 0
  document.body.scrollTop = 0
  // 先获取你要转换为img的dom节点
  const dom = this.$refs[chartdom].$el //传入的class
  const width = dom.offsetWidth //dom宽
  const height = dom.offsetHeight //dom高
  const scale = 2 //放大倍数 这个相当于清晰度 调大一点更清晰一点
  html2canvas(dom, {
    width: width,
    heigth: height,
    backgroundColor: '#ffffff', //背景颜色 为null是透明
    dpi: window.devicePixelRatio * 2, //按屏幕像素比增加像素
    scale: scale,
    X: 0,
    Y: 0,
    scrollX: -3, //如果左边多个白边 设置该偏移-3 或者更多
    scrollY: 0,
    useCORS: true, //是否使用CORS从服务器加载图像 !!!
    allowTaint: true //是否允许跨域图像污染画布  !!!
  }).then(canvas => {
    const url = canvas.toDataURL() //这里上面不设值cors会报错
    const a = document.createElement('a') //创建一个a标签 用来下载
    a.download = `${title}.png` //设置下载的图片名称
    const event = new MouseEvent('click') //增加一个点击事件
    a.href = url //此处的url为base64格式的图片资源
    a.dispatchEvent(event) //触发a的单击事件 即可完成下载
  })
}