网站建设进度表怎么做,沐浴露营销软文,线上免费编程课,学校官网查询入口项目中有需要将接口返回的数据流显示出来#xff0c;并高亮显示#xff1b;
1.后端接口返回blob,类型为xml,如图 2.页面中使用pre code标签#xff1a; pre v-ifshowXMLcode classlanguage-xml{{xml}}/code/pre
… 项目中有需要将接口返回的数据流显示出来并高亮显示
1.后端接口返回blob,类型为xml,如图 2.页面中使用pre code标签 pre v-ifshowXMLcode classlanguage-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.xmlvkbeautify.xml(xmlString)
