vue3中实现txt格式文件预览(纯前端)

前言

在平常的工作当中，已经会遇到文件上传后需要预览的功能，比如docx,doc,xls,xlsx,ppt,pdf,txt,图片,视频等格式的文件，其实也可以让后端人员写接口解析，本着不想麻烦别人的心态，能自己解决的绝不麻烦别人，这里简单介绍txt,docx,xlsx,mp4文件预览。

一、txt文本预览

1、在vue项目中安装axios

 npm i axios -S  或 yarn add axios 

2、 准备一个txt文件，里面随便输入些内容

3、使用axios来请求该txt文件

代码中最主要的就是：responseType:“text” 这块的设置

页面完整代码如下

<template>
    <div class="txt" style="white-space: pre-wrap;">{{ textContent }}</div>
</template>
<script setup lang="ts">
    import { ref } from 'vue';
    import axios from 'axios';
 
    const textContent = ref<any>("");
    //这里可以是http地址，也可以是本地地址
    const url = "http://10.3.1.171:7878/123.txt";
    axios.get(url,{
        responseType:"text",
    }).then(res=>{
        textContent.value = res.data;
    })
 
</script>

结果如下

发现他可以成功的拿到文本内容，但是我们文本里不仅有数字，英文，还有中文

4、这个时候我们往txt里写入一些中文

再来看下结果

喔嚯，这个时候出现了乱码，为什么会出现乱码呢？？？

原因很简单，axios用的默认编码为UTF-8,而txt的默认编码为ANSI,也就是GBK，明白了错误的原因就好办了，解决方法有两种

1.直接修改txt的编码为UTF-8，修改方式参考：怎么修改txt文件默认的编码格式？_百度知道
修改完成后结果如下

发现结果是我们想要的，你以为到这里就一切都结束了么？NO,NO,NO,这种方式不推荐，我们不可能每个文件都去设计编码，我们追求的就是要完美，永不加班…硬着头皮继续往下干,怀着一颗匠心精神的我必须打磨好自己的艺术品，哈哈，于是就有了第二种解决方案。

2、在axios上做返回值的编码转换
看了axios的文档发现一个transformResponse字段配置

我们就可以使用这个配置项来对返回的数据做转码，在处理之前先将

responseType设置为blob，我们改用流的方式来实现，下面是完整代码

<template>
    <div><div class="txt" style="white-space: pre-wrap;">{{ textContent }}</div></div>
</template>
<script setup lang="ts">
    import { ref } from 'vue';
    import axios from 'axios';
 
 
    const textContent = ref<any>("");
 
    const url = "http://10.3.1.171:7878/123.txt";
 
 
    const transformData = (data:any)=>{
        return new Promise((resolve)=>{
            let reader = new FileReader();
            reader.readAsText(data,'GBK');
            reader.onload = ()=>{
                resolve(reader.result)
            }
        })
    }
 
    axios.get(url,{
        responseType:"blob",
        transformResponse: [
            async function (data) {
                return await transformData(data);
            },
        ],
    }).then(res=>{
        res.data.then((data:any)=>{
            textContent.value = data;
        })
    })
 
</script>

这里使用的promise来返回fileReader读取到的数据，在fileReader中设置编码为GBK，这样编码 就同txt保持一致了，接下来
我们再来重新创建一个txt文件

然后再来测试一下，结果如下

结果就是我们最终想要的了，到此txt的预览就完成了，这里只是演示了如何加载txt文本，可以将其做成一个组件，便于以后使用。

原文链接：https://blog.csdn.net/qq_25519615/article/details/133024088