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

2024-08-17 00:56:39

一、后端接口

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文件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue本地打开build后生成的dist文件夹index.html问题

1.问题描述: npm run build 在dist 文件生成了 index 和 static 文件夹,为什么本地打开不了,给后端就能打开? 如何才能像访问 npm run dev 的地址那样访问? 2.种简单方法 2.1 修改配置在本地访问更改一些路径参数后,然后再次运行npm run build 就可以在本地打开index.html 改哪里? config/index.js文件 build: { assetsPublicPath: '/' } 改成 build: { assetsPubl
vue-cli打包后本地运行dist文件中的index.html操作

使用npm run build生成dist文件夹中的文件是你需要上传到服务器上的文件, 直接打开index.html会直接报错可以尝试用express搭建一个服务器,做法如下: 1.在dist根目录下新建server.js文件: 2.代码如下: var express = require('express'); var app = express(); const hostname = 'localhost'; const port = 3000; app.use(express.static
vue导入.md文件的步骤（markdown转HTML）

前言刚接到这个需求的时候,觉得很简单(的确很简单)但是这玩意的坑真的也让人无奈. 网上找了很多的资料,都没有写出痛点(这就很难过了).通过实践并且在我们项目中平稳运行,想分享给后面的人我的博客上也写了100多篇文章,点击量有上万的也有个位数的,能够帮助到他人这就是写作记录的动力. 需求 vue项目中可以良好展示markdown(只是展示功能没有编辑功能) 痛点问题 .md文件类型,直接模块加载(只有字符串,这得多难受,怎么维护呢),还是一个文件一个文件的好维护并且好修改复用用第三方插件,
vue在index.html中引入静态文件不生效问题及解决方法

本文针对的是Vue小白,不喜勿喷,谢谢出现该问题的标志如下控制台warning(Resource interpreted as Stylesheet but transferred with MIME type text/html) 出现的原因及解决办法第一种可能出现原因就是引入的静态文件在src文件夹内,这种的解决办法就是把资源引入静态资源的目录static 第二种可能出现的原因就是有单独的静态资源目录但是名字不叫static,这种的解决办法更改配置文件,把对应的几个配置文件内的stat
vue 如何打开接口返回的HTML文件

目录一.后端接口二.前端前言:接口测试平台,后端使用django,前端使用vue+element.项目接口平台测试完成,需要把后台产生的测试报告返回给前端展示. 一.后端接口 1.配置下django的template的参数,templates文件夹是放在project的目录下面的,是项目中或者说项目中所有的应用公用的一些模板 TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', '
vue实现把接口单独存放在一个文件方式

第一步:在src/router目录下,建立一个js文件(文件名:httpConfig.js): 第二步:在httpConfig.js文件里面写上 const aa = 'http://192.168.1.123';//本地测试 const config = { bb: aa+ '/article/articleListPage',//所需的接口 } //需要让外部拿到 export default config; 第三步:掉接口 _this.$http({ url: _this.$httpCon
Vue 前端导出后端返回的excel文件方式

目录前端导出后端返回的excel文件处理文件的下载(后端Excel导出) 后端文件流通过 Blob 下载拼接 URL 下载前端导出后端返回的excel文件在网上搜索了一番之后,决定采用Blob方式,这也是大家推荐的一种的方式,特此做下记录. 页面: 先筛选,向后端请求接口返回excel文件,代码如下: const apiUrl = this.Global.httpUrl + '/laima/export/new/exportTackOutOrder' console.log(this
vue项目接口管理,所有接口都在apis文件夹中统一管理操作

在vue开发中,会涉及到很多接口的处理,当项目足够大时,就需要定义规范统一的接口,如何定义呢? 方法可能不只一种,本文使用axios+async/await进行接口的统一管理本文使用vue-cli生成的项目举例使用接口管理之前在项目的某个具体组件中调接口,把调用接口的方法直接写在mounted中,或在是methods中比如: xxx.vue <template> <div id="areaTree">  <div
Java中将接口返回的字节串转为文件详解

讲一下现在的需求场景最近公司要在项目中访问一个第三方服务,在这个第三方服务中,需要下载一个报告文件,通过一个接口反馈回来. 这个下载接口返回了一个字节串,如[1,2,3,4,5,6,7],当然真实的数据不会是这个样子的. 但是我们如何将这个字节串转成文件流呢? 接下来就一起来看看吧,也跟大家分享一下我处理的思路. 试一下直接转字符串后转字节数组我首先拿到了这个字节串,但是并没有办法直接转成字节数组byte[]. 这个时候我想到一个方法,那就是直接讲这个字节串转成字符串,也就是下面的代码: O
springboot+vue+对接支付宝接口+二维码扫描支付功能（沙箱环境）

1. 什么是支付宝接口(沙箱环境)? 记录时间:2020年10月15日3:55 现如今,手机支付已相当普遍,而作为开发人员应该对手机支付操作有所了解.而支付宝接口是支付宝提供的一个接口,用来对接软件应用程序在进行金钱交易使用.然后对于编程爱好者而言,想学习这一点就有点难,因为要想使用支付宝接口,必须前提是使用软件应用程序,软件应用程序需要向支付宝申请,提交一系列资料,这一点是实现不了的.这就对开发者增加了一定的难度,因为产品没有上线,然后需要对接支付宝接口就是很大的问题,所以出现了沙箱环境,具有
vue中使用input[type="file"]实现文件上传功能

注意:input[type="file"] 标签中的属性accept="application/msword,application/pdf" 在pc上正常,但是在手机ios和android上这个文件格式限制会被忽略,所以需要在js中增加格式的判断,以及对应显示样式的设置.(我也是刚发现,如果有遇到这个问题的可以参考下---下面有更改:) ``` <template> <div id="my-careers"> <h
Java NIO.2 使用Path接口来监听文件、文件夹变化

Java7对NIO进行了大的改进,新增了许多功能: •对文件系统的访问提供了全面的支持 •提供了基于异步Channel的IO 这些新增的IO功能简称为 NIO.2,依然在java.nio包下. 早期的Java只提供了File类来操作文件.文件夹本身,功能有限,性能也不高. NIO.2为解决这种缺陷,提供了Path接口,并提供了Paths.Files2个工具类,这2个工具类包含的方法都是静态方法,Files类提供了大量的静态方法来操作文件.文件夹. Path接口.Paths工具类使用示例: //获
vue请求本地自己编写的json文件的方法

1.第一步,这是目录结构 2.接下来是build/webpack.dev.conf.js文件需要配置的内容代码: //vue配置请求本地json数据 const express = require('express') const app = express() const appData = require('../static/major_info.json')//加载本地json文件 const majorlist = appData.contents;//获取本地对应数据 const

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

目录

一、后端接口

二、前端

相关推荐

随机推荐