java_project
/
logpm_page
4
1
Fork 0
Code Issues Pull Requests Activity
Browse Source

优化导出

dev
qb 1 week ago
parent
3abcd2f72e
commit
b4afc69b09
4 changed files with 27 additions and 106 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 113
      src/utils/exportData.js
  2. 6
      src/views/finance/MerchantDepositSlip.vue
  3. 7
      src/views/supervise/classify.vue
  4. 7
      src/views/supervise/management.vue

113
src/utils/exportData.js
Unescape View File

@ -18,7 +18,7 @@ export function exportExcel(columnList = [], listData = [], name = 'excel') {
for (let i = 0; i < columnList.length; i++) {
const val = columnList[i];
if (blackArr.includes(val.label)) continue;
if (blackArr.includes(val.label) || val.head) continue;
if (j === 0) headers.push(val.label);
arr.push(item[val.prop] || '');
@ -42,9 +42,9 @@ export function exportExcel(columnList = [], listData = [], name = 'excel') {
// 1.所有表头的宽度
const headsWidth = headers.map(value => {
if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) {
return (parseFloat(value.toString().length * 2.1) + 4).toFixed(2);
return parseFloat(value.trim().toString().length * 2.1) + 4;
} else {
return (parseFloat(value.toString().length * 1.1) + 4).toFixed(2);
return parseFloat(value.toString().length * 1.1) + 4;
}
});
// console.log("所有表头的宽度：", headsWidth);
@ -56,10 +56,13 @@ export function exportExcel(columnList = [], listData = [], name = 'excel') {
let valueWidth = 0;
if (value)
if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) {
valueWidth = (parseFloat(value.toString().length * 2.1) + 4).toFixed(2);
valueWidth = parseFloat(value.trim().toString().length * 2.1) + 4;
} else {
valueWidth = (parseFloat(value.toString().length * 1.1) + 4).toFixed(2);
valueWidth = parseFloat(value.toString().length * 1.1) + 4;
}
console.log('valueWidth :>> ', valueWidth);
console.log('value :>> ', value);
// console.log("每行数据中值的宽度：", valueWidth);
// 对比出表头和表体值的最大数
@ -164,103 +167,3 @@ export function exportExcel(columnList = [], listData = [], name = 'excel') {
// 生成Excel文件;
XLSX.writeFile(wb, name + '.xlsx');
}
// 导出列表
const exportPreviewIp = () => {
const result = state.data.map(item => ({
实例ID: item.instanceId,
uuid: item.uuid,
地区: item.region,
创建时间: item.createdTime,
关机时间: item.terminatedTime,
}));
const worksheet = XLSX.utils.json_to_sheet(result);
// 表头的样式
worksheet['A1'].s = {
font: {
bold: true,
},
alignment: {
horizontal: 'center',
vertical: 'center',
},
};
// 合并单元格 s: 起始位置, e: 结束位置, r: 行, c: 列
// data["!merges"] = [{ s: { r: 0, c: 0 }, e: { r: 0, c: 10 } }];
// 设置列宽
// data["!cols"] = [{ wch: 50 }, { wch: 20 }, { wch: 40 }];
// 1.所有表头的宽度
const headsWidth = Object.keys(state.data[0]).map(value => {
if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) {
return parseFloat(value.toString().length * 2.1);
} else {
return parseFloat(value.toString().length * 1.1);
}
});
// console.log("所有表头的宽度：", headsWidth);
// 2.所有表体值的宽度
const rowsWidth = state.data.map(item => {
// 每行数据中值的宽度
const maxValue = Object.values(item).map((value, index) => {
let valueWidth;
if (/.*[\u4e00-\u9fa5]+.*$/.test(value)) {
valueWidth = parseFloat(value.toString().length * 2.1);
} else {
valueWidth = parseFloat(value.toString().length * 1.1);
}
// console.log("每行数据中值的宽度：", valueWidth);
// 对比出表头和表体值的最大数
return Math.max(valueWidth, headsWidth[index]);
});
// console.log("本行值中最大宽度：", maxValue);
return maxValue;
});
// console.log("每行数据对比出的最大宽度：", rowsWidth);
// 3.对比每列最大值
let aotuWidth = [];
rowsWidth.map((row, index) => {
let maxWidth = [];
row.map((value, i) => {
if (index === 0) {
maxWidth.push({
wch: value,
});
} else {
maxWidth.push({
wch: Math.max(value, aotuWidth[i].wch),
});
}
});
aotuWidth = maxWidth;
});
// console.log("每列最大宽度：", aotuWidth);
// 4.给excel设置自适应宽度
worksheet['!cols'] = aotuWidth;
const workbook = XLSX.utils.book_new();
XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');
const binaryWorkbook = XLSX.write(workbook, { type: 'binary', bookType: 'xlsx' });
const blob = new Blob([s2ab(binaryWorkbook)], { type: 'application/octet-stream' });
const link = document.createElement('a');
link.href = window.URL.createObjectURL(blob);
link.download = '实例列表.xlsx';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
};
const s2ab = binaryString => {
const buffer = new ArrayBuffer(binaryString.length);
const view = new Uint8Array(buffer);
for (let i = 0; i < binaryString.length; i++) {
view[i] = binaryString.charCodeAt(i) & 0xff;
}
return buffer;
};

6
src/views/finance/MerchantDepositSlip.vue
Unescape View File

@ -478,7 +478,11 @@ const handleExportOrderDetail = () => {
// _data.push(arr);
// }
exportExcel(details.orderInfo.columnList, details.orderInfo.data);
exportExcel(
details.orderInfo.columnList,
details.orderInfo.data,
'订单详情 - ' + new Date().getTime()
);
};
/** 查看异动信息 */

7
src/views/supervise/classify.vue
Unescape View File

@ -43,6 +43,7 @@
</div>
<!-- 头部右侧按钮模块 -->
<div class="avue-crud__right">
<el-button icon="Download" @click="handleExportData" circle></el-button>
<el-button icon="el-icon-refresh" @click="searchChangeS" circle></el-button>
<el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
<!-- <el-button icon="Search" @click="searchHide" circle></el-button> -->
@ -153,6 +154,7 @@ import {
$_newlyremove,
$_classifyAddChild,
} from '@/api/classify/classify';
import { exportExcel } from '@/utils/exportData';
const loadingclassification = ref(false); //指标分类加载效果
const classificationdata = ref([]); //指标分类数据
const current = ref(1); //当前页
@ -345,6 +347,11 @@ function ProhibitSelection(val, index) {
return true;
}
}
/** 导出表格 */
const handleExportData = () => {
exportExcel(columnList.value, classificationdata.value, '指标分类 - ' + new Date().getTime());
};
</script>
<style scoped lang="scss">

7
src/views/supervise/management.vue
Unescape View File

@ -102,6 +102,7 @@
</div>
<!-- 头部右侧按钮模块 -->
<div class="avue-crud__right">
<el-button icon="Download" @click="handleExportData" circle></el-button>
<el-button icon="el-icon-refresh" @click="searchChangeS" circle></el-button>
<el-button icon="Operation" @click="showdrawer(true)" circle></el-button>
<el-button icon="Search" @click="searchHide" circle></el-button>
@ -299,6 +300,7 @@ import {
$_exportList,
} from '@/api/classify/classify';
import { isNumber, setNodeHeight } from '@/utils/util';
import { exportExcel } from '@/utils/exportData';
const loadingclassification = ref(false); //指标分类加载效果
const $useStore = useStore();
const accessControl = $useStore.getters.permission;
@ -855,6 +857,11 @@ const handleClose = res => {
ElMessage.warning('上传失败');
};
/** 导出表格 */
const handleExportData = () => {
exportExcel(managementColumnList, classificationdata.value, '指标管理 - ' + new Date().getTime());
};
</script>
<style scoped lang="scss">

Write Preview
Loading…
Cancel
Save