Vue使用v-html展示后端返回的html内容

最新推荐文章于 2025-03-24 14:59:11 发布

小测.

最新推荐文章于 2025-03-24 14:59:11 发布

阅读量2.4w

点赞数 7

分类专栏：测试平台开发日记文章标签： vue.js html 后端

本文链接：https://blog.csdn.net/chenjxj123/article/details/122953325

版权

测试平台开发日记专栏收录该内容

9 篇文章

订阅专栏

本文介绍了在Vue项目中如何使用v-html指令显示从后端获取的HTML内容，并解决其中的JS脚本无法执行的问题。通过正则匹配提取JS脚本，然后在DOM更新后动态插入到页面中，实现了JS脚本的执行，成功展示了包含动态功能的测试报告页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用v-html展示后端返回的html内容，并解决js不执行问题

在UI平台开发的过程中，因为测试报告是在后台生成的，需要将测试报告整个进行返回到前端进行展示，但是vue不能像原生html一样直接展示render返回的响应页面，所以笔者借助v-html进行展示。具体写法如下：

<div ref="reportHTML" v-html="htmlText" class="web-con"></div>

<script>
	data(){
		return{
			htmlText: ""
		}
	}
	methods:{
		lookReport(report_case){
    		...
            this.htmlText = response.data
            ...
    },
	}
</script>

这种方式能够将测试报告页面正常展示出来，但是页面上的按钮全部都点不动，后面发现这种方式只支持html渲染，而js脚本内容则未被执行。所以还要解决js脚本无法被渲染的问题。后面参考了下面这篇文章，发现可以动态的将js脚本插入到标签中，这样子就解决了v-html中js脚本不生效的问题。
https://blog.csdn.net/qq_38387487/article/details/88017215
具体用法如下：

// 使用正则获取js内容
   response.data.replace(/<script.*?>([\s\S]+?)<\/script>/img,function(_,js){    //正则匹配出script中的内容
    	JSScript = js
   })
   // 这里需要使用$nextTick  需要等dom更新后才能操作reportHTML
   this.$nextTick(() => {
	   // 将js脚本内容插入到标签当中
	    var newElement = document.createElement("script")
	    newElement.innerHTML = JSScript
	    this.$refs.reportHTML.append(newElement)
  })