前端导出方法

下面这两个方法可以放在utlis下的index文件夹下面,如果想用导出方法,就在当前页面引入

import { debounce } from "@/utlis/index.js";

get导出请求

// 下载
/**
 * @description: ajax下载/导出文件
 * @param {string} url 资源或接口地址,可携带参数
 * @param {function} progressCallback 选填,前端自定义的下载进度回调
 */

export const download = function (url, title, progressCallback) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest()
        xhr.open('get', url)
        xhr.responseType = 'blob'
        xhr.onload = e => {
            if (xhr.status === 200) {
                const response = xhr.response
                resolve(response)
                console.log(response, 34434);
                const dispoition = xhr.getResponseHeader('Content-Disposition') || ''
                const nameStr = dispoition.split(';')[1] || ''
                const fileName = decodeURIComponent(nameStr.split('=')[1] || '')
                // 判断接口返回数据格式正确才 导出/下载 文件
                // excel表格typr "text/xml"  application/vnd.ms-excel
                if (response.type == "text/xml" || response.type == "application/force-download" || response.type == "application/vnd.ms-excel" || response.type == "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet") {
                    if (window.navigator.msSaveOrOpenBlob) {
                        window.navigator.msSaveOrOpenBlob(response, fileName)
                    } else {
                        const href = URL.createObjectURL(response)
                        let ele = document.createElement('a')
                        ele.target = '_blank'
                        ele.href = href
                        ele.download = fileName
                        ele.click()
                        ele = null
                        URL.revokeObjectURL(href)
                        setTimeout(() => {
                            Notification({
                                title: "提示",
                                message: title ? '下载成功' : '导出成功',
                                type: "success",
                            })
                        }, 2000);
                    }
                } else {
                    Notification({
                        title: "提示",
                        message: title ? '下载失败' : '导出失败',
                        type: "error",
                    })
                }

            } else {
                reject(new Error(`${xhr.status}:请求失败`))
            }
        }
        xhr.error = err => {
            reject(err)
        }
        xhr.onprogress = e => {
            if (e.lengthComputable) {
                const percentComplete = e.loaded / e.total
                progressCallback && progressCallback(percentComplete)
            }
        }
        xhr.send(null)
    })
}```
放在某个方法里面用

```javascript
  // 下载
    downloadExel() {
      let url = null;
      if (process.env.NODE_ENV === "development") {
        url = `/builder/api/v1/bfpBudget/exportBudgetList?year=${this.year}`;
      } else {
        let urlData = window.location.href;
        let ary = urlData.split("/");
        ary.map((item, index) => {
          if (item == "builder") {
            let c = ary.slice(0, index);
            url = c.join("/");
          }
        });
        url = `${url}/builder/api/v1/bfpBudget/exportBudgetList?year=${this.year}`;
      }

      // console.log(url);
      download(url).then((res) => {
        // if (res.size) {
        //   this.$notify({
        //     title: "提示",
        //     message: "导出成功",
        //     type: "success",
        //   });
        // } else {
        //   this.$notify({
        //     title: "提示",
        //     message: "导出失败",
        //     type: "success",
        //   });
        // }
      });
    },

post导出请求

/**
 *
 * @param {*} url 地址
 * @param {*} data 参数
 * @param {*} progressCallback 选填,前端自定义的下载导出成功失败提示
 * @returns
 */

export const getCostDetailExport = function (url, data, fileName) {
    return server
        .request({
            headers: {
                "Content-Type": "application/json;charset=utf-8",
            },
            url,
            responseType: "blob",
            method: "post",
            data,
        })
        .then(async (res) => {
            console.log(res, 3333);
            // 判断接口返回数据格式正确才导出文件
            if (!fileName) {
                // 获取后台设置文件名称
                fileName = decodeURIComponent(res.headers['content-disposition'].split(';')[1].split('=')[1]);
                console.log(fileName, 222);
            }
            if (res.type == "text/xml" || res.data.type == "text/xml" || res.data.type == "application/vnd.ms-excel") {
                if ("download" in document.createElement("a")) {
                    const elink = document.createElement("a");
                    elink.download = fileName;
                    elink.style.display = "none";
                    if (res.type) {
                        elink.href = URL.createObjectURL(res);
                    } else {
                        elink.href = URL.createObjectURL(res.data);
                    }
                    document.body.appendChild(elink);
                    elink.click();
                    // 释放 通过调用 URL.createObjectURL() 创建的 URL 对象
                    URL.revokeObjectURL(elink.href);
                    document.body.removeChild(elink);

                } else {
                    navigator.msSaveBlob(res.data, fileName);
                }
                setTimeout(() => {
                    Notification({
                        title: "提示",
                        message: "导出成功",
                        type: "success",
                    })
                }, 2000);

            } else {
                Notification({
                    title: "提示",
                    message: "导出失败",
                    type: "error",
                })
            }


        })
        .catch((err) => {
            // 处理错误
            // errorCallback
        });
}

页面用法

    // 导出报表
    async exportReport(exportParameters) {
      let reg = new RegExp("-", "g");
      let mon = this.monthValue.replace(reg, "");
      let param = {
        kjqj: mon,
        zrzx: this.responsibilityValue,
        version: exportParameters,
      };
      if(this.valueHeaderData == ''){
          this.valueHeaderData ='1'
      }
      //  console.log(this.storageData);
      if (exportParameters == "2") {
        let url = `/api/v1/BfpReportIndicatorDataConfig/exportIncomeStatement?kjqj=${mon}&zrzx=${this.responsibilityValue}&version=${exportParameters}&all=${'1'}`;
        getCostDetailExport(url, this.storageData, "利润表变动表.xls");
      } else if (exportParameters == "3") {
        let url = `/api/v1/BfpReportIndicatorDataConfig/exportIncomeStatement?kjqj=${mon}&zrzx=${this.responsibilityValue}&version=${exportParameters}&all=${this.valueHeaderData}`;
        getCostDetailExport(url, null, "利润表最终表.xls");
      }

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值