特性：

1、支持任意深度的chm文件解析

2、解析后內(nèi)容結(jié)構(gòu)轉(zhuǎn)換為tree數(shù)據(jù)呈現(xiàn)

3、點(diǎn)擊樹(shù)節(jié)點(diǎn)可以在html實(shí)時(shí)查看數(shù)據(jù)?

4、不依賴(lài)任何瀏覽器端插件，兼容性較好文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-637072.html

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/';//測(cè)試環(huán)境chm文件根目錄

//上傳單個(gè)文件（all方法支持POST、GET、PUT、PATCH、DELETE傳參方式）
let uploadFileName = '';//獲取上傳后的文件名
router.all(
    "/chm/upload",//接口路徑
    $g.dir.upload(
        "./upload",//存儲(chǔ)臨時(shí)上傳文件的路徑
        ({ fileName, } = {}) => { uploadFileName = fileName; }).single("file"),//上傳單個(gè)文件
    (req, res) => {
        // 開(kāi)始解壓上傳的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('已經(jīng)找到360zip程序，詳細(xì)地址為：'+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, "沒(méi)有找到hhc文件，請(qǐng)仔細(xì)檢查chm文件是否正確！", { targetFolderPath }, false);
                    });
                });
            } else {
                console.log('沒(méi)有找到360zip程序，無(wú)法完成解壓縮功能，請(qǐng)?jiān)诜?wù)器端安裝360zip軟件！');
            }
        });
    }
);

vue前端核心代碼

<template>
    <div :class="$options.name">
        <div class="sg-left " v-loading="loading">
            <!-- 樹(shù)節(jié)點(diǎn) -->
            <div class="tree-header">
                <!-- 樹(shù)節(jié)點(diǎn) -->
                <div class="tree-header">
                    <div class="sg-left ">
                        <el-tooltip popper-class="sg-el-tooltip" :enterable="false" effect="dark" :content="`支持拖拽到樹(shù)上傳文件`"
                            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;
        },
        // 開(kāi)始上傳
        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; },
        //點(diǎn)擊節(jié)點(diǎn)
        nodeClick(data) { },
        //過(guò)濾節(jié)點(diǎn)
        filterNode(value, data) { },
        // 樹(shù)節(jié)點(diǎn)修改
        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>

到了這里，關(guān)于nodejs實(shí)現(xiàn)解析chm文件列表，無(wú)需轉(zhuǎn)換為PDF文件格式，在線(xiàn)預(yù)覽chm文件以及目錄，不依賴(lài)任何網(wǎng)頁(yè)端插件的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！