epmet-work-pc/src/views/modules/base/smartExcel/cpts/excel-template-confirmation.vue

<template>
    <!-- 确认模板 -->
    <div class=''>
        <el-dialog title="模板确认" :visible.sync="showTemplate" width="50%" :close-on-click-modal="false">
            <div id="luckysheet"></div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleCancel">取 消</el-button>
                <el-button type="primary" @click="handleCancel">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import LuckyExcel from 'luckyexcel';
import options from "@/utils/luckysheetConfig.js";

export default {
    data() {
        return {};
    },
    created() { },
    methods: {
        handleCellEditBefore(e) {
            this.drawer = true;
            let column = parseInt(e[0].column[0]) + 1, row = parseInt(e[0].row[0]) + 1;
            this.selectedCell = "第" + row + "行" + "第" + column + "列";
        },
        async urlToFile(url, fileName = 'file') {
            try {
                // 使用 fetch 获取文件数据
                const response = await fetch(url);
                // 检查请求是否成功
                if (!response.ok) {
                    throw new Error(`HTTP error! status: ${response.status}`);
                }
                // 转换为 Blob 对象
                const blob = await response.blob();
                // 根据 Blob 创建 File 对象
                const file = new File([blob], fileName, { type: 'excel/xlsx' });

                this.uploadExcel(file)
            } catch (error) {
                console.error('Error fetching or converting file:', error);
                throw error;
            }
        },
        uploadExcel(files) {
            console.log(files,'files');
            if (!files) return alert('没有文件等待导入');
            LuckyExcel.transformExcelToLucky(files, function (exportJson, luckysheetfile) {
                if (exportJson.sheets == null || exportJson.sheets.length == 0) return alert('读取excel文件内容失败, 目前不支持XLS文件!');
                window.luckysheet.destroy();
                window.luckysheet.create({
                    ...options,
                    data: exportJson.sheets,
                    title: exportJson.info.name,
                    hook: {

                    },
                });
            });
        },
        handleCancel(){
            this.$emit('handelHideTemplate')
        }
    },
    mounted() {
        console.log(this.fileUrl, 'fileUrl===');
        this.urlToFile('http://localhost:9001/epmet-work-pc/test1.xlsx')
        this.$nextTick(() => {
            window.luckysheet.destroy();
            options.title = '模板确认'
            window.luckysheet.create({
                ...options,
                hook: {
                    cellEditBefore: this.handleCellEditBefore,
                },
            });
        })

    },
    props: {
        showTemplate: {
            type: Boolean,
            default: false
        },
        fileUrl: {
            type: String,
            default: ''
        }
    },
    components: {},
    computed: {},
    watch: {},
}
</script>

<style lang='scss' scoped>
#luckysheet {
    height: 500px;
}
</style>