characteristic:
1. Support any depth of chm file parsing
2. After parsing, the content structure is converted into tree data presentation
3. Click the tree node to view the data in real time in html
4. Does not rely on any browser plug-ins, good compatibility
The core code of nodejs
const $g = global.SG.$g, fs = global.SG.fs, router = global.SG.router, xlsx = global.SG.xlsx;
module.exports = global.SG.router;
let webRootPath = 'http://127.0.0.1:9999/chm/';//测试环境chm文件根目录
//上传单个文件（all方法支持POST、GET、PUT、PATCH、DELETE传参方式）
let uploadFileName = '';//获取上传后的文件名
router.all(
"/chm/upload",//接口路径
$g.dir.upload(
"./upload",//存储临时上传文件的路径
({ fileName, } = {}) => { uploadFileName = fileName; }).single("file"),//上传单个文件
(req, res) => {
// 开始解压上传的upload文件----------------------------------------
let cp = require('child_process');
cp.exec("reg query HKEY_CLASSES_ROOT\\360zip\\shell\\open\\command /ve", function (e, stdout, stderr) {
let rootPath = `${__dirname.split('\\').slice(0, -3).join('\\')}`;
let uploadFolderPath = `${rootPath}\\upload\\${uploadFileName}`;
let targetFolderPath = `${rootPath}\\chm\\${uploadFileName}`;
let str = stdout.match(/\"([^\"]+)\"/)[0];
if (str) {
// console.log('已经找到360zip程序，详细地址为：'+str);
cp.exec(`${str} -x ${uploadFolderPath} ${targetFolderPath}`, { encoding: 'binary' }, function (e, stdout, stderr) {
// 遍历读取目录里面的文件----------------------------------------
let files = [];
let walker = require('walk').walk(targetFolderPath, { followLinks: false });
walker.on('file', function (roots, stat, next) {
if (stat.name.includes(`.hhc`)) {
let hhcFilePath = `${roots}/${stat.name}`;
files.push(hhcFilePath);
fs.readFile(hhcFilePath, 'utf-8', (err, data) => $g.json.res(req, res, "chm文件解析成功", {
htmPath: `${webRootPath}${uploadFileName}/`,
hhcFilePath: `${webRootPath}${uploadFileName}/${stat.name}`,
hhcData: data,
}, true));
} else next();
});
walker.on('end', function () {
files.length === 0 && $g.json.res(req, res, "没有找到hhc文件，请仔细检查chm文件是否正确！", { targetFolderPath }, false);
});
});
} else {
console.log('没有找到360zip程序，无法完成解压缩功能，请在服务器端安装360zip软件！');
}
});
}
);Vue front-end core code
<template>
<div :class="$options.name">
<div class="sg-left " v-loading="loading">
<!-- 树节点 -->
<div class="tree-header">
<!-- 树节点 -->
<div class="tree-header">
<div class="sg-left ">
<el-tooltip popper-class="sg-el-tooltip" :enterable="false" effect="dark" :content="`支持拖拽到树上传文件`"
placement="top-start">
<el-button type="text" icon="el-icon-upload" size="mini"
@click="d => $refs.sgUpload.triggerUploadFile()">
上传chm文件
</el-button>
</el-tooltip>
</div>
<div class="sg-right ">
</div>
</div>
</div>
<div class="tree-body" @click="treeData.length === 0 ? $refs.sgUpload.triggerUploadFile() : ''">
<el-tree ref="tree" @current-change="current_change" :data="treeData"
:props="{ label: 'Name', children: 'children' }" :icon-class="'folder-tree-node'" :indent="25"
@node-click="nodeClick" node-key="id" :filter-node-method="filterNode" default-expand-all
highlight-current :default-expanded-keys="default_expanded_keys">
<div slot="reference" class="node-label" slot-scope="{ node, data }">
<label class="left" :title="node.label">
{
{ node.label }}
</label>
</div>
</el-tree>
<sgUpload drag ref="sgUpload" :data="{
accept: `.${['chm'].join(',.')}`,
// actionUrl: `http://127.0.0.1:9999/api/chm/upload`,
actionUrl: `http://xxx.xxxxxx.cn:33/api/chm/upload`,
headers: {},
}" @beforeUpload="beforeUpload" @uploadSuccess="uploadSuccess" @error="uploadError" hideUploadTray />
</div>
</div>
<div class="sg-right ">
<iframe id="iframe" ref="iframe" :src="src" frameborder="no" style="width:100%;height:100%;"></iframe>
</div>
<div class="hhcHTML" ref="hhcHTML" style="display: none;"> </div>
</div>
</template>
<script>
import sgUpload from "@/vue/components/admin/sgUpload";
export default {
name: 'chmDecode',
components: {
sgUpload,
},
data() {
return {
loading: false,
htmPath: '',
src: '',
current_node: null,
default_expanded_keys: [],
treeData: [],
}
},
created() {
},
methods: {
// 解析hhc文件
decodeHhcData(doms) {
let r = [];
let _recursion = (doms, d) => {
[].slice.call(doms).forEach(v => {
let OBJECT = v.querySelector(`OBJECT`);
let p0 = OBJECT.querySelectorAll(`param`)[0];
let p1 = OBJECT.querySelectorAll(`param`)[1];
let obj = {
id: this.$g.UUID(),
[p0.getAttribute('name')]: p0.getAttribute('value'),//文件别名
[p1.getAttribute('name')]: p1.getAttribute('value'),
filePath: `${this.htmPath}${p1.getAttribute('value')}`,//文件路径
}
this.current_node || (this.current_node = obj);
d.push(obj)
if (OBJECT.nextElementSibling) {
obj.children = []
_recursion(OBJECT.nextElementSibling.children, obj.children)
}
});
}
_recursion(doms, r);
return r;
},
// 开始上传
beforeUpload(d) {
this.loading = true;
},
// 上传成功
uploadSuccess(d, f) {
this.htmPath = d.data.htmPath;
this.$refs.hhcHTML.innerHTML = d.data.hhcData;
this.$nextTick(() => {
let treeData = this.decodeHhcData(this.$refs.hhcHTML.querySelectorAll(`.hhcHTML>ul>li`))
this.treeData = treeData;
this.loading = false;
this.$nextTick(() => {
this.$refs.tree.setCurrentKey(this.current_node.id)
this.src = this.current_node.filePath;
});
});
},
// 上传失败
uploadError(d, f) { this.loading = false; },
//点击节点
nodeClick(data) { },
//过滤节点
filterNode(value, data) { },
// 树节点修改
current_change(d) { this.src = d.filePath; },
}
};
</script>
<style lang="scss" scoped>
.chmDecode {
width: 100%;
display: flex;
flex-wrap: nowrap;
$treeWidth: 610px;
$treeControlWidth: 100px;
&>.sg-left {
width: $treeWidth;
flex-wrap: nowrap;
white-space: nowrap;
flex-shrink: 0;
.tree-header {
display: flex;
justify-content: space-between;
align-items: center;
&>.sg-left {}
&>.sg-right {}
}
.tree-body {
height: calc(100vh - 200px);
}
}
&>.sg-right {
margin-left: 20px;
flex-grow: 1;
height: calc(100vh - 170px);
.baseinfo {
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
position: relative;
.form-body {
height: calc(100% - 60px);
overflow-y: auto;
overflow-x: hidden;
}
.form-footer {
position: absolute;
height: 70px;
box-sizing: border-box;
padding-top: 20px;
width: 100%;
display: flex;
justify-content: space-between;
bottom: 0;
&>* {
width: 100%;
flex-grow: 1;
}
}
}
}
}
</style>