IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 前端上传xml文件后,前端自行将上传的xml跳转展示到浏览器上 -> 正文阅读

[JavaScript知识库]前端上传xml文件后,前端自行将上传的xml跳转展示到浏览器上

问题描述:

在这里插入图片描述
在这里插入图片描述

解决步骤:
1.之前想要在点击view按钮跳转时将xml文件的file对象传递给预览页在预览页进行读取xml内容,但是传递file对象很难实现(如果有人实现了 可以告诉我一下吗 学习下 感谢!)file对象
2.之后我就在上传页那里进行读取xml文件 获取到他的文件内容(字符串类型),然后将字符串内容存储在session里(感觉不友好,但还没想到怎么解决,如有人知道 望告知 感谢!)。然后进行页面跳转到预览页

//上传事件
importInfo(param) {
      var that = this
       // 重置session里的fileString 
       sessionStorage.removeItem('fileString')
       ...
        getHtml(fd).then(res=>{
        // 跳转到xml页面显示
           this.readXML(param.file)
        })
}
// 点击view 跳转到展示xml页面
    toXmlView() {
      // 跳转到xml页面显示
	      //this.readXML(this.paramFiles) --放在上传事件时执行 不然会出现异步问题(session里的fileString 还没获取到就跳转页面了)
	      // 获取xml成功后在跳转页面
		if(sessionStorage.getItem('fileString')==null){
		  this.$message({
		    message: 'Wait a minute, getting the XML file',
		    type: 'warning'
		  });
		}else{
		  let routeData = this.$router.resolve({
		    name: `uploadXml`,
		  });
		  window.open(routeData.href, '_blank')
		}
    },
    // 前端获取上传的xml文件内容
    readXML(files) {
      let that = this
      var reader = new FileReader();//新建一个FileReader
      console.log('files', files)
      reader.readAsText(files, "UTF-8");//读取文件
      reader.onload = function (evt) { //读取完文件之后会回来这里
        var fileString = evt.target.result; // 读取文件内容(字符串)
        console.log('fileString-打印是字符串', fileString)
        sessionStorage.setItem('fileString', fileString)

        // var xmlDoc = null; //元素标签格式
        // if (window.DOMParser) {
        //   var parser = new DOMParser();
        //   xmlDoc = parser.parseFromString(fileString, "text/xml");
        // } else {
        //   //IE
        //   xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        //   xmlDoc.async = "false";
        //   xmlDoc.loadXML(fileString);
        // }
        // console.log('xmlDoc-打印是dom元素标签', xmlDoc)
      }

    },

打印结果展示
在这里插入图片描述
在这里插入图片描述
(之前想在预览页通过fileString获取xmlDoc,直接使用xmlDoc页面展示,但不知道咋用=_=)
3.下载npm install vkbeautify --save(格式化xml字符串)
npm i vue-highlight.js --save(调整样式且在xml标签里添加html标签 使之能在页面显示)
在main.js中引入在这里插入图片描述

在预览页的vue页面中引入 import vkbeautify from ‘vkbeautify’
在这里插入图片描述

结果展示:
在这里插入图片描述

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-05-12 16:23:29  更:2022-05-12 16:25:25 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 20:29:20-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码