广告
返回顶部
首页 > 资讯 > 前端开发 > 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://www.lsjlt.com/news/163279.html(转载时请注明来源链接)

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

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue如何打开接口返回的HTML文件
    目录一、后端接口二、前端前言:接口测试平台,后端使用django,前端使用vue+element。项目接口平台测试完成,需要把后台产生的测试报告返回给前端展示。 一、后端接口 &nb...
    99+
    2022-11-13
  • Java中将接口返回的字节串转为文件详解
    讲一下现在的需求场景 最近公司要在项目中访问一个第三方服务,在这个第三方服务中,需要下载一个报告文件,通过一个接口反馈回来。 这个下载接口返回了一个字节串,如[1,2,3,4,5,6...
    99+
    2022-11-12
  • Nginx如何实现直接返回验证文件
    这篇文章给大家分享的是有关Nginx如何实现直接返回验证文件的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。直接返回验证文件location = /XDFyle...
    99+
    2022-10-19
  • 后端接口返回文件流格式、前端如何实现文件下载导出呢?
    在项目开发过程中,难免会需要实现文件下载功能,记录下自己实际开发过程过程中遇到两种实现的方式。一种:后端直接返回加密url ,前端解密后直接使用 a标签下载就可以,这种方法相等比较简单,另一种:后端接...
    99+
    2023-09-02
    前端 java javascript
  • 手机如何打开html文件
    这篇文章主要介绍了手机如何打开html文件,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。html有什么特点1、简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便,...
    99+
    2023-06-14
  • vue文件如何正确打开
    本篇内容主要讲解“vue文件如何正确打开”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue文件如何正确打开”吧! 打开VUE文件前,您需要确定VUE文件扩展...
    99+
    2022-10-19
  • java如何打开本地html文件
    第一种:Object获取项目中的propertiesInputStream in = Object. class .getResourceAsStream( "/com/demo/conf.properties" );第二种:直接获得本地配...
    99+
    2018-03-01
    java教程 java 打开 本地 html 文件
  • java如何动态的处理接口的返回数据
    目录0、需求说明1、 思路方案2 、 具体实施0、需求说明 业务场景:服务A对接了服务B,服务C等服务的一些接口,然后由服务A统一暴露接口给到外部用户使用。 需求是: 服务...
    99+
    2023-01-30
    java 动态接口的返回数据 java接口动态返回
  • Java中将接口返回的字节串转为文件的方法是什么
    本篇内容主要讲解“Java中将接口返回的字节串转为文件的方法是什么”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Java中将接口返回的字节串转为文件的方法是什么”吧!讲一下现在的需求场景最近公司...
    99+
    2023-06-25
  • 详解如何实现OpenAPI开发动态处理接口的返回数据
    目录0 | 需求说明1 | 思路方案2 | 具体实施0 | 需求说明 业务场景:服务A对接了服务B,服务C等服务的一些接口,然后由服务A统一暴露接口给到外部用户使用。 需求是: 服...
    99+
    2023-05-15
    OpenAPI动态处理接口返回数据 OpenAPI 接口返回处理
  • 如何查看系统网络连接打开端口、系统进程、DOS打开文件
    本篇内容介绍了“如何查看系统网络连接打开端口、系统进程、DOS打开文件”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!问题描述: &...
    99+
    2023-06-08
  • thinkphp入口文件打不开如何解决
    本篇内容主要讲解“thinkphp入口文件打不开如何解决”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“thinkphp入口文件打不开如何解决”吧!在使用ThinkPHP框架搭建网站时,有时会遇到...
    99+
    2023-07-06
  • vue打包之后如何生成一个配置文件修改接口
    这篇文章主要介绍了vue打包之后如何生成一个配置文件修改接口,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。前言:我们的vue代码打包上传到服...
    99+
    2022-10-19
  • VSCode无法打开源文件及无法打开链接库文件如何解决
    本文小编为大家详细介绍“VSCode无法打开源文件及无法打开链接库文件如何解决”,内容详细,步骤清晰,细节处理妥当,希望这篇“VSCode无法打开源文件及无法打开链接库文件如何解决”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来...
    99+
    2023-07-02
  • html中如何用超链接打开新窗口并控制窗口属性
    本篇内容主要讲解“html中如何用超链接打开新窗口并控制窗口属性”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html中如何用超链接打开新窗口并控制窗口属性”吧...
    99+
    2022-10-19
  • 如何在ubuntu命令行中打开html文件
    这篇文章给大家介绍如何在ubuntu命令行中打开html文件,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。Ctrl+Alt+T可以打开shell,F11可以全屏显示,输入以下命令即可打开js17.html,并且指定浏览...
    99+
    2023-06-13
  • vue后台如何返回格式为二进制流进行文件的下载
    本篇内容主要讲解“vue后台如何返回格式为二进制流进行文件的下载”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue后台如何返回格式为二进制流进行文件的下载”吧!后台返回格式为二进制流进行文件的...
    99+
    2023-06-30
  • 后端如何返回一个(图片)文件流,并在前端vue展示。
    后端部分可分为三步: 1,获取文件参数(非必须,根据自己情况添加) 2,获取文件 3,以流形式返回 具体代码如下: @GetMapping("/getFileByUrl")@ApiOperationS...
    99+
    2023-09-14
    前端 vue.js java
  • 如何快速打开当前文件夹的dos命令窗口
    这篇文章主要介绍如何快速打开当前文件夹的dos命令窗口,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、常规方法:当然是手工打了比较慢,但有助于大家掌握基础的cd操作使用 “window + R” 组合键,输入cmd...
    99+
    2023-06-13
  • vue如何实现文件本地打开查看效果
    这篇文章主要介绍了vue如何实现文件本地打开查看效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue如何实现文件本地打开查看效果文章都会有所收获,下面我们一起来看看吧。问题描述:npm run build ...
    99+
    2023-07-04
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作