Bootstrap

vue3 + ts 导出excel

在网上查到的

安装依赖

npm install --save xlsx file-saver
npm install -D script-loader
如果使用了ts,安装TypeScript定义:  npm install @types/file-saver --save-dev

封装api

import request from '/@/utils/request'
import { AxiosResponse } from 'axios'
const api = {
    upLoadFile: '/xxxxx/upLoadFile'
}
export interface upLoadFileParam {
    multipartFile: any,
}
export function upLoadFile(param: upLoadFileParam):Promise<AxiosResponse<IResponse<string>>> {
    return request({
        url: api.upLoadFile,
        method: 'post',
        data: param
    })
}

导出封装

// 文件导出
export const ExportFile = (data: any, name: any) => {
    let fileName = name + formatDate(new Date(),'date') // 导出名字+当前日期
    let blob = new Blob([data], { type: "application/vnd.ms-excel" }) // 转成blob格式
    let link = document.createElement("a")
    link.download = fileName
    link.href = URL.createObjectURL(blob)
    link.style.display = "none"
    document.body.appendChild(link)
    link.click()
    URL.revokeObjectURL(link.href)
    document.body.removeChild(link)
    return
}

页面使用

import { fileExport } from '/@/api/all'
import { ExportFile } from '/@/utils/all'
 
const handExport = async() => {
    const getData:any = await fileExport('/management/user/export', {})
    ExportFile(getData,'xx列表')
}

;