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);
});
相关推荐
ZC跨境爬虫17 分钟前
跟着 MDN 学CSS day_32:(Web字体深度解析与实践指南)
前端·javascript·css·ui·html
sugar__salt21 分钟前
JavaScript 数组去重全解:6 种核心方法
javascript
砍材农夫27 分钟前
物联网 基于netty核心实战-安全tls
java·开发语言·前端·物联网·安全
SEO_juper27 分钟前
JavaScript 渲染:AI 智能体无法读取,直接影响收录
开发语言·前端·javascript·aigc·seo·跨境电商·geo
whuhewei29 分钟前
一道React缓存的题目
javascript·react.js
i220818 Faiz Ul37 分钟前
在线预约导游|基于SSM+vue的在线预约导游系统(源码+数据库+文档)
java·前端·数据库·vue.js·spring boot·毕设·在线预约导游系统
ZC跨境爬虫38 分钟前
跟着 MDN 学CSS day_35:浮动布局完全指南
前端·css·ui·html·tensorflow
魔士于安42 分钟前
红色文化馆技术文档
前端·unity·游戏引擎·贴图·模型
何何____1 小时前
js的数据存储机制
开发语言·前端·javascript·ecmascript