vue中导出excel

后端返回的是blob数据

//导出Excel
          //请求
			export function excelcash(data) {
			  return request({
			    url: '地址',
			    method: '请求',
			    data: 数据,
			    responseType: 'blob'
			  })
			}
          //方法
            handleExportExcel(){
                //console.log("导出数据");
                //list是导出表格的数据
                excelcash({list:this.tableData}).then(res=>{
                    console.log(res.data,'pp')
                    const blob = res.data
                    const link = document.createElement('a')
                    link.href = URL.createObjectURL(blob)
                    link.download = "excel.xls"
                    document.body.appendChild(link)
                    link.click()
                    window.setTimeout(function() {
                    URL.revokeObjectURL(blob)
                    document.body.removeChild(link)
                    }, 0)
                })
                }

如果后端返回base64,需要先转换成blob
下一个base64依赖

import {Base64} from 'js-base64'
const base = (base64data = '', fileName = '', contentType = '', sliceSize = 512) => {
  let byteCharacters = Base64.atob(base64data)
  let byteArrays = [];
  for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
    let slice = byteCharacters.slice(offset, offset + sliceSize);
    let byteNumbers = [];
    for (let i = 0; i < slice.length; i++) {
      byteNumbers.push(slice.charCodeAt(i));
    }
    // 8 位无符号整数值的类型化数组。内容将初始化为 0。
    // 如果无法分配请求数目的字节,则将引发异常。
    byteArrays.push(new Uint8Array(byteNumbers));
  }
  let result = new Blob(byteArrays, {
    type: contentType
  })
  result = Object.assign(result,{
    // 这里一定要处理一下 URL.createObjectURL
    preview: URL.createObjectURL(result),
    name: fileName
  });
  console.log(result)
  const link = document.createElement('a')
  const body = document.querySelector('body')
  link.href = URL.createObjectURL(result)
  link.download = 'xxx.xls'

  // fix Firefox
  link.style.display = 'none'
  body.appendChild(link)

  link.click()
  body.removeChild(link)

} 
export default base

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值