Browse Source

模板预览功能实现

luckysheet-xiaowang-Intelligen
mk 8 months ago
parent
commit
785a3ba8c1
  1. BIN
      public/test.xlsx
  2. 9
      src/views/modules/base/smartExcel/cpts/excel-add.vue
  3. 87
      src/views/modules/base/smartExcel/cpts/excel-template-confirmation.vue
  4. 2
      src/views/modules/base/smartExcel/cpts/excel-view.vue

BIN
public/test.xlsx

Binary file not shown.

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

87
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 type="primary" @click="showTemplate = false"> </el-button>
<el-button @click="handleCancel"> </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: {

2
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();

Loading…
Cancel
Save