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);
});
相关推荐
Apifox11 分钟前
Apifox 6 月更新|Apifox CLI 全面升级、导入导出优化、OAuth 2.0 支持自动刷新令牌
前端·后端·测试
CodingSpace21 分钟前
TypeScript 装饰器
前端
宸翰24 分钟前
解决 uni-app App 端 vue-i18n 占位符丢失:封装跨端可用的 tf 格式化方法
前端·vue.js·uni-app
systemPro31 分钟前
光储充系统数据流全解析:PV / ESS / GRID 数据怎么流转,线损怎么算
前端
用户298698530141 小时前
在 React 中使用 JavaScript 将 Excel 转换为 PDF
javascript·react.js·webassembly
古茗前端团队2 小时前
急招!前端|测试|后端|产品(名额多,速来)
前端·后端·架构
Lsx_3 小时前
不只是 Prompt:用 Superpowers Skill 给 AI 编程装上工程化工作流
前端·ai编程·claude
用户938515635073 小时前
从 Prompt 到 Harness:AI 工程化的三年跃迁与实战解码
javascript·人工智能
小碗细面3 小时前
前端 Prompt 工程实战:如何搭建场景化 Prompt 库
前端·ai编程
阿瑞IT3 小时前
2026年 AI Agent 生产化落地全景:四大高频故障根因分析与工程解法
前端