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文件,里面随便输入些内容
vue3中实现txt格式文件预览(纯前端)_第1张图片

3、使用axios来请求该txt文件
vue3中实现txt格式文件预览(纯前端)_第2张图片
代码中最主要的就是: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>

结果如下
vue3中实现txt格式文件预览(纯前端)_第3张图片
发现他可以成功的拿到文本内容,但是我们文本里不仅有数字,英文,还有中文

4、这个时候我们往txt里写入一些中文
vue3中实现txt格式文件预览(纯前端)_第4张图片
再来看下结果
vue3中实现txt格式文件预览(纯前端)_第5张图片
喔嚯,这个时候出现了乱码,为什么会出现乱码呢???

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

1.直接修改txt的编码为UTF-8,修改方式参考:怎么修改txt文件默认的编码格式?_百度知道
修改完成后结果如下
vue3中实现txt格式文件预览(纯前端)_第6张图片

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

2、在axios上做返回值的编码转换
看了axios的文档发现一个transformResponse字段配置
vue3中实现txt格式文件预览(纯前端)_第7张图片
我们就可以使用这个配置项来对返回的数据做转码,在处理之前先将
vue3中实现txt格式文件预览(纯前端)_第8张图片
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文件
vue3中实现txt格式文件预览(纯前端)_第9张图片
然后再来测试一下,结果如下
vue3中实现txt格式文件预览(纯前端)_第10张图片
结果就是我们最终想要的了,到此txt的预览就完成了,这里只是演示了如何加载txt文本,可以将其做成一个组件,便于以后使用。

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

你可能感兴趣的:(工作学习总结,笔记,javascript,vue3中实现txt格式预览,txt格式文件预览,txt格式预览)