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);
});
相关推荐
喵叔哟几秒前
5. 【Blazor全栈开发实战指南】--Blazor组件基础
开发语言·javascript·ecmascript
sunny_20 分钟前
📖 2026年 大厂前端面试手写题库已开源(2.3k star)
前端·面试·github
IT_陈寒38 分钟前
Vue组件复用率提升300%?这5个高阶技巧让你的代码焕然一新!
前端·人工智能·后端
We་ct1 小时前
LeetCode 79. 单词搜索:DFS回溯解法详解
前端·算法·leetcode·typescript·深度优先·个人开发·回溯
ujainu1 小时前
Electron 实战:将用户输入保存到本地文件 —— 基于 `fs.writeFileSync` 与 IPC 的安全写入方案
javascript·安全·electron
小奶包他干奶奶1 小时前
将svg对象化,并动态修改svg图标的颜色、尺寸等
前端·html
Lee川1 小时前
React 快速入门:Vue 开发者指南
前端·vue.js·react.js
进击的尘埃2 小时前
基于 LangChain.js 的前端 Agent 工作流编排:Tool 注册、思维链可视化与多步推理的实时 DAG 渲染
javascript
用户6158139695162 小时前
Elpis: 基于vue3+webpack5+nodejs搭建一个完整项目
前端
90后的晨仔2 小时前
S C:\WINDOWS\system32> pnpm i -g openclaw@latest pnpm : 无法加载文件 C:\xx\A
前端