Google_Coffee99 2023-02-27 16:57 采纳率: 33.3%
浏览 41
已结题

关于前端vue项目方法代码重复问题,如何解决?

vue项目里这段接口下使用的方法会在这个页面重复使用很多次,不同的接口基本使用的都是这一个方法(图片里的),我不想让代码量的重复度太高,我该怎么去封装这段代码并在不同的接口下使用?


    download1() {
      this.$api.report.download1(this.reportForm).then(res => {
        let a = res.headers['content-type']
        if (a === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
          const blob = new Blob([res.data])
          // 获取 获取响应头 heads 中的 filename 文件名
          const temp = res.headers['content-disposition'].split(';')[1].split('filename=')[1];
          var fileName = decodeURIComponent(temp);
          // 创建一个 a 标签
          const link = document.createElement('a')
          // 不显示a标签
          link.style.display = 'none'
          // 给a 标签的href属性赋值
          link.href = URL.createObjectURL(blob);
          link.setAttribute('download', fileName)
          // 把a标签插入页面中
          document.body.appendChild(link)
          link.click()
          // 点击之后移除a标签
          document.body.removeChild(link)
          URL.revokeObjectURL(link.href); // 释放内存
          setTimeout(() => {
            loading.close();
          }, 3000)
          this.dialogReport = false
        }else {
          console.log('11')
          let reader = new FileReader()
          reader.onload = function () {
            let res = reader.result
            let result = JSON.parse(res)
            Message({
              message: result.msg,
              type: 'error'
            })
          }
          reader.readAsText(res.data)
          loading.close()
        }
      })
      const loading = this.$loading({
        lock: true,
        text: '下载中,请耐心等待',
        spinner: 'el-icon-loading',
        background: 'rgba(255, 255, 255, 0.9)',
        target: document.querySelector('.table')
      });
    },

img

img

  • 写回答

2条回答 默认 最新

  • 木卯彳亍 2023-02-28 09:32
    关注

    1,新建一个.js文件,比如download.js,把你写的代码放进去

    export function download(form) {
      var reportForm=form
    this.$api.report.download1(reportForm).then(res => {
      let a = res.headers['content-type']
      if (a === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') {
        const blob = new Blob([res.data])
        // 获取 获取响应头 heads 中的 filename 文件名
        const temp = res.headers['content-disposition'].split(';')[1].split('filename=')[1];
        var fileName = decodeURIComponent(temp);
        // 创建一个 a 标签
        const link = document.createElement('a')
        // 不显示a标签
        link.style.display = 'none'
        // 给a 标签的href属性赋值
        link.href = URL.createObjectURL(blob);
        link.setAttribute('download', fileName)
        // 把a标签插入页面中
        document.body.appendChild(link)
        link.click()
        // 点击之后移除a标签
        document.body.removeChild(link)
        URL.revokeObjectURL(link.href); // 释放内存
        setTimeout(() => {
          loading.close();
        }, 3000)
        this.dialogReport = false
      }else {
        console.log('11')
        let reader = new FileReader()
        reader.onload = function () {
          let res = reader.result
          let result = JSON.parse(res)
          Message({
            message: result.msg,
            type: 'error'
          })
        }
        reader.readAsText(res.data)
        loading.close()
      }
    })
    const loading = this.$loading({
      lock: true,
      text: '下载中,请耐心等待',
      spinner: 'el-icon-loading',
      background: 'rgba(255, 255, 255, 0.9)',
      target: document.querySelector('.table')
    });
     }
    
    

    2,在要使用这个方法的地方引入这个方法

    import {
      download
    } from "../../../util/download.js";
    
    

    3,使用
    download(this.reportForm)
    大体就是这样,根据具体情况再改一改

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 3月9日
  • 已采纳回答 3月1日
  • 创建了问题 2月27日

悬赏问题

  • ¥15 notepad++ 自动补全提示,如输入汉字"人名",就会出现"张三","李四"
  • ¥15 如何用matlab实现PSO算法与两种智能优化算法在30维和50维问题上的性能比较?
  • ¥15 在qt的QGraphicsView和QGraphicsScene中遇到的问题
  • ¥50 如何完美解决谷歌礼品卡支付不被检测
  • ¥15 nslt的可用模型,或者其他可以进行推理的现有模型
  • ¥15 arduino上连sim900a实现连接mqtt服务器
  • ¥15 vncviewer7.0安装后如何正确注册License许可证,激活使用
  • ¥15 phython如何实现以下功能?查找同一用户名的消费金额合并2
  • ¥66 关于人体营养与饮食规划的线性规划模型
  • ¥15 基于深度学习的快递面单识别系统