vue+element-ui+django 打开后台返回的测试报告

1、先将测试报告的文件夹设置为模板

 

 

 2、接口获取测试报告，并返回给前端

# 获取提测流程的自动化测试报告
def get_auto_test_report_vue(request):
    try:
        process_id = request.GET['process_id']
        env_name = request.GET['env_name']
        try:
            report_path = Report_Data.objects.filter(Q(from_process=process_id) & Q(process_env=env_name)).values(
                "report_path")
            logger.info(f"报告地址为：{report_path}")
            # 如果有多条，返回最近的记录
            report_path = list(report_path)[0]["report_path"]
            template = loader.get_template(report_path)  
            return JsonResponse({"code": 200, "msg": "获取自动化报告成功", "data": {"report_path": template.render()}})
        except Exception as e:
            logger.info(f"未获取到自动化报告：{e}")
            return JsonResponse({"code": 200, "msg": "获取自动化报告失败"})
    # 没有传入plan_id，跳转404页面
    except Exception as e:
        logger.error(f"获取自动化报告异常：{e}")
        return JsonResponse({"code": 200, "msg": "获取自动化报告异常"})

3、前端打开测试报告

<el-button @click="getReport(scope.row)" type="primary" plain size="small">查看</el-button>

方法

getReport(row) {
        const reportIsExist = row.auto_test_report;
        if (reportIsExist !== "1") {
          this.$message.warning("此迭代暂无自动化报告")
        }else {
          this.autoReport.process_id = row.process_id
          this.autoReport.env_name = row.submit_test_env
          const params = Object.assign({}, this.autoReport)
          getAutoTestReport(params).then(res => {
            if (res.data) {
　　　　　　　　　//必须要存进localstorage，否则会报错，显示不完全
              window.localStorage.removeItem("reportHTML")
              window.localStorage.setItem("reportHTML", res.data.report_path)
              let newWin = window.open('', '_blank')
              newWin.document.write(localStorage.getItem("reportHTML"))
              newWin.document.close()
            }else {
              this.$message.error("获取自动化报告异常")
            }
          })
        }
      }

 

更多详细参考：https://blog.csdn.net/wuyuezhaolu/article/details/120452840