需要后端返回纯HTML数据，vue如何处理渲染

原创于 2024-12-20 15:12:39 发布 · 470 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html #vue.js #前端

需求背景：

近期做项目，后端返回了银联支付的第三方Html数据，前端项目是vue框架，发现v-html无法处理，那么想到iframe

iframe的使用：

第一个 src属性，只接受 url

<iframe src=url></iframe>

不符合要求

第二个 srcdoc属性，可以接受标签也可以接受含有html和body标签

<iframe srcdoc='<html><head>...</head></html>'></iframe>

符合需求

定义&用法
srcdoc 属性规定要显示在内联框架中的页面的 HTML 内容。

提示：该属性应该与 sandbox 和 seamless 属性一起使用。

如果浏览器支持 srcdoc 属性，且指定了 srcdoc 属性，它将覆盖在 src 属性中规定的内容。

如果浏览器不支持 srcdoc 属性，且指定了 srcdoc 属性，它将显示在 src 属性中规定的文件。

那么在vue如何使用，就相对简单了

建立一个空vue组件，使用iframe标签，用url变量，接口获取的数据就放url中，页面就自动加载就可以了

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

码老猴

关注关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3+laravel框架，将平台分别映射到公网上后，所有访问后端的接口都返回前端打包后入口文件内的html代码内容，如何实现？

**My Coding Family**

05-11

649

🏆 本文收录于《全栈Bug调优(实战版)》专栏，致力于分享我在项目实战过程中遇到的各类Bug及其原因，并提供切实有效的解决方案。无论你是初学者还是经验丰富的开发者，本文将为你指引出一条更高效的Bug修复之路，助你早日登顶，迈向财富自由的梦想🚀！同时，欢迎大家关注、收藏、订阅本专栏，更多精彩内容正在持续更新中。让我们一起进步，Up！Up！Up！备注：部分问题/难题源自互联网，经过精心筛选和整理，结合数位十多年大厂实战经验资深大佬经验总结所得，数条可行方案供所需之人参考。

Vue获取java后端程序返回html格式文本元素

PROHATE的专栏

08-13

4944

vue与spring boot+thymeleaf前端接口交互，数据解析

参与评论您还未登录，请先登录后发表或查看评论

vue打开后端html文件,VUE渲染后端返回含有script标签的html字符串示例

weixin_42181693的博客

06-07

3411

VUE渲染后端返回含有script标签的html字符串示例在接入支付宝支付模块的时候，支支返回的是一个form串，细看一下还有一个script标签，如何将其渲染出来给大家分享一下经验。注意点：不能在当前页面追加任何元素例如原生js：innerHtml、appendChiled等等；Vue原生v-html也不可以因为其只能渲染html标签，script不能够识别。需要重新创建一个空白Vue组件，用r...

VUE渲染后端返回含有script标签的html字符串示例

10-16

今天小编就为大家分享一篇VUE渲染后端返回含有script标签的html字符串示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

vue动态渲染后端返回的html模板

csdn_chengpeng的博客

07-29

1万+

vue动态渲染后端返回的html字符串前言实现方法1.引入 vue 用于创建构造器2 创建构造器效果前言最近突然冒出来这样一个需求，用户自己定义html模板，定义完成后将模板上传至服务器，后端将这个html模板字符串返回给前端，前端动态的将这个模板渲染到页面上实现方法 1.引入 vue 用于创建构造器正常引入vue的方式应该是 import Vue from 'vue' 但是这种方式可能会引发报错： [Vue warn]: You are using the runtime-only buil

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

hyduan_h5的博客

10-18

7554

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

后端返回来带html的标签，如何处理

m0_53164768的博客

01-05

1210

如果你只想展示返回的内容，不需要返回来的html标签处理，则可以使用正则进行处理。我使用的vue的 react同样的处理方法。

后端返回Html页面前端vue,【Vue】vue获取到了后端数据，如何给其换行？

weixin_29246195的博客

06-04

2078

已获取到数据并在页面上显示，但是是一段文字效果，想问下，如何才能给文字换行？HTML 代码获取后端数据代码回答让后端返回给你带标签的形式：1.xxx2.xxx要是前端处理的话我认为不合理。虽然前端也能处理。首先后端给你的内容应该是动态的，也就是这段文本是动态生成的。那么这段文本的来源开始哪里？？我猜测应该是类似从富文本编辑器中“用户”去编写完了传给后端的。传的时候应该是自带标签的。不然要是写死的文...

vueCli3.0文件上传后，后端返回流,前端转换成pdf预览的3种方式

04-22

然后，在接收到后端返回的PDF流数据后，你可以使用Blob对象来存储数据，并创建一个URL，最后利用PDF.js加载这个URL进行预览： ```javascript // 假设res.data是后端返回的PDF流数据 const blob = new Blob([res...

后端的html内容在vue中解析,基于Vue来解析页面在浏览器中呈现的过程中所涉及到的知识点...

weixin_33308985的博客

06-08

2334

前言此篇文章是基于Vue来分析一下从编辑好代码->打包->将dist文件夹放置到服务器上->访问该网址->页面呈现。此过程所涉及到的知识点，本篇很少涉及到具体的代码，主要是理论上的知识，如有错误，烦请各位在评论区指出。概念Vue-cli(快速建立开发环境的脚手架)webpack(模块打包工具)Vue-loader(将单文件组件.vue解析成JS代码形式)单页面应用与多页面应...

VUE渲染后端返回含有script标签的html字符串

qq_43689592的博客

12-26

1656

1，使用iframe渲染html字符串。2，拿到后端返回的html字符串。

vue v-html 处理后台返回的不规则特殊符号 html

weixin_50559423的博客

08-15

588

有时候会遇到后台直接返回 html 标签，但是是一些不规则的特殊符号。等。这里直接使用 replace 及配合正则方法去解决。下面介绍三种不规则 html 标签处理。废话不多说，直接上代码（这里说明一下，以下内容是由其它文章获取，尊重原创）。

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

热门推荐

chenjxj123的博客

02-15

2万+

使用v-html展示后端返回的html内容，并解决js不执行问题在UI平台开发的过程中，因为测试报告是在后台生成的，需要将测试报告整个进行返回到前端进行展示，但是vue不能像原生html一样直接展示render返回的响应页面，所以笔者借助v-html进行展示。具体写法如下： <div ref="reportHTML" v-html="htmlText" class="web-con"></div> <script> data(){ return{ ht

后端返回的数据带有html标签如何处理

月亮o_o的博客

08-21

1094

用v-html可以解决后台返回的html标签问题

返一个html怎么处理？

qq_28586135的博客

12-29

837

返一个html怎么处理？

mysql数据渲染到页面_如何优雅的把后台数据（通常是JSON）轻松渲染到html页面...

weixin_32244597的博客

02-02

909

如何优雅的把后台数据(通常是JSON)轻松渲染到html页面在我们做前后端分离的时候，都有遇到过一些看起卡很简答，确无从下手的问题把。比方说后台给了前端一个list集合，集合里面有很多学生，我们现在要对这些学生在前端渲染展示。我们怎么办？当然如果你是使用了强大的框架，完全不必要在意这些问题了。但是当我们啥都没有的时候，我们可以考虑使用handlerbars这款强大的工具。可以非常轻松，侵入化很小，...

vue中用v-html根据后端返回结果设置样式

Vivien_CC的博客

12-18

1697

一、问题一、问题1=====》今日遇到一个需求，是一个表格列返回状态status，并拥有多种不同颜色。2=====》平日里见到的基本都是返回01234......前端用插槽放进去，根据数字去判断显示字段以及设置不同样式，今天看到的是后端直接返回一个字符串，像这样：3=====》因此这一次我们不再需要根据字段去判断，而是直接写样式就行。=====》于是乎，我用了v-html把它放了进去，并直接在style下面写class相应的样式。

后端返回html图文文件处理问题

weixin_42241989的博客

08-25

3622

图文预览

Vue中如何解析后端字符串带html

yy_demo的博客

08-17

1353

一、首先在 Vue 实例中定义 newsContent 变量，然后将后端返回的字符串赋值给这个变量。二、使用v-html，将后端返回的字符串解析为 HTML。

vue 渲染后端返回菜单数据

最新发布

12-28

### Vue 动态渲染后端返回菜单数据在构建基于Vue的应用程序时，特别是当涉及到后台管理系统的开发，动态加载和渲染来自后端的菜单数据是一项常见需求。这不仅提高了用户体验，还增强了应用的安全性和灵活性。为了实现这一目标，在应用程序初始化阶段或用户登录成功之后，应当向服务器发送请求以获取用户的权限信息以及对应的菜单结构[^2]。一旦接收到这些数据，则可以通过编程方式将其转换为适合前端框架使用的格式，并利用组件化的方式展示给最终用户。下面是一个简单的例子来说明如何操作： #### 获取并解析菜单数据假设从API得到如下JSON格式的数据作为响应体的一部分： ```json [ { "id": 1, "name": "首页", "path": "/home" }, { "id": 2, "name": "系统设置", "children": [ {"id": 3,"name":"部门管理","path":"/system/department"}, {"id": 4,"name":"角色管理","path":"/system/role"} ] } ] ``` 接下来定义一个函数用于处理上述形式的数据，使之适应于`<router-link>`标签内的`:to`属性绑定： ```javascript function formatMenuData(rawMenus){ const formatted = rawMenus.map(item => ({ ...item, to: item.path ? { path:item.path } : undefined, children: Array.isArray(item.children)?formatMenuData(item.children):undefined })); return formatted.filter(Boolean); } ``` #### 创建递归组件以支持多层嵌套菜单考虑到实际应用场景中的菜单可能具有多层次的关系链路，因此建议创建一个能够自我调用自身的组件——即所谓的“递归组件”。这样可以方便地表示任意深度级别的子项列表而无需预先知道具体层数量。 ```html  <template> <ul class="menu-list"> <li v-for="(menuItem,index) in menuItems" :key="index">  <router-link v-if="menuItem.to" :to="menuItem.to">{{ menuItem.name }}</router-link> <span v-else>{{ menuItem.name }}</span>  <menu-component v-if="Array.isArray(menuItem.children)" :menu-items="menuItem.children"></menu-component> </li> </ul> </template> <script setup lang="ts"> import { defineProps } from 'vue'; // 定义接收父级传递过来的props参数 const props = defineProps({ menuItems:{ type:Array, required:true } }); </script> ``` 最后一步是在适当的位置引入这个新创建的组件并将之前准备好的菜单数组传入其中即可完成整个流程的设计与实施工作。通过这种方式可以在Vue环境中有效地管理和呈现由后端提供的复杂层次化的导航条目集合[^1]。