模板预览功能实现

src/views/modules/base/smartExcel/cpts/excel-add.vue

@@ -1,7 +1,7 @@
 <template>
     <!-- 新建任务 -->
     <div class=''>
-        <el-upload :headers="$getElUploadHeaders()" ref="upload" class="upload-btn" :action="uploadUlr" :limit="1"
+        <el-upload :headers="$getElUploadHeaders()" ref="upload" class="upload-btn" :action="uploadUlr" :limit="2"
             :accept="'.xlsx'" :with-credentials="true" :show-file-list="false" :auto-upload="true"
             :on-success="handleExcelSuccess" :before-upload="beforeExcelUpload">
             <template #trigger>
@@ -9,7 +9,8 @@
             </template>
         </el-upload>
         <div v-if="showTemplate">
-            <ExcelTemplateConfirmation :showTemplate="showTemplate" :fileUrl="fileUrl"/>
+            <ExcelTemplateConfirmation :showTemplate="showTemplate" :fileUrl="fileUrl"
+                @handelHideTemplate="handelHideTemplate" />
         </div>
     </div>
 </template>
@@ -27,6 +28,10 @@ export default {
     },
     created() { },
     methods: {
+        handelHideTemplate() {
+            this.showTemplate = false;
+            this.fileUrl = '';
+        },
         handleExcelSuccess(e) {
             if (e.code === 0) {
                 this.showTemplate = true;

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

@@ -1,11 +1,11 @@
 <template>
     <!-- 确认模板 -->
     <div class=''>
-        <el-dialog title="模板确认" :visible.sync="showTemplate" width="50%" >
+        <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="showTemplate = false">取 消</el-button>
+                <el-button @click="handleCancel">取 消</el-button>
-                <el-button type="primary" @click="showTemplate = false">确 定</el-button>
+                <el-button type="primary" @click="handleCancel">确 定</el-button>
             </span>
         </el-dialog>
     </div>
@@ -26,54 +26,51 @@ export default {
             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 = '模板确认'
-            options.data = [
-                {
-                    "name": "Cell", //工作表名称
-                    "color": "", //工作表颜色
-                    "index": 0, //工作表索引
-                    "status": 1, //激活状态
-                    "order": 0, //工作表的下标
-                    "hide": 0,//是否隐藏
-                    "row": 36, //行数
-                    "column": 18, //列数
-                    "defaultRowHeight": 19, //自定义行高其
-                    "defaultColWidth": 73, //自定义列宽
-                    "celldata": [{ r: 0, c: 0, v: { m: "1", v: 'value', bg: "#00FF00", ct: { fa: 'General', t: 'g' } } }], //初始化使用的单元格数据
-                    "config": {
-                        "merge": {}, //合并单元格
-                        "rowlen": {}, //表格行高
-                        "columnlen": {}, //表格列宽
-                        "rowhidden": {}, //隐藏行
-                        "colhidden": {}, //隐藏列
-                        "borderInfo": {}, //边框
-                        "authority": {}, //工作表保护
-
-                    },
-                    "scrollLeft": 0, //左右滚动条位置
-                    "scrollTop": 315, //上下滚动条位置
-                    "luckysheet_select_save": [], //选中的区域
-                    "calcChain": [],//公式链
-                    "isPivotTable": false,//是否数据透视表
-                    "pivotTable": {},//数据透视表设置
-                    "filter_select": {},//筛选范围
-                    "filter": null,//筛选配置
-                    "luckysheet_alternateformat_save": [], //交替颜色
-                    "luckysheet_alternateformat_save_modelCustom": [], //自定义交替颜色	
-                    "luckysheet_conditionformat_save": {},//条件格式
-                    "frozen": {}, //冻结行列配置
-                    "chart": [], //图表配置
-                    "zoomRatio": 1, // 缩放比例
-                    "image": [], //图片
-                    "showGridLines": 1, //是否显示网格线
-                    "dataVerification": {} //数据验证配置
-                },
-            ]
             window.luckysheet.create({
                 ...options,
                 hook: {

src/views/modules/base/smartExcel/cpts/excel-view.vue

@@ -255,8 +255,8 @@ export default {
       let name = files[0].name;
       let suffixArr = name.split('.'),
         suffix = suffixArr[suffixArr.length - 1];
+        debugger
       if (suffix != 'xlsx') return alert('目前只支持导入xlsx文件');
-      let that = this
       LuckyExcel.transformExcelToLucky(files[0], function (exportJson, luckysheetfile) {
         if (exportJson.sheets == null || exportJson.sheets.length == 0) return alert('读取excel文件内容失败, 目前不支持XLS文件!');
         window.luckysheet.destroy();