腳本之家服務器常用軟件

快捷導航

vue中實現(xiàn)支持txt,docx,xlsx,mp4格式文件預覽功能(純前端)

更新時間：2023年11月27日 10:12:23 作者：朱顏辭鏡、

對于Vue你可以實現(xiàn)文件的預覽功能,這篇文章主要給大家介紹了關于vue中實現(xiàn)支持txt,docx,xlsx,mp4格式文件預覽功能的相關資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

前言

在平常的工作當中，已經(jīng)會遇到文件上傳后需要預覽的功能，比如docx,doc,xls,xlsx,ppt,pdf,txt,圖片,視頻等格式的文件，其實也可以讓后端人員寫接口解析，本著不想麻煩別人的心態(tài)，能自己解決的絕不麻煩別人，這里簡單介紹txt,docx,xlsx,mp4文件預覽。

一、txt文本預覽

1.在vue項目中安裝axios npm i axios -S 或 yarn add axios

2. 準備一個txt文件，里面隨便輸入些內容

3. 使用axios來請求該txt文件

頁面完整代碼如下

<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>

結果如下

發(fā)現(xiàn)他可以成功的拿到文本內容，但是我們文本里不僅有數(shù)字，英文，還有中文

4.這個時候我們往txt里寫入一些中文

再來看下結果

喔嚯，這個時候出現(xiàn)了亂碼，為什么會出現(xiàn)亂碼呢？？？

原因很簡單，axios用的默認編碼為UTF-8,而txt的默認編碼為ANSI,也就是GBK，明白了錯誤的原因就好辦了，解決方法有兩種

1.直接修改txt的編碼為UTF-8，修改方式參考：怎么修改txt文件默認的編碼格式？_百度知道

修改完成后結果如下

發(fā)現(xiàn)結果是我們想要的，你以為到這里就一切都結束了么？NO,NO,NO,這種方式不推薦，我們不可能每個文件都去設計編碼，我們追求的就是要完美，永不加班...硬著頭皮繼續(xù)往下干,懷著一顆匠心精神的我必須打磨好自己的藝術品，哈哈，于是就有了第二種解決方案

2.在axios上做返回值的編碼轉換

看了axios的文檔發(fā)現(xiàn)一個transformResponse字段配置

我們就可以使用這個配置項來對返回的數(shù)據(jù)做轉碼，在處理之前先將

responseType設置為blob，我們改用流的方式來實現(xiàn)，下面是完整代碼

<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讀取到的數(shù)據(jù)，在fileReader中設置編碼為GBK，這樣編碼就同txt保持一致了，接下來

我們再來重新創(chuàng)建一個txt文件

然后再來測試一下，結果如下

結果就是我們最終想要的了，到此txt的預覽就完成了，這里只是演示了如何加載txt文本，可以將其做成一個組件，便于以后使用

二、docx文件預覽

docx文件的預覽我們借用第三方插件@vue-office/docx 來處理 ,這里我們直接做成一個組件，子組件提供一個url即可，代碼如下

先使用yarn或npm安裝@vue-office/docx

<!--  docx文檔查看器 -->
<template>
    <teleport to="body">
        <div  class="sx-docx-wrapper change-y-translate">
            <vue-office-docx :src="url" style="height: 100%; margin: 0; padding: 0"  @rendered="rendered"/>
            <span class="icon-close" @click="emits('close')"></span>
        </div>
    </teleport>
</template>
<script  lang="ts" setup>
    //引入VueOfficeDocx組件
    import VueOfficeDocx from "@vue-office/docx";
    //引入相關樣式
    import "@vue-office/docx/lib/index.css";
    const props = defineProps({ 
        url:{
            type:String,
            default:""
        }
    })
    const emits = defineEmits<{
        (e:"close"):void
    }>()
    const rendered = ()=>{
        console.log("渲染完成");
    }
</script>
<style lang="scss" scoped>
    .sx-docx-wrapper{
        position:fixed;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.6);
        overflow:hidden;
        top:0;
        left:0;
        z-index:9999;
        display:flex;
        justify-content:center;
        align-items:center;
        .icon-close{
            position:absolute;
            top:10px;
            right:20px;
            width:30px;
            height:30px;
            background:url("/img/close.png") center no-repeat;
            background-size:100%;
            cursor:pointer;
        }
    }
</style>

實現(xiàn)效果如下

三、xlsx文件預覽

實現(xiàn)的方法跟docx差不多,只是插件不一樣

1、 npm i @vue-office/excel 或 yarn add @vue-office/excel

2、代碼封裝如下

<!--  excel文檔查看器 -->
<template>
    <teleport to="body">
        <div  class="sx-excel-wrapper change-y-translate">
            <vue-office-excel
                :src="url"
                @rendered="renderedHandler"
                @error="errorHandler"
                style="width:80%;"
            />
            <span class="icon-close" @click="emits('close')"></span>
        </div>
    </teleport>
</template>
<script  lang="ts" setup>
 
    //引入VueOfficeExcel組件
    import VueOfficeExcel from "@vue-office/excel";
    //引入相關樣式
    import "@vue-office/excel/lib/index.css";
 
    const props = defineProps({ 
        url:{
            type:String,
            default:""
        }
    })
 
 
    const emits = defineEmits<{
        (e:"close"):void
    }>()
 
    const renderedHandler = ()=>{
        console.log("渲染完成");
    }
 
    const errorHandler = ()=>{
        console.log("渲染失敗");
    }
   
    
</script>
<style lang="scss" scoped>
    .sx-excel-wrapper{
        position:fixed;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.6);
        overflow:hidden;
        top:0;
        left:0;
        z-index:9999;
        display:flex;
        justify-content:center;
        align-items:center;
 
        .icon-close{
            position:absolute;
            top:10px;
            right:20px;
            width:30px;
            height:30px;
            background:url("/img/close.png") center no-repeat;
            background-size:100%;
            cursor:pointer;
        }
    }
</style>

運行效果如下

四、mp4文件預覽

mp4預覽我們借用西瓜視頻插件來實現(xiàn)

1、安裝xgplayer yarn add xgplayer 或者 npm i xgplayer

2.封裝代碼如下

<!-- 西瓜視頻播放器插件 https://h5player.bytedance.com/guide/#%E5%AE%89%E8%A3%85 -->
<template>
    <teleport to="body">
        <div  class="sx-xgplayer-wrapper change-y-translate">
            <div class="video-section">
                <div id="video"></div>
                <span class="icon-close" @click="emits('close')"></span>
            </div>
        </div>
    </teleport>
</template>
<script  lang="ts" setup>
    import Player, { Events } from 'xgplayer'
    import 'xgplayer/dist/index.min.css';
    import { onMounted,onUnmounted } from 'vue';
 
    let player:any = null;
    const props = defineProps({ 
        url:{
            type:String,
            default:""
        }
    })
 
    const emits = defineEmits<{
        (e:"close"):void
    }>()
 
 
    onMounted(()=>{
        player = new Player({
            id: 'video',
            url: props.url,
            height: '100%',
            width: '100%',
            lang:'zh-cn'
        })
    })
 
    onUnmounted(()=>{
        player.destroy() // 銷毀播放器
        player = null // 將實例引用置空
    })
 
   
    
</script>
<style lang="scss" scoped>
    .sx-xgplayer-wrapper{
        position:fixed;
        width:100%;
        height:100%;
        background:rgba(0,0,0,0.6);
        overflow:hidden;
        top:0;
        left:0;
        z-index:9999;
        display:flex;
        justify-content:center;
        align-items:center;
 
        .video-section{
            width:1200px;
            height:660px;
            background:#000;
            padding:20px;
            position:relative;
            box-shadow: 0 1px 8px 1px #5c5c5c;
        }
 
        .icon-close{
            position:absolute;
            top:10px;
            right:10px;
            width:20px;
            height:20px;
            background:url("/img/close.png") center no-repeat;
            background-size:100%;
            cursor:pointer;
        }
    }
</style>

相關的配置項請自行參考西瓜開發(fā)文檔，文檔地址在代碼中喲！??！

來看看實現(xiàn)的效果吧