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);
});
相关推荐
狸礼li4 分钟前
web网站设计作品--第二大脑
前端
2603_9552797014 分钟前
C++23新特性在CLion中的实战体验
前端·javascript·c++23
梨子同志16 分钟前
HTTP
前端
kidding72327 分钟前
旋转大转盘小程序
前端·css·微信小程序·小程序·前端框架
道友可好28 分钟前
Claude Code 泄露源码里的 89 个秘密
前端·人工智能·后端
Tian_Hang34 分钟前
Eclipse Ditto 的权限策略
java·服务器·前端·网络·ide·ubuntu·eclipse
叩码以求索39 分钟前
经典算法实例分析:写字符串需要的行数
开发语言·javascript·ecmascript
lichenyang4531 小时前
从 0 新增一个 `has.echo`:我如何理解小程序容器里的 API 调用链路
前端
leptune2 小时前
Mac 使用 Microsoft Word 批量将 DOCX 转 PDF(保持原排版)
前端
大龄秃头程序员2 小时前
Flutter 长列表 1 万条滑动卡顿治理:Baseline vs Optimized 可跑 Demo
前端