目錄

• 一、後端介面
• 二、前端

前言：介面測試平臺，後端使用django，前端使用+element。專案介面平臺測試完成，需要把後臺產生的測試報告返回給前端展示。

一、後端接http://www.cppcns.com口

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.cowww.cppcns.com
 
ntext_processors.debug','django.template.context_processors.request','django.contrib.auth.context_processors.auth','django.contrib.messages.context_processors.messages',ockehmvw    ],},]

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())
        excwww.cppcns.com
 
ept Exception as e:
            content = {'message': '獲取報告失敗'}
            return Response(content)

二、前端

1、如果後端返回的HTML檔案不包含檔案，可以使用vue的v-html，vue的v-html只能渲染html元素和檔案,，不能執行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檔案內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！