vue中预览xml并高亮显示

news2025/2/28 21:19:52

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

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.result
         that.$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.coloradmin.cn/o/1000028.html

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

相关文章

电阻和电容

目录 1、常见的电阻器 2、电容 ​编辑 1、常见的电阻器 对于电阻需要了解三个参数&#xff08;查询电阻的数据手册&#xff09;&#xff1a; 1、封装&#xff1a;就是电阻的尺寸或者大小&#xff0c;看焊在你的pcb板上是否合适。 2、标称&#xff1a;电阻的电阻大小、精度、…

学习笔记-静态路由配置有来无回导致无法访问目标IP

配置拓扑图&#xff1a; 已经在R1、R2、R3相应端口配置了相应IP。 在R2上配置静态路由&#xff1a; [R2]ip route-static 10.0.3.0 24 10.0.23.3 [R2]ip route-static 10.0.13.0 24 10.0.23.3执行tracert 10.0.3.3&#xff0c;可以到达目标IP 执行tracert 10.0.13.3&#xff…

夯实网络安全基石,筑牢网络安全防线

没有网络安全就没有国家安全&#xff0c;这句话我们常常能在各种新闻里看见。安全是发展的前提&#xff0c;发展是安全的保障&#xff0c;共同推进安全和发展。Z强调&#xff1a;“要坚持依法治网、依法办网、依法上网。”今年的国家网络安全宣传周在9月11日至17日全国范围内开…

win11右键任务栏没有任务管理器怎么办

大多数情况下&#xff0c;我们可以直接右击任务栏选择任务管理器打开&#xff0c;但是有小伙伴反映win11中右击任务栏没有任务管理器&#xff0c;遇到这种问题该怎么解决呢&#xff0c;这里小编就给大家详细介绍一下win11右击 任务栏没有任务管理器的解决方法&#xff0c;有需要…

HuTool 使用教程

HuTool 官网 Hutool — &#x1f36c;A set of tools that keep Java sweet. 一、简介 准备环境 Hutool是一个小而全的Java工具类库&#xff0c;通过静态方法封装&#xff0c;降低相关API的学习成本&#xff0c;提高工作效率&#xff0c;使Java拥有函数式语言般的优雅&#xff…

SQL 注入漏洞攻击

文章目录 1. 介绍2. 无密码登录3. 无用户名无密码登录4. 合并表获取用户名密码 1. 介绍 假设你用自己的用户名和密码登录了一个付费网站&#xff0c;网站服务器就会查询一下你是不是 VIP 用户&#xff0c;而用户数据都是放在数据库中的&#xff0c;服务器通常都会向数据库进行查…

NLP信息抽取全解析:从命名实体到事件的PyTorch实战指南

目录 引言背景和信息抽取的重要性文章的目标和结构 信息抽取概述什么是信息抽取信息抽取的应用场景信息抽取的主要挑战 实体识别什么是实体识别实体识别的应用场景PyTorch实现代码输入、输出与处理过程 关系抽取什么是关系抽取关系抽取的应用场景PyTorch实现代码输入、输出与处…

松下DC-GH6 MOV音频使用可变长且存在00的特殊案例分析

松下mov常见的是GH系列机型&#xff0c;其音频格式一般采用SOWT其实是PCM&#xff0c;只不过一般是一个声道TRAK&#xff08;左右两个声道合成到一个TRAK中&#xff09;。此次遇到的DC-GH6却是一个4声道独立TRAK的松下MOV文件&#xff0c;这种的倒是在索尼上也有遇到过&#xf…

Python(PySpark案例实战)

为什么要学习PySpark&#xff1f; Spark对Python语言的支持&#xff0c;重点体现在&#xff0c;Python第三方库&#xff1a;PySpark之上。 PySpark是由Spark官方开发的Python语言第三方库。 Python开发者可以使用pip程序快速的安装PySpark并像其它三方库那样直接使用。 PySp…

小谈设计模式(1)—总序

小谈设计模式&#xff08;1&#xff09;—总序 开始操作设计模式总论设计模式是什么组成要素模式名称问题描述解决方案效果描述 设计模式有什么作用提供可重用的解决方案提高代码的可读性和可维护性促进代码的可扩展性提高代码的灵活性和可重用性促进团队合作和沟通作用总结 为…

基于SpringBoot的新闻管理系统

基于SpringBoot的新闻管理系统【附源码文档】、前后端分离系统 开发语言&#xff1a;Java数据库&#xff1a;MySQL技术&#xff1a;SpringBootVue工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 【主要功能】 前台 首页新闻信息校园论坛留言交流个人中心 后台 个人中心用…

报错:数组明明有内容但打印的length是0,学会使用 async 和 await 解决问题

文章目录 一、问题二、分析三、解决1.将异步改为同步2.设置延迟 一、问题 在日常开发中&#xff0c;for 循环遍历调用接口&#xff0c;并将接口返回的值进行拼接&#xff0c;即push到一个新的数组中&#xff0c;但是在for循环内部是可以拿到这个新的数组&#xff0c;而for循环…

“投资教父”熊晓鸽老了,IDG光环不再

作者 | 鸠白 艺馨 排版 | Cathy 监制 | Yoda 出品 | 不二研究 2017年&#xff0c;世界互联网大会上&#xff0c;“投资教父”熊晓鸽问映客的创始人&#xff1a;“今年你们利润能有多少&#xff1f;” 对方笑答&#xff1a;“5个亿吧&#xff01;” “才五个亿&#xff1f…

产品MC动画宣传片制作团队安排

在产品MC动画宣传片的制作过程中&#xff0c;通常需要组建一个专业的团队&#xff0c;以确保各个方面的工作能够高效完成。以下是一个常见的产品MC动画宣传片制作团队的安排&#xff1a; 1.制片人&#xff08;Producer&#xff09;&#xff1a;负责项目的整体策划和管理&#…

华为云云耀云服务器L实例评测|有关华为云云耀云服务器L实例你可能不知道的事情

前言 最近华为云推出了华为云云耀云服务器L实例。主打一个轻量级云服务器&#xff0c;即开即用&#xff0c;轻松运维&#xff0c;开启简单上云第一步。具有智能不卡顿&#xff0c;价优随心用&#xff0c;上手更简单&#xff0c;管理特省心。 在推出的第一时间我就买了一台来耍…

H5移动端选择器,layPicker移动端日期选择器,jquery移动端自定义选择器

前言 基于jquery实现的&#xff0c;H5移动端选择器 默认自带日期选择&#xff0c;可自定义选择&#xff0c;和自定义html 效果图 微信模拟版 旧版 使用方式简单 layPicker.init({elem: #year, // 绑定元素options: year, // 设置为日期选择器&#xff08;日期选择器可设…

芯科蓝牙BG27开发笔记2-调试第一个程序

soc-Blinky程序去掉bootloader功能之后就可以下载运行了&#xff0c;但是时不时会在连接的时候死机&#xff0c;进入debug&#xff0c;发现&#xff1a; 查代码&#xff0c;该函数被注册到io stream中&#xff0c;但它是在app.c中调用app_log时实际调用&#xff0c;例如&#x…

bug总结问题集和知识点集

目录 一 bug问题集1. 端口被占用 二 oracle1. oracle查看版本怎么操作2. oracle数据库&#xff1a;参数个数无效![在这里插入图片描述](https://img-blog.csdnimg.cn/6a2eebc164f9406c81525371893bbd11.png) 三 mybatis1. mybatis用注解如何实现模糊查询 四 List1. 如何判断Jav…

Kubernetes 部署发布镜像(cubefile:0.4.0)

目录 实验&#xff1a;部署发布镜像&#xff08;cubefile:0.4.0&#xff09; 需求分析&#xff1a; 1、部署Kubenetes环境&#xff1a; 2、撰写 cubefile-deployment.yaml 文件 代码解释&#xff1a; 遇到的问题&#xff1a; 问题解决 &#xff1a; 3、撰写 cubefile-se…

SSL证书验签时要带www吗?

单域名证书&#xff1a;顶级域名如www.abc.com或abc.com 不管你提交订单的时候填写的域名是带www或不带www的域名&#xff0c;签发的证书均支持www和不带www的域名 单域名证书&#xff1a;子域名如mail.abc.com&#xff0c;签发的证书仅支持mail.abc.com 通配符证书&#xff…