vue 文件导出

最新推荐文章于 2024-03-26 16:34:41 发布

原创最新推荐文章于 2024-03-26 16:34:41 发布 · 152 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文介绍了在Vue.js项目中导出文件的方法，包括在methods中调用，导入axios封装的方法，以及在axios封装文件中的实现细节。

1.在methods中

 async  exportUpdata() {
      try {
        await this.$confirms({
          msg: `您确认要导出吗？`,
          type: "success",
          btn: {
            no: "取消",
            ok: "确定",
          },
        });
      } catch (error) {
        return;
      }
      let myObj = {
        method: "get",
        url:'xxxxxxxxxxxxx',
        fileName: "组织架构关系表",
      };
      exportMethod(myObj);
    },

2.导入axios中封装好的方法

import { exportMethod } from "../../api/requier";

3.在封装好的axios文件中

import axios from 'axios';

//引入env.is
import baseURL from './env'
export function exportMethod(data) {
    axios({
      method: data.method,
      url: `${baseURL.prod.baseURL}`+ `${data.url}`,
      responseType: 'blob'
    }).then((res) => {
      const link = document.createElement('a')
      let blob = new Blob([res.data], { type: 'application/vnd.ms-excel' })
      link.style.display = 'none'
      link.href = URL.createObjectURL(blob)
      document.body.appendChild(link)
      link.download = data.fileName
      link.setAttribute('download', data.fileName+ '.xlsx')
      link.click()
      document.body.removeChild(link)
    }).catch(error => {
    //   this.$Notice.error({
    //     title: '错误',
    //     desc: '网络连接错误'
    //   })
      console.log(error)
    })
  }