vue预览txt

1.本地文件预览,网上很多使用iframe和embed标签的,但是我尝试都不可以,有了解的可以分享下原因。

2.读取txt数据并显示在div中:

2.1 本地txt

javascript 复制代码
<input type="file" ref="file"/>
<div v-html="txtHtml"></div>

  const blob = new Blob([this.$refs.file.files[0]], {type: "text/html"})
              const reader = new FileReader();
              reader.onload = (ev) => {
                const content = ev.target.result.replace(/\n|\r\n/g,"<br/>").replace(/ /g, " &nbsp") // tab 换行 空格
                that.txtHtml=content
              }
              reader.readAsText(blob);

2.2服务器接口传递过来的数据流:

javascript 复制代码
<div v-html="txtHtml"></div>

api(option).then((res)=>{      // 接口  
      const reader = new FileReader()
      reader.onload = function () {
             that.txtHtml=reader.result//获取的数据data
      }
      reader.readAsText(res.data);
});
相关推荐
Geoffwo1 分钟前
DSH-SKILL基础
javascript
小兔子5 分钟前
Integer 的 == 在 100 时是 true,在 1000 时是 false
前端
AI副业搞钱研究所6 分钟前
用 12 组正则写一个骗局话术检测器:权重打分、硬红旗保底和高亮区间合并
javascript
程序员大阳17 分钟前
副队长JavaScript教程(48)-异常处理基础
javascript·异常处理·finally·catch·try
尘世中一位迷途小书童22 分钟前
和 AI 打交道会撞见的一整串词:从大模型到 Agent、RAG、MCP、Skill,一次串清
前端·人工智能
lusklusklusk25 分钟前
Python 全局变量与局部变量区别——global 关键字、__main__ 块与作用域示例
开发语言·前端·python
志尊宝28 分钟前
AI原生前端开发(038):AI辅助的Next.js 15全栈开发
javascript·人工智能·ai-native
产品经理爱开发44 分钟前
AxureShow(艾可秀)国内通用的html托管
前端·人工智能·html·ai编程
jktantan44 分钟前
前端也需要事务:Vue Router 乐观更新、回滚与“过期事务”
前端·javascript·vue.js
怕浪猫1 小时前
K3.1 直追 Astra,先补 13%
前端·javascript·面试