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

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

后端返回纯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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/140227.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

檀香香料经营商城小程序的作用是什么

檀香香料有安神、驱蚊、清香等作用&#xff0c;办公室或家庭打坐等场景&#xff0c;都有较高的使用频率&#xff0c;不同香料也有不同效果&#xff0c;高品质香料檀香也一直受不少消费者欢迎。 线下流量匮乏&#xff0c;又难以实现全消费路径完善&#xff0c;线上是商家增长必…

PR2023中如何导入字幕

PR中如何导入字幕 方法一&#xff1a; 点开文本&#xff0c;字幕&#xff0c;新建字幕分段&#xff08;点击右上角…三个点&#xff09; 键入调整内容 方法二 点开基本图形&#xff0c;编辑&#xff0c;调整&#xff0c;拖动位置。

功能集成,不占空间,同为科技TOWE嵌入式桌面PDU超级插座

随着现代社会人们生活水平的不断提高&#xff0c;消费者对生活质量有着越来越高的期望。生活中&#xff0c;各式各样的电气设备为我们的生活带来了便利&#xff0c;在安装使用这些用电器时&#xff0c;需要考虑电源插排插座的选择。传统的插排插座设计多暴露于空间之中&#xf…

【JAVA】日志打印java.util.logging.*函数自定义格式,并且显示调用时行号

1、JAVA自带的这样&#xff1a; 代码如下&#xff1a; import java.util.logging.*; Logger logger Logger.getLogger(MyLogger.class.toString()); logger.info("123");显示效果&#xff1a; 这样的格式&#xff0c;看起来不太好看&#xff0c;比如&#xff1a;会…

BI零售数据分析,当代零售企业的核心竞争力

在数字化转型中&#xff0c;BI智能零售数据分析成为了极其重要的核心竞争力之一。通过对大数据的采集和分析&#xff0c;零售企业可以更好地了解消费者的需求和行为模式&#xff0c;从而做出更准确的决策。例如&#xff0c;通过分析消费者的购物历史、浏览记录等数据&#xff0…

美妆品牌如何有效利用软文推广引流获客

近年来随着美妆品牌的转型升级和居民消费观念的转变&#xff0c;美妆行业取得了更大发展空间&#xff0c;新产品不断涌现&#xff0c;消费者拥有更多选择&#xff0c;那么在竞争激烈的市场中美妆品牌如何才能突破重围&#xff0c;找出新的价值增长点呢&#xff1f; 一、 细分消…

Confluence 解决PDF导出乱码问题

1.原因 PDF导出乱码是因为由于服务器缺少必要字体 2.解决办法 下载字体文件将字体文件重命名为simhei.ttf Confluence→管理→PDF导出语言支持&#xff0c;导入字体即可

在UniApp中使用uni.makePhoneCall方法调起电话拨打功能

目录 1.在manifest.json文件中添加权限 2. 组件中如何定义 3.如何授权 4.相关知识点总结 1.在manifest.json文件中添加权限 {"permissions": {"makePhoneCall": {"desc": "用于拨打电话"}} }2. 组件中如何定义 <template>…

阶段性总结

uart协议&#xff1a; 通用异步收发器 UART&#xff08;Universal Asynchronous Receiver/Transmitter)&#xff0c;是一种串行、异步、全双工的通信协议&#xff0c;将所需传输的数据一位接一位地传输&#xff0c;在UART通讯协议中信号线上的状态位高电平代表’1’&#xff0…

PRCV 2023:语言模型与视觉生态如何协同?合合信息瞄准“多模态”技术

近期&#xff0c;2023年中国模式识别与计算机视觉大会&#xff08;PRCV&#xff09;在厦门成功举行。大会由中国计算机学会&#xff08;CCF&#xff09;、中国自动化学会&#xff08;CAA&#xff09;、中国图象图形学学会&#xff08;CSIG&#xff09;和中国人工智能学会&#…

c++学习笔记汇总

[TOC] (C学习笔记汇总) 基础认识、基础语法 类、类与类之间的关系、可调用对象、std::function类模板、c11新标准、资源管理方案RAII、指针、智能指针、引用计数、C的多态 ios、istream、iostream、fstream、sstream 模板编程&#xff1a; 模板编程&#xff1a;主要分为“泛…

Linux进程上下文切换:理解特权模式和进程切换

Linux进程上下文切换&#xff1a;理解特权模式和进程切换 在Linux中&#xff0c;进程的运行空间被划分为内核空间和用户空间&#xff0c;而从用户态向内核态转换需要进行系统调用。这一过程中发生了两次CPU上下文切换&#xff1a; 00001. 保存用户态&#xff1a;将CPU寄存器…