vue2项目中在线预览csv文件

news2024/12/23 13:55:17

简介

希望在项目中，在线预览.csv文件，本以为插件很多，结果都只是支持excel（.xls、.xlsx）一到.csv就歇菜。。。

关于文件预览

vue-office：文档、查看在线演示demo，支持docx、.xlsx、pdf、pptx格式，优势可以vue组件形式嵌入系统，只需要普通文档预览使用这个足矣。

univer：文档、查看在线演示demo、支持docx、.xlsx、pdf、pptx格式，以.xlsx为主，不如vue-office接入简单，也不如kkFileView、OnlyOffice支持的格式丰富。

kkFileView：文档、查看在线演示demo、大部分格式都支持，但需要后端部署，优势比OnlyOffice支持格式更多。

OnlyOffice：文档、vue3组件、大部分格式都支持，但需要后端部署，优势有vue3组件。

效果

简单粗暴无需手动添加样式，引入调用即可。
heiho.js github ：用于渲染弹窗
PapaParse github：用于解析csv文件
在这里插入图片描述

源码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="referrer" content="no-referrer" />
    <meta name="viewport"
        content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
    <title>vue2项目中在线预览csv文件</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kktsvetkov/heiho@0.3.3/heiho.css" />
    <style>
        /* 页面所需样式 */
        html,
        body,
        #app {
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .cardBox {
            width: 50%;
            border-radius: 8px;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding-top: 20px;
            margin: 0 auto;
        }
    </style>
</head>

<body style="background: #eee;">
    <div id="app" class="pt10">
        <div class="cardBox pl10 pr10 pt15 pb15 borBox bgf ml12 mr12 mb12 fz16">
            <p>在线预览csv文件</p>
            <button @click="viewForUrl">通过在线可访问的csv地址的方式</button>
            <br />
            <button @click="viewForFlie">通过接口返回csv文件流的方式</button>
        </div>
    </div>
</body>

<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
<!-- 引入heiho -->
<script src="https://cdn.jsdelivr.net/npm/@kktsvetkov/heiho@0.3.3/heiho.min.js"></script>
<!-- 引入papaparse -->
<script src="https://cdn.jsdelivr.net/npm/papaparse@5.4.1/papaparse.min.js"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {

            }
        },
        created() {

        },
        mounted() {

        },
        methods: {
            // 在线可访问的csv文件，可通过路径方式预览
            viewForUrl(){
                Papa.parse(
                    'https://support.staffbase.com/hc/en-us/article_attachments/360009197071/email.csv', 
                    {
                        download: true,
                        complete: function(results) {
                            const data = results.data;
                            // 渲染组件
                            Heiho(data, { max: data.length });
                        }
                    }
                );
            },
            // 无法访问的文件，通过接口拿到文件流的方式预览
            viewForFlie(){
                fetch('https://support.staffbase.com/hc/en-us/article_attachments/360009197071/email.csv')
                .then(response => {
                    if (response.ok) {
                        return response.blob();
                    }
                    throw new Error('Network response was not ok.');
                })
                .then(blob => {
                    Papa.parse(
                        blob, 
                        {
                            complete: function(results) {
                                const data = results.data;
                                // 渲染组件
                                Heiho(data, { max: data.length, title: 'email.csv' });
                            }
                        }
                    );
                })
            }
        }
    })
</script>

</html>