coosld/mind-map
1
0
Fork 0
mirror of https://github.com/wanglin2/mind-map.git synced 2026-02-22 10:57:40 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

'增加从excel导入的功能'

Browse Source
This commit is contained in:
wanglin25 2022-10-24 15:16:27 +08:00
parent 600cadc861
commit dce55f3628
4 changed files with 105 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -1 +1 @@
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-35b0a040.cb76da7d.js" rel="prefetch"><link href="dist/css/app.80644c67.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.faba1249.css" rel="preload" as="style"><link href="dist/js/app.2eb32782.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.9d319e51.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.faba1249.css" rel="stylesheet"><link href="dist/css/app.80644c67.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.9d319e51.js"></script><script src="dist/js/app.2eb32782.js"></script></body></html>
<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.81d632f4.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.228f2009.js" rel="prefetch"><link href="dist/js/chunk-35b0a040.cb76da7d.js" rel="prefetch"><link href="dist/css/app.80644c67.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.faba1249.css" rel="preload" as="style"><link href="dist/js/app.e664c97c.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.0c7365d5.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.faba1249.css" rel="stylesheet"><link href="dist/css/app.80644c67.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but thoughts doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="dist/js/chunk-vendors.0c7365d5.js"></script><script src="dist/js/app.e664c97c.js"></script></body></html>

3
web/package.json
View File

@ -16,7 +16,8 @@
"v-viewer": "^1.6.4",
"vue": "^2.6.11",
"vue-router": "^3.5.1",
"vuex": "^3.6.2"
"vuex": "^3.6.2",
"xlsx": "^0.18.5"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^4.5.0",

89
web/src/pages/Edit/components/Import.vue
View File

@ -16,7 +16,9 @@
:on-exceed="onExceed"
>
<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
<div slot="tip" class="el-upload__tip">支持.smm、.json、.xmind文件</div>
<div slot="tip" class="el-upload__tip">
支持.smm、.json、.xmind、.xlsx文件
</div>
</el-upload>
<span slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button>
@ -27,6 +29,8 @@
<script>
import MindMap from 'simple-mind-map'
import { fileToBuffer } from '@/utils'
import { read, utils } from 'xlsx'
/**
* @Author: 王林
@ -60,9 +64,9 @@ export default {
* @Desc: 文件选择
*/
onChange(file) {
let reg = /\.(smm|xmind|json)$/
let reg = /\.(smm|xmind|json|xlsx)$/
if (!reg.test(file.name)) {
this.$message.error('请选择.smm、.json、.xmind文件')
this.$message.error('请选择.smm、.json、.xmind、.xlsx文件')
this.fileList = []
} else {
this.fileList.push(file)
@ -102,10 +106,17 @@ export default {
this.handleSmm(file)
} else if (/\.xmind$/.test(file.name)) {
this.handleXmind(file)
} else if (/\.xlsx$/.test(file.name)) {
this.handleExcel(file)
}
this.cancel()
},
/**
* @Author: 王林25
* @Date: 2022-10-24 14:19:33
* @Desc: 处理.smm文件
*/
handleSmm(file) {
let fileReader = new FileReader()
fileReader.readAsText(file.raw)
@ -124,6 +135,11 @@ export default {
}
},
/**
* @Author: 王林25
* @Date: 2022-10-24 14:19:41
* @Desc: 处理.xmind文件
*/
async handleXmind(file) {
try {
let data = await MindMap.xmind.parseXmindFile(file.raw)
@ -133,6 +149,73 @@ export default {
console.log(error)
this.$message.error('文件解析失败')
}
},
/**
* @Author: 王林25
* @Date: 2022-10-24 14:19:51
* @Desc: 处理.xlsx文件
*/
async handleExcel(file) {
try {
const wb = read(await fileToBuffer(file.raw))
const data = utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]], {
header: 1
})
if (data.length <= 0) {
return
}
let max = 0
data.forEach(arr => {
if (arr.length > max) {
max = arr.length
}
})
let layers = []
let walk = layer => {
if (!layers[layer]) {
layers[layer] = []
}
for (let i = 0; i < data.length; i++) {
if (data[i][layer]) {
let node = {
data: {
text: data[i][layer]
},
children: [],
_row: i
}
layers[layer].push(node)
}
}
if (layer < max - 1) {
walk(layer + 1)
}
}
walk(0)
let getParent = (arr, row) => {
for (let i = arr.length - 1; i >= 0; i--) {
if (row >= arr[i]._row) {
return arr[i]
}
}
}
for (let i = 1; i < layers.length; i++) {
let arr = layers[i]
for (let j = 0; j < arr.length; j++) {
let item = arr[j]
let parent = getParent(layers[i - 1], item._row)
if (parent) {
parent.children.push(item)
}
}
}
this.$bus.$emit('setData', layers[0][0])
this.$message.success('导入成功')
} catch (error) {
console.log(error)
this.$message.error('文件解析失败')
}
}
}
}

16
web/src/utils/index.js
View File

@ -31,3 +31,19 @@ export const fullScreen = element => {
element.mozRequestFullScreen()
}
}
/**
* javascript comment
* @Author: 王林25
* @Date: 2022-10-24 14:16:18
* @Desc: 文件转buffer
*/
export const fileToBuffer = file => {
return new Promise(r => {
const reader = new FileReader()
reader.onload = () => {
r(reader.result)
}
reader.readAsArrayBuffer(file)
})
}