首页 前端知识 前端渲染后端返回的HTML格式的数据

前端渲染后端返回的HTML格式的数据

2024-03-31 09:03:26 前端知识 前端哥 224 742 我要收藏

在日常开发中,经常有需要前端渲染后端返回页面的需求,对于不同数据结构,前端的渲染方式也不尽相同,本文旨在对各种情况进行总结。

后端返回纯html文件格式

数据包含html标签等元素,数据类型如下图:
在这里插入图片描述
在这里插入图片描述

前端通过 js 方式处理
// 必须要存进localstorage,否则会报错,显示不完全
window.localStorage.removeItem('callbackHTML')
window.localStorage.setItem('callbackHTML', res.data.htmlStr)
// 读取本地保存的html数据,使用新窗口打开
var newWin = window.open('', '_blank')    
// 读取本地保存的html数据,使用当前窗口打开
// var newWin = window.open('', '_self')   
newWin.document.write(localStorage.getItem('callbackHTML'))
// 关闭输出流
newWin.document.close()

后端返回一个html文件网址

前端需要渲染网址中的页面,可通过iframe实现:

<iframe :src="res.data.htmlStr" frameborder="0" width="100%" :style="{height: '100%'}" scrolling="auto"></iframe>

后端返回一个html文本字符串

数据包含部分标签,例如下图等等;
str = '<div><span style="color: red;">{{title}}</span></div>'在这里插入图片描述

通过vue指令来渲染

v-html 是用于向所在的标签中渲染文本内容,可以解析标签。

<div v-html='res.data.htmlStr'></div>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/4310.html
标签
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!