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);
});
相关推荐
小盐巴小严21 分钟前
正则表达式
javascript·正则表达式
Samuel-Gyx38 分钟前
前端 CSS 样式书写与选择器 基础知识
前端·css
天天打码1 小时前
Rspack:字节跳动自研 Web 构建工具-基于 Rust打造高性能前端工具链
开发语言·前端·javascript·rust·开源
AA-代码批发V哥1 小时前
正则表达式: 从基础到进阶的语法指南
java·开发语言·javascript·python·正则表达式
字节高级特工1 小时前
【C++】”如虎添翼“:模板初阶
java·c语言·前端·javascript·c++·学习·算法
小冻梨!!!2 小时前
Spark,在shell中运行RDD程序
大数据·javascript·spark
大猫会长2 小时前
lenis滑动插件的笔记
javascript
db_lnn_20212 小时前
【vue】全局组件及组件模块抽离
前端·javascript·vue.js
Qin_jiangshan2 小时前
vue实现进度条带指针
前端·javascript·vue.js
天高任鸟飞dyz2 小时前
tabs切换#
javascript·vue.js·elementui