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

news2025/1/11 10:14:12

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

后端返回纯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.coloradmin.cn/o/1105556.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

分享一下微信小程序怎么添加成绩查询插件

微信小程序如何添加成绩查询插件 一、引言 微信小程序是一种方便快捷的应用程序&#xff0c;可以在微信中使用。随着教育的不断发展&#xff0c;学校和家长对于学生的成绩查询需求也越来越高。通过在微信小程序中添加成绩查询插件&#xff0c;可以为学生和家长提供更加便捷的…

超火的双臂烹饪机器人Project YORI,分分钟成为你的专属大厨!

原创 | 文 BFT机器人 当前行业内有两种通用的烹饪自动化方法&#xff1a;一种是“制造一个可以在普通厨房中运作的烹饪机器人&#xff0c;因为每个人都有厨房”&#xff0c;这听起来很不错&#xff0c;但接下来你就必须使你的烹饪机器人能够在厨房环境中正常运行&#xff0c;这…

极智项目 | 实战人脸识别签到系统

欢迎关注我的公众号 [极智视界]&#xff0c;获取我的更多经验分享 大家好&#xff0c;我是极智视界&#xff0c;本文来介绍 实战人脸识别签到系统。 本文介绍的 实战人脸识别签到系统&#xff0c;提供完整的可以一键执行的项目工程源码&#xff0c;获取方式有两个&#xff1a…

java 调用 360 接口实现批量查询手机号码归属地

网上的手机号码归属地查询&#xff0c;要么限制查询条数&#xff0c;要么收费&#xff0c;于是找到一个 360 提供的查询 api 使用多线程异步查询&#xff0c;Future 确保查询结果顺序与输入顺序一致 核心 Controller package com.example.phonenumber.controller;import cn.h…

铜死亡+铁死亡,搭配WGCNA+单细胞+分型+实验

今天给同学们分享一篇铜死亡铁死亡WGCNA单细胞分型实验的生信文章“Cross-talk between cuproptosis and ferroptosis regulators defines the tumor microenvironment for the prediction of prognosis and therapies in lung adenocarcinoma”&#xff0c;这篇文章于2023年1月…

Vue-Cli - Vue 脚手架的创建 以及 目录结构说明

目录 一、Vue-Cli 1.1、Vue 脚手架的创建 二、Vue 脚手架目录结构说明 1.1、vscode 使用 Vue 脚手架 1.2、结构说明 一、Vue-Cli 1.1、Vue 脚手架的创建 注意&#xff1a;你要提前安装好 node.js &#xff08;官网下载即可&#xff09;&#xff0c;配置好环境变量. a&…

【内存管理】虚拟内存、物理内存之间的关系

什么是虚拟内存、什么是物理内存&#xff1f; Linux 虚拟内存是操作系统中一个重要概念&#xff0c;它允许程序在更大的地址空间中运行&#xff0c;并提供了高效的内存管理机制。 什么是虚拟内存&#xff1f; 虚拟内存是操作系统的一种内存管理技术&#xff0c;它将系统中的…

MacBook忘记开机密码啦!教你怎么找回密码

文章目录 一、前言二、使用恢复模式重置密码2.1 Apple ID找回密码2.2 终端resetpassword重设密码 三、总结 一、前言 在上一章《忘记开机密码啦&#xff01;我教你用ventoy找回密码》&#xff0c;我们已经学会了如何使用ventoy U盘启动器中的ntpwedit工具来找回windows的本地用…

Java模拟双向链表,增删操作

public static void main(String[] args) {ArrayList arrayList new ArrayList();Node zhangsan new Node("张三");Node lisi new Node("李四");Node wanger new Node("王二");//模拟双向链表&#xff0c;将表中元素依次连接起来zhangsan.ne…

【已解决】pyinstaller 将程序打包成 exe 文件后,无法保存视频或者保存的视频为空文件

这里写自定义目录标题 问题描述解决方法方法一方法二 参考 问题描述 使用pyinstaller将python程序打包为exe文件&#xff0c;其中包含保存视频的代码。直接运行脚本时&#xff0c;程序能够正确的保存视频。但是通过pyinstaller打包成exe文件后&#xff0c;exe文件无法保存视频…

EthernetIP 转MODBUS RTU协议网关连接FANUC机器人作为EthernetIP通信从站

远创智控YC-EIPM-RTU网关产品是一款高效的数据采集工具&#xff0c;它可以通过各种数据接口与工业领域的仪表、PLC、计量设备等产品连接&#xff0c;实时采集这些设备中的运行数据、状态数据等信息。采集到的数据经过整合和运算等操作后&#xff0c;可以被传输到其他设备或者云…

@Slf4j打印异常信息打印出堆栈信息

Spring Boot项目中的e.printStackTrace()打印的堆栈信息通常不会自动记录到日志中。这是因为e.printStackTrace()是将异常信息打印到标准错误输出流&#xff08;System.err&#xff09;上&#xff0c;而不是记录到应用程序的日志文件中。 如何使用&#xff1a;Slf4j打印异常信…

【金TECH频道】汇聚多元化超级算力,看见更好的“源启”

越来越多的金融机构开始利用大数据和AI技术&#xff0c;提升信贷业务的效率&#xff0c;利用隐私计算打造开放式金融&#xff0c;让客户随时随地获得金融服务&#xff1b;气象领域&#xff0c;高精度计算让我们能准确地预测恶劣的天气&#xff0c;医疗大数据让部分癌症的治愈成…

如何修改运行中的docker容器的端口映射

一、必须先关闭docker服务 systemctl stop docker二、修改容器的hostconfig.json 文件 路径&#xff1a;vim /var/lib/docker/containers/容器id/hostconfig.json 修改 PortBindings 属性&#xff0c;如下图&#xff1a; 然后保存 三、修改config.v2.json 文件 路径&#…

加拿大AI医疗技术公司【FluidAI】完成1500万美元融资

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 猛兽财经获悉&#xff0c;总部位于加拿大基奇纳的AI医疗技术公司【FluidAI】今日宣布已完成1500万美元融资。 本轮融资由SOSV和Graphene Ventures领投&#xff0c;参与方包括Boutique Venture Partners、Threshold Impact、…

Mybatis执行器BatchExecutor、ReuseExecutor、SimpleExecutor介绍

一、关系 这里说下Executor接口和他的子类之间的关系 //最顶层的接口 public interface Executor {} //接着是基础BaseExecutor public abstract class BaseExecutor implements Executor {}BaseExecutor有三个实现类BatchExecutor、ReuseExecutor、SimpleExecutor是并列关系…

Android攻城狮学鸿蒙-Tab

Entry Component struct TabPage {State message: string Hello World;private controler: TabsController new TabsController();build() {Column() {Tabs({ barPosition: BarPosition.Start, controller: this.controler }) {TabContent() {Column() {Text(哈哈哈哈).fontS…

怎么通过SaleSmartly优化Telegram营销

社交媒体的发展趋势一直是出海企业的“风向标”。截止至2023年6月&#xff0c;Telegram已成为除了WhatsApp之外全球苹果应用商店中用户下载量最多的社交网络应用&#xff0c;这个新兴的社媒平台正在逐渐扩大它的影响力。Telegram的崛起也意味着出现了新的商机&#xff0c;要怎么…

vue3实现在element Dialog 对话框中预览pdf文件

最近有一个需求就是点击按钮在弹框中去预览pdf文件&#xff0c;于是发现了一个HTML中比较重要的标签&#xff1a;embed&#xff0c;前面说的需求就可以用这个标签来实现&#xff0c;一起来学习一下吧。 embed标签是HTML中的一个非常重要的标签&#xff0c;它可以在你的网页上插…

CPU乱序执行

一、为什么CPU要乱序执行&#xff1f; 首先我们要明白一点&#xff0c;不是cpu真的乱序执行&#xff0c;而是为了提交执行效率&#xff0c;但这个所谓的乱序执行的前提下是有依据的&#xff0c;在没有互相依赖的代码行里才有可能产生这种乱序执行的现象。 1、有可能产生乱序执…