前端使用Blob实现文件下载

问题来源：在项目中通常会有查询列表的功能，然后把通过筛选条件查出来的数据导入来，通常是导出excel表格这种格式
说人话：导出excel你咋实现？

人话有时候也不太容易理解？中。可以。没问题！直接上图

导出下面红色框中的一坨列表你咋实现

/**
 * 下载blob文件
 * @param {*} blob 文件
 * @param {*} fileName 文件名
 */
const downloadBlob = (blob, fileName) => {
  const alink = document.createElement('a')
  alink.download = fileName
  alink.style.display = 'none'
  alink.href = URL.createObjectURL(blob) // 这里是将文件流转化为一个文件地址
  document.body.appendChild(alink)
  alink.click()
  URL.revokeObjectURL(alink.href) // 释放URL 对象
  document.body.removeChild(alink)
}



  exportResult(params) {
      let query = Object.assign({}, params)
      if (this.page.count <= 0) {
        return this.$message('列表数据为空，无法导出。')
      }
      if (JSON.stringify(query) === '{}') {
        return this.$message('未选择筛选条件，无法导出！');
      }
      this.loadingDown = true
      this.$api['xg-productListExcel'](query).then(res => {
        console.log(res)
        let blob = new Blob([res])
        let fileName = '商品列表-' + dateFormat(Date.now(), 'yyyymmdd') + '.xlsx'
        this.$util.downloadBlob(blob, fileName)
        this.loadingDown = false
        this.$message.success('商品列表导出成功');
      }).catch(() => {
        this.loadingDown = false
        this.$message.error('商品列表导出失败，请稍后重试。');
      })
    },