openSourceRemote/mind-map
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

'增加从excel导入的功能'

Browse Source
This commit is contained in:
wanglin2 2022-10-24 15:16:27 +08:00
parent b0d898054e
commit fadd8217e8
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", "v-viewer": "^1.6.4",
"vue": "^2.6.11", "vue": "^2.6.11",
"vue-router": "^3.5.1", "vue-router": "^3.5.1",
"vuex": "^3.6.2" "vuex": "^3.6.2",
"xlsx": "^0.18.5"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^4.5.0", "@vue/cli-plugin-babel": "^4.5.0",

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

@ -16,7 +16,9 @@
:on-exceed="onExceed" :on-exceed="onExceed"
> >
<el-button slot="trigger" size="small" type="primary">选取文件</el-button> <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> </el-upload>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
<el-button @click="cancel">取 消</el-button> <el-button @click="cancel">取 消</el-button>
@ -27,6 +29,8 @@
<script> <script>
import MindMap from 'simple-mind-map' import MindMap from 'simple-mind-map'
import { fileToBuffer } from '@/utils'
import { read, utils } from 'xlsx'
/** /**
* @Author: 王林 * @Author: 王林
@ -60,9 +64,9 @@ export default {
* @Desc: 文件选择 * @Desc: 文件选择
*/ */
onChange(file) { onChange(file) {
let reg = /\.(smm|xmind|json)$/ let reg = /\.(smm|xmind|json|xlsx)$/
if (!reg.test(file.name)) { if (!reg.test(file.name)) {
this.$message.error('请选择.smm、.json、.xmind文件') this.$message.error('请选择.smm、.json、.xmind、.xlsx文件')
this.fileList = [] this.fileList = []
} else { } else {
this.fileList.push(file) this.fileList.push(file)
@ -102,10 +106,17 @@ export default {
this.handleSmm(file) this.handleSmm(file)
} else if (/\.xmind$/.test(file.name)) { } else if (/\.xmind$/.test(file.name)) {
this.handleXmind(file) this.handleXmind(file)
} else if (/\.xlsx$/.test(file.name)) {
this.handleExcel(file)
} }
this.cancel() this.cancel()
}, },
/**
* @Author: 王林25
* @Date: 2022-10-24 14:19:33
* @Desc: 处理.smm文件
*/
handleSmm(file) { handleSmm(file) {
let fileReader = new FileReader() let fileReader = new FileReader()
fileReader.readAsText(file.raw) fileReader.readAsText(file.raw)
@ -124,6 +135,11 @@ export default {
} }
}, },
/**
* @Author: 王林25
* @Date: 2022-10-24 14:19:41
* @Desc: 处理.xmind文件
*/
async handleXmind(file) { async handleXmind(file) {
try { try {
let data = await MindMap.xmind.parseXmindFile(file.raw) let data = await MindMap.xmind.parseXmindFile(file.raw)
@ -133,6 +149,73 @@ export default {
console.log(error) console.log(error)
this.$message.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() 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)
})
}