vue中预览xml并高亮显示

        项目中有需要将接口返回的数据流显示出来,并高亮显示;

1.后端接口返回blob,类型为xml,如图

2.页面中使用pre code标签:

 <pre v-if="showXML"><code class="language-xml">{{xml}}</code></pre>

3. 使用插件highlight.js (我这里接口返回的数据不需要格式化,如果返回string需要格式化则使用vkbeautify插件,在最后补充说明)

         3.1 安装 yarn add highligt.js (我这里是11.8.0)

        3.2 页面使用,我这是局部使用,就没有在全局去引用

        

import hljs from 'highlight.js'
import 'highlight.js/styles/a11y-light.css'
import xml from "highlight.js/lib/languages/xml"
hljs.registerLanguage("xml", xml)

        3.3 代码实现

api.then(res=>{                   var reader = new FileReader()reader.readAsText(res.data, "UTF-8")reader.onload = function(evt) { that.xml = evt.target.resultthat.$nextTick(()=>{ // 注意数据显示后再去渲染高亮document.querySelectorAll("pre code").forEach((el) => {hljs.highlightElement(el);});})}})
})

 通过以上代码就能实现了。再实现的过程中遇到几个坎:

        1. code标签没有加class, 提示无language,根据文档说明引入xml,并registerLanguage

        2. 一直无法渲染出来,后在reader.onload中赋值xml后,再通过 that.$nextTick中再去渲染

        3. 提示 highlightBlock(block)已经不再使用,根据文档找到最新方法highlightElement

                that.$nextTick(()=>{

                               document.querySelectorAll("pre code").forEach((el) => {

                                  hljs.highlightElement(el);

                                });

                            })

补充:如果需要格式化返回的xml文件流则使用 vkbeaufigy插件

1. 安装插件 yarn add vkbeautify

2. 页面引入(局部使用)

        import vkbeautify from 'vkbeautify'

3. 处理代码

        在处理数据时使用:that.xml=vkbeautify.xml(xmlString)

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

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

相关文章

Spring源码分析(三) bean的生命周期 getBean()和doGetBean()

b、在中篇会正式经历一套生命周期流程 getBean() -> doGetBean() -> createBean() -> doCreateBean() -> createBeanInstance() -> populateBean() -> initializeBean() 流程 1、AbstractBeanFactory#getBean() 此处开始进行对象的获取也就是核心步骤 Overr…

shell脚本学习笔记02(小滴课堂)

可以在home目录下创建一个shell.sh文件。 按w进入命令行模式。按i进入插入模式。如果想返回命令行模式&#xff0c;按esc即可。然后可以使用x和dd进行删除内容。 在插入模式下我们点击esc键&#xff0c;再去按:键&#xff0c;我们就可以进入到底行模式了&#xff1a; 可以设…

PHP实现微信小程序状态检测(违规、暂停服务、维护中、正在修复)

实现原理 进入那些状态不正常的小程序会被重定向至一个Url&#xff0c;使用抓包软件抓取这个Url&#xff0c;剔除不必要参数&#xff0c;使用cURl函数请求网页获得HTML内容&#xff0c;根据内容解析出当前APPID的小程序的状态。 代码 <?php// 编码header(Content-type:ap…

数据库被攻击需要注意什么

没想到自己用了一个简单的腾讯虚拟机&#xff0c;里面自己安装了一个 MySQL 数据库也会被黑客攻击。 一、问题现象 小程序访问不了&#xff0c;后台程序报数据库相关的错误。 查看数据库&#xff0c;发现数据库被篡改。 二、问题原因 1、为了可以远程能够访问数据库&#xf…

基于Qt4开发曲线绘制交互软件Plotter

目前市面上有很多曲线绘制软件,但其交互功能较差。比如,想要实现数据的交互,同步联动等,都需要大量繁琐的人工操作。所以讲想开发一款轻量级的曲线绘制交互软件。下面就以此为案例,记录一下基于Qt4的开发过程。 目录 1 需求 2 技术路线 3 开发流程 1 框架搭建 2 菜单…

首家!亚信科技AntDB数据库完成中国信通院数据库迁移工具专项测试

近日&#xff0c;在中国信通院“可信数据库”数据库迁移工具专项测试中&#xff0c;湖南亚信安慧科技有限公司&#xff08;简称&#xff1a;亚信安慧科技&#xff09;数据库数据同步平台V2.1产品依据《数据库迁移工具能力要求》、结合亚信科技AntDB分布式关系型数据库产品&…

[每周一更]-(第61期):Rust入门策略(持续更新)

一门语言的学习&#xff0c;就要从最基本的语法开始认识&#xff0c;再分析不同语言的区别&#xff0c;再加上实战&#xff0c;才能更快的学会&#xff0c;领悟到作者的设计思想&#xff1b; 介绍 Rust编程练习 开发工具VSCode及插件 社区驱动的 rust-analyzerEven Better T…

Java基于SpringBoot的闲一品交易平台

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 大家好&#xff0c;我是程序员徐师兄、今天给大家谈谈基于android的app开发毕设题目&#xff0c;以及基于an…

slickEdit 2022 (v27.0.2)Ubuntu安装以及破解

1去官网下载安装包 SlickEdit 也可以从我这里下载源码包 https://download.csdn.net/download/m0_38012470/88343180 2.解压压缩包并进入根目录 3.sudo ./vsinst 4按住回车不松手一直到显示需要你输入yes的时候 5.一路通过需要输入Y的时候就输入 6.一直到弹出对话框关闭…

Linux的常见指令

目录 pwd命令ls 指令mkdir指令touch指令cd 指令rmdir指令 && rm 指令man指令nanocp指令mv指令cat指令more指令less指令head指令tail指令grep指令热键zip/unzip指令tar指令uname –r指令输出重定向 图形化界面和命令行操作本质都是对操作系统进行直接或间接的操作 pwd命…

在微信公众号怎么实现每日签到功能

在微信公众号中实现每日签到功能&#xff0c;可以为企业或公众号运营者带来许多好处。每日签到功能不仅可以增加用户粘性&#xff0c;提高用户参与度&#xff0c;还可以为公众号带来更多的流量和曝光度。那么&#xff0c;如何在微信公众号中实现每日签到功能呢&#xff1f;本文…

vue3中css使用script中定义的变量

代码 <template><div class"box">haha</div> </template><script setup lang"ts"> const boxWidth 500px </script><style lang"scss"> .box {width: v-bind(boxWidth);height: 200px;background-c…

易优cms小程序插件升级到2.1版本

eyou小程序升级到2.1&#xff0c;主要新增一键获取手机号&#xff0c;统一返回格式等 升级内容&#xff1a; &#xff08;1&#xff09;对全部接口的返回格式做统一化设置 &#xff08;2&#xff09;新增一键获取手机号功能 &#xff08;3&#xff09;新增footprint足迹接口 &…

百度测开初面面试题分享(答案+文档)

1、java常用的异常处理机制 Java常用的异常处理机制有以下几种&#xff1a; 1&#xff09;try-catch-finally语句&#xff1a;用于捕获和处理异常。将可能抛出异常的代码放在try块中&#xff0c;然后在catch块中处理异常。无论是否发生异常&#xff0c;finally块中的代码都会…

长胜证券:怎么跟随主力进出?

跟着现在商场的快速改变和信息的普及化&#xff0c;人们在出资时越来越需求愈加精确的辅导和剖析。尤其是在股票商场&#xff0c;很多人想知道怎么跟从主力进出以获取更高的收益。在这篇文章中&#xff0c;咱们将从多个视点来评论这个论题。 一、了解主力资金的进出方向 首先&…

无涯教程-JavaScript - ISODD函数

描述 如果数字为奇数,则ISODD函数返回TRUE,如果数字为偶数,则返回FALSE。 语法 ISODD (number) 争论 Argument描述Required/OptionalNumber 要测试的值或表达式。 如果number不是整数,则将其截断。 Required Notes 您可以在执行计算之前使用此功能测试单元格的内容。 如果…

BUG:阿里巴巴图标库引入链接后,icon有时候会不显示的话svg下载到本地使用

忽然icon图标就不显示&#xff0c;但是代码、icon链接地址都没有发生变化 解决办法&#xff1a;将icon图标下载到本地&#xff0c;记住前后引用本地的名字要保持一致

软件设计师学习笔记9-进程调度

目录 1. PV操作 1.1进程的同步与互斥 1.1.1互斥 1.1.2同步 1.2 PV操作 1.2.1信号量 1.2.2 PV操作的概念 2.信号量与PV操作 2.1 PV操作与互斥模型 2.2 PV操作与同步模型 2.3 互斥与同步模型结合 3.前趋图与PV操作 1. PV操作 1.1进程的同步与互斥 1.1.1互斥 互斥&…

Apache HTTPD 漏洞复现

文章目录 Apache HTTPD 漏洞复现1. Apache HTTPD 多后缀解析漏洞1.1 漏洞描述1.2 漏洞复现1.3 漏洞利用1.4 获取GetShell1.5 漏洞防御 2. Apache HTTPD 换行解析漏洞-CVE-2017-157152.1 漏洞描述2.2 漏洞复现2.3 漏洞利用2.4 修复建议 3. Apache HTTP Server_2.4.49 路径遍历和…

无涯教程-JavaScript - ISREF函数

描述 如果指定的值是参考,则ISREF函数返回逻辑值TRUE。否则返回FALSE。 语法 ISREF (value) 争论 Argument描述Required/OptionalvalueA reference to a cell.Required Notes 您可以在执行任何操作之前使用此功能测试单元格的内容。 适用性 Excel 2007,Excel 2010,Exce…