返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何打开接口返回的HTML文件
  • 207
分享到

vue如何打开接口返回的HTML文件

2024-04-02 19:04:59 207人浏览 安东尼
摘要

目录一、后端接口二、前端前言:接口测试平台,后端使用Django,前端使用Vue+element。项目接口平台测试完成,需要把后台产生的测试报告返回给前端展示。 一、后端接口 &nb

前言:接口测试平台,后端使用Django,前端使用Vue+element。项目接口平台测试完成,需要把后台产生的测试报告返回给前端展示。

一、后端接口

    1、配置下djanGo的template的参数,templates文件夹是放在project的目录下面的,是项目中或者说项目中所有的应用公用的一些模板


TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'userfiles')],
        'APP_DIRS': True,
        'OPTioNS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

2、视图函数,读取template目录下report文件夹的报告,并返回给前端

 def getReport(self, request):
        # 获取POST BODY信息
        reportId = request.data["id"]
        try:
            print(os.getcwd()) # 打印程序运行目录
            template = loader.get_template(f"./report/{reportId}.html")
            # template = loader.get_template(f"1.html")
            return Response(template.render())
            # return HttpResponse(template.render())
        except Exception as e:
            content = {'message': '获取报告失败'}
            return Response(content)

二、前端

1、如果后端返回的HTML文件不包含js文件,可以使用vue的v-html,vue的v-html只能渲染html元素和CSS文件,,不能执行js文件

2、后端返回的数据,HTML文件包含js文件。使用下面这种方法,接口获取到的html数据在暂存的本地localStorage,再读取数据,然后在新窗口打开报告。

接口返回的数据如下:

 template:

 <el-button type="warning" @click="viewReport" :disabled="reportDisabled

methods:

 
 // 查看测试报告
  viewReport () {
    var message = {id:1}
    //  axiOS 通过接口获取后台的报html告文件数据
    getReport(message).then(res => {
      this.$message({
        showClose: true,
        message: res.data.message,
        type: 'success'
      })
      // res.data 为接口返回的html完整文件代码
       // 必须要存进localstorage,否则会报错,显示不完全
      window.localStorage.removeItem('callbackHTML')
      window.localStorage.setItem('callbackHTML', res.data)
    // 读取本地保存的html数据,使用新窗口打开
      var newWin = window.open('', '_blank')
      newWin.document.write(localStorage.getItem('callbackHTML'))
      // 关闭输出流
      newWin.document.close()
    }).catch(err => {
      this.$message({
        showClose: true,
        message: err.response.msg,
        type: 'error'
      })
    })
  }

至此结束,点击下按钮即可在新窗口展示测试报告了

 到此这篇关于vue 如何打开接口返回的HTML文件的文章就介绍到这了,更多相关vue 打开接口返回的HTML文件内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue如何打开接口返回的HTML文件

本文链接: https://lsjlt.com/news/163279.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue如何打开接口返回的HTML文件
    目录一、后端接口二、前端前言:接口测试平台,后端使用django,前端使用vue+element。项目接口平台测试完成,需要把后台产生的测试报告返回给前端展示。 一、后端接口 &nb...
    99+
    2024-04-02
  • Java通过接口返回文件流
    在返回接口的,如果包含文件,一般有两种返回方式:     1.返回文件在服务器中的地址     2.读取文件在服务器中的地址,并将文件以流的方式返回 对于第一种方式,返回文件在服务器中的真实地址,...
    99+
    2023-09-12
    java
  • 手机如何打开html文件
    这篇文章主要介绍了手机如何打开html文件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。html有什么特点1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,...
    99+
    2023-06-14
  • java接口返回值如何封装
    在Java中,接口是一种定义行为的规范,它定义了一个类应该具有的方法,但不提供方法的具体实现。因此,接口本身不会有返回值。但是,可以...
    99+
    2023-10-10
    java
  • python如何获取接口返回值
    在Python中,你可以使用`requests`库来发送HTTP请求,并获取接口的返回值。下面是一个简单的示例:```pythoni...
    99+
    2023-08-30
    python
  • vue文件如何正确打开
    本篇内容主要讲解“vue文件如何正确打开”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue文件如何正确打开”吧! 打开VUE文件前,您需要确定VUE文件扩展...
    99+
    2024-04-02
  • java如何打开本地html文件
    第一种:Object获取项目中的propertiesInputStream in = Object. class .getResourceAsStream( "/com/demo/conf.properties" );第二种:直接获得本地配...
    99+
    2018-03-01
    java教程 java 打开 本地 html 文件
  • Nginx如何实现直接返回验证文件
    这篇文章给大家分享的是有关Nginx如何实现直接返回验证文件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。直接返回验证文件location = /XDFyle...
    99+
    2024-04-02
  • 后端接口返回文件流格式、前端如何实现文件下载导出呢?
    在项目开发过程中,难免会需要实现文件下载功能,记录下自己实际开发过程过程中遇到两种实现的方式。一种:后端直接返回加密url ,前端解密后直接使用 a标签下载就可以,这种方法相等比较简单,另一种:后端接...
    99+
    2023-09-02
    前端 java javascript
  • html的文件怎么打开
    在计算机内,HTML文件是一种文本文件,以.html或.htm为后缀名,并且是Web页面的基础。如果你想打开一个HTML文件,有几种方法可以做到。方法一:使用浏览器打开在计算机上,我们通常使用浏览器浏览Web页面,而HTML文件是Web页面...
    99+
    2023-05-15
  • SpringBoot接口中如何直接返回图片数据
    目录接口直接返回图片数据起因类似这种根据个人经验优雅的实现图片返回接口直接返回图片数据 起因 最近在做涉及到分享推广的业务,需要由业务员分享二维码进入推广页面,由于是新项目,前期预算...
    99+
    2024-04-02
  • Java中将接口返回的字节串转为文件详解
    讲一下现在的需求场景 最近公司要在项目中访问一个第三方服务,在这个第三方服务中,需要下载一个报告文件,通过一个接口反馈回来。 这个下载接口返回了一个字节串,如[1,2,3,4,5,6...
    99+
    2024-04-02
  • java如何动态的处理接口的返回数据
    目录0、需求说明1、 思路方案2 、 具体实施0、需求说明 业务场景:服务A对接了服务B,服务C等服务的一些接口,然后由服务A统一暴露接口给到外部用户使用。 需求是: 服务...
    99+
    2023-01-30
    java 动态接口的返回数据 java接口动态返回
  • python如何全面解析接口返回数据
    本篇内容介绍了“python如何全面解析接口返回数据”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!解析接口返回数据1、把json格式的数据转...
    99+
    2023-06-29
  • jmeter如何提取上一个接口返回值
    JMeter可以使用正则表达式提取上一个接口返回值。以下是提取上一个接口返回值的步骤:1. 在JMeter中,添加一个正则表达式提取...
    99+
    2023-08-30
    jmeter
  • Springboot如何通过流返回文件
    目录如何通过流返回文件controller类如下工具类DownLoadUtils如下以流的方式直接返回如何通过流返回文件 本人的文件是放在resource/templates目录下,...
    99+
    2024-04-02
  • thinkphp入口文件打不开如何解决
    本篇内容主要讲解“thinkphp入口文件打不开如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“thinkphp入口文件打不开如何解决”吧!在使用ThinkPHP框架搭建网站时,有时会遇到...
    99+
    2023-07-06
  • vue如何读取html文件
    随着网页技术的不断发展,前端框架越来越受到开发者的关注和重视。其中,Vue.js作为一款快速高效的前端框架,深受广大开发者的喜爱。在Vue项目中,如何读取HTML文件是一个需要注意的问题。本文将介绍Vue如何读取HTML文件,并结合实际代码...
    99+
    2023-05-14
  • 如何从 Go 中的 for 循环返回接口列表?
    在Go语言中,我们可以通过for循环来遍历数组、切片、映射等数据结构。但是,有时候我们需要在循环中返回一个接口列表。这是一个常见的需求,因为接口是一种抽象类型,可以代表多种具体类型。本...
    99+
    2024-02-09
    go语言
  • vue打包之后如何生成一个配置文件修改接口
    这篇文章主要介绍了vue打包之后如何生成一个配置文件修改接口,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前言:我们的vue代码打包上传到服...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作