txt文件在线预览不需要下载另外的插件，主要有两种形式，一种是上传完成后实现预览；另一种是后端提供文件下载接口，获取文件在线地址实现预览；
一、上传完成后实现预览
<template><!-- txt文件预览 --><div><el-dialogtitle="文件预览":visible="dialogVisible"show-closeappend-to-bodywidth="60%":before-close="cancelDialog"><input type="file" @change="handleFileChange"><div class="panel-box" v-html="txt"></div><div slot="footer" class="dialog-footer tc"><button class="btn-submit btn-submit-sm" @click="cancelDialog()">关闭</button></div></el-dialog></div>
</template><script>
export default {name:'txtFilePreview',data() {return {dialogVisible:false,txt:'',};},methods: {previewFile(){this.dialogVisible = true;},handleFileChange(e){const file = e.target.files[0];if (!file) {return;}const that = this;const reader = new FileReader();reader.onload = function(e) {that.txt = e.target.result.split('\n').join('<br />');};reader.onerror = function(error) {console.error('Error: ', error);};reader.readAsText(file);},cancelDialog(){this.dialogVisible = false;},}
};
</script><style lang="scss" scoped>
</style>实现效果：
二、后端提供文件下载接口实现预览
<template><!-- txt文件预览 --><div><el-dialogtitle="文件预览":visible="dialogVisible"show-closeappend-to-bodywidth="60%":before-close="cancelDialog"><div class="panel-box" v-html="txt"></div><div slot="footer" class="dialog-footer tc"><button class="btn-submit btn-submit-sm" @click="cancelDialog()">关闭</button></div></el-dialog></div>
</template><script>
export default {name:'txtFilePreview',data() {return {dialogVisible:false,txt:'',};},methods: {previewFile(event,docId) {event.stopPropagation();this.dialogVisible = true;const inParam = {DOC_ID: docId,STAFF_ID: this.$store.getters.staffId,STAFF_NAME: this.$store.getters.staffName,SYS_USER_CODE: this.$store.getters.systemUserCode};const loading = this.$commonUtil.loading.open()this.$txtPreview(this.mciApi.common.file.downFile, { ...inParam }).then(r => {loading.close()// 根据文件地址解析txt文件内容this.$axios.get(r,{responseType:"blob",transformResponse: [async (data)=>{return await this.transformData(data);},],}).then(res=>{res.data.then((data)=>{this.txt = data ? data.split('\n').join('<br />') : '';})})}).catch((e) => {loading.close()})},transformData(data){return new Promise((resolve)=>{let reader = new FileReader();reader.readAsText(data,'UTF-8');reader.onload = ()=>{resolve(reader.result)}})},cancelDialog(){this.dialogVisible = false;},}
};
</script><style lang="scss" scoped>
</style>Tips：
$txtPreview：是封装后的post请求；
this.mciApi.common.file.downFile：是后端提供的文件下载方法，返回一个文件流数据。获取数据后将文件流进行地址转换作为结果返回。
文件流转url地址：
const blob = new Blob([content], { type: 'application/text' });
const url = window.URL.createObjectURL(blob);实现效果：
参考文章：vue3中实现txt格式文件预览(纯前端)_vue3 txt预览-CSDN博客