|
|
@@ -0,0 +1,76 @@
|
|
|
+<!--
|
|
|
+ * @Author : yuanrunwei
|
|
|
+ * @Date : 2021-12-04 14:23:58
|
|
|
+ * @LastEditors : yuanrunwei
|
|
|
+ * @LastEditTime : 2021-12-04 15:38:33
|
|
|
+ * @FilePath : \spfm-market-front\src\pages\main\performance\components\sheet.vue
|
|
|
+-->
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="sheet-container">
|
|
|
+ <el-upload action :on-change="handleChange" :show-file-list="false">
|
|
|
+ <el-button size="mini" type="success">上传</el-button>
|
|
|
+ </el-upload>
|
|
|
+ <div id="luckysheet" class="sheet-container-block"></div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import XLSX from "xlsx";
|
|
|
+import luckyexcel from "luckyexcel";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {};
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleInit() {},
|
|
|
+ handleCreate(file) {
|
|
|
+ luckyexcel.transformExcelToLucky(file, (export_json) => {
|
|
|
+ var options = {
|
|
|
+ container: "luckysheet",
|
|
|
+ data: export_json.sheets,
|
|
|
+ title: export_json.info.name,
|
|
|
+ userInfo: export_json.info.name.creator,
|
|
|
+ };
|
|
|
+ window.luckysheet.create(options);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ async handleChange(response) {
|
|
|
+ this.handleCreate(response.raw);
|
|
|
+ let binary = await this.handleFile(response.raw);
|
|
|
+ let workbook = XLSX.read(binary, {
|
|
|
+ type: "binary",
|
|
|
+ cellDates: true,
|
|
|
+ });
|
|
|
+ let sheet = workbook.Sheets[workbook.SheetNames[0]];
|
|
|
+ const data = XLSX.utils.sheet_to_json(sheet);
|
|
|
+ this.handleCreate(data);
|
|
|
+ },
|
|
|
+ handleFile(file) {
|
|
|
+ return new Promise((resolve) => {
|
|
|
+ let reader = new FileReader();
|
|
|
+ reader.readAsBinaryString(file);
|
|
|
+ reader.onload = (event) => {
|
|
|
+ resolve(event.target.result);
|
|
|
+ };
|
|
|
+ });
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.handleInit();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scope>
|
|
|
+.sheet-container {
|
|
|
+ position: relative;
|
|
|
+ width: 1200px;
|
|
|
+ height: 500px;
|
|
|
+ &-block {
|
|
|
+ position: absolute;
|
|
|
+ width: calc(100% - 40px);
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
