首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3前端导出excel

vue3前端导出excel表格的两种实现方法

2024-11-26 10:15:01 作者：可爱的秋秋啊

这篇文章主要给大家介绍了关于vue3前端导出excel表格的两种实现方法,文中通过代码以及图文介绍的非常详细,对大家学习或者使用vue3具有一定的参考借鉴价值,需要的朋友可以参考下

1、前端直接导出excel

xlsx安装

npm install --save xlsx file-saver

xlsx引入

// 局部引入
import * as XLSX from 'xlsx'
import FileSaver from 'file-saver'

// 在main.js中引入XLSX

import XLSX from 'xlsx'
Vue.use(XLSX)

导出函数定义

// XLSX需要npm 安装后全局或者局部引入后使用
// 导出Excel
const exportExcel = () => {
  const xlsxParams = { row: true }
  // 根据表格导出  可以根据json数据导出 json_to_sheet
  const wb = XLSX.utils.table_to_book(
    document.querySelector('#out-table'),
    xlsxParams
  )
  // 写入
  const wbout = XLSX.write(wb, {
    bookType: 'xlsx',
    bookSST: true,
    type: 'array'
  })

  try {
    FileSaver.saveAs(
      new Blob([wbout], { type: 'application/octet-stream' }),
      '物料库存信息.xlsx'
    )
  } catch (e) {
    if (typeof consloe !== 'undefined') {
      ElMessage.error({
        message: e.wbout,
        type: 'error'
      })
    }
  }
  return wbout
}

注意：如果导出的表格数据量繁多，我们可以在里面添加延时函数进行导出

2、调用后端接口导出excel

// 引入axios
import axios, { AxiosRequestConfig } from "axios"

// 导出
const exportExcels=()=>{
    if (formData.uuid != '' || formData.uuid != 'undefined') {
        axios({
            url: '/pm/pmEmployeeEvaluation/exportExcel',
            method: 'post',
            responseType: 'blob', // 设置响应类型为 blob
            data: {
                uuid: formData.uuid // 根据需要传递的参数进行调整
            }
        })
            .then(res => {
                const blob = new Blob([res], { type: 'application/vnd.ms-excel;charset=UTF-8' });
                const fileName = "绩效考核.xlsx"
                const url = window.URL.createObjectURL(blob)
                const link = document.createElement("a")
                link.href = url;
                link.setAttribute("download", fileName);
                document.body.appendChild(link);
                link.click();
                document.body.removeChild(link);
                window.URL.revokeObjectURL(url);
            }).catch(error => {
                console.error('Error:', error);
            });
        // const fileUrl = "http://10.1.22.31:9771/pm/pmEmployeeEvaluation/notoken/exportExcel?uuid=" +  formData.uuid; // 文件的URL
        // window.location.href = fileUrl;
    }else{
        ElMessage('当前暂无excel导出！！！')
    }
}

直接调用定义好的接口，不单个引入 axios

总结

到此这篇关于vue3前端导出excel表格的两种实现方法的文章就介绍到这了,更多相关vue3前端导出excel内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！