vue 实现 excel预览功能

2025-10-27 20:29:07

1、vue 中引入 import XLSX from 'xlsx';

vue 实现 excel预览功能

2、<template>

<a-modal  title="预览">

            <div class="home">

                <div v-html="tableau" id="excelView"></div>

            </div>

        </a-modal>

</template>

3、   vue 调用方法

vue 实现 excel预览功能

4、设置Excel转成HTML后的样式

vue 实现 excel预览功能

5、  /**标题样式 */

    /deep/ .class4Title {

        font-size: 18px !important;

        font-weight: bold !important;

        padding: 10px !important;

        border: 1px solid #e8e8e8;

        text-align: center;

    }

    /deep/ .class4TableTh {

        font-size: 12px !important;

        font-weight: bold !important;

        padding: 10px !important;

        border: 1px solid #e8e8e8;

        text-align: center;

        white-space: break-spaces

    }

vue 实现 excel预览功能

6、实现预览效果

vue 实现 excel预览功能

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢