html / JavaScript · 2024 年 6 月 7 日

xlsx.js实现Excel导入导出

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script src="js/jquery.min.js"></script>
    <script src="https://cdn.sheetjs.com/xlsx-0.20.2/package/dist/xlsx.mini.min.js"></script>
    <script>
        /* 导出文档 */
        function fileSave() {
            const rows = []
            $(".grid-item-wrap").each((i, el) => {
                var name = $(el).find('.block.title').text().split('\n')[0]
                name = name.replace(/Verified/g, '');
                var src = $(el).find('.item-img img').attr('src');
                if (src && src.indexOf('//') == 0) {
                    src = 'https:' + src
                }
                rows.push({
                    name,
                    text: $(el).find('.main-text').html(),
                    star: $(el).find('ul li [data-lx-fill=full]').length,
                    time: '@' + $(el).find('.block.time').html(),
                    src,
                })
            })
            const worksheet = XLSX.utils.json_to_sheet(rows);
            const workbook = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(workbook, worksheet, "导入自定义评论");

            /* fix headers */
            XLSX.utils.sheet_add_aoa(worksheet, [["评论人姓名", "评论内容", '评论星星', '时间', '上传图片1', '上传图片2', '上传图片3']], { origin: "A1" });

            /* calculate column width */
            const max_width = rows.reduce((w, r) => Math.max(w, r.name.length), 10);
            worksheet["!cols"] = [{ wch: max_width }];

            /* create an XLSX file and try to save to Presidents.xlsx */
            XLSX.writeFile(workbook, "评论.xlsx", { compression: true });
        }
    </script>
</head>
</script>

<body>
    <input type="file" name="" id="fileInput" multiple>
    <input type="button" onclick="fileSave()" value="保存文件">
    <div id="grid" data-sample="false" class="grid-col-6" style="position: relative; height: 9773.42px;">
        <div class="grid-item-wrap has-img" style="position: absolute; left: 0px; top: 0px;">
            <div data-id="TuONdhftpg" tabindex="0" role="button" class="grid-item clearfix">
                <div style="position:relative;" class="item-img box"><img
                        src="https://images.loox.io/uploads/2023/9/21/yl-1UAX90.jpg"
                        alt="Rima I. review of JOVS X™ Hair Removal and Skin Care Device image 1 out of 1"
                        data-img-ratio="1.33" style="background:grey4;" onerror="this.parentElement.removeChild(this)"
                        onload="this.loaded = true;" class="action"></div>
                <div class="main">
                    <div class="box action">
                        <div data-verified-notification="data-verified-notification" class="block title">Rima I.<span
                                style="display: flex; align-items: center; gap: 4px"
                                class="verified-badge-and-text"><svg viewBox="0 0 24 24" aria-label="Verified purchase"
                                    role="img" class="loox-icon loox-verified-badge"
                                    style="width: 1.2em; height: 1.2em; vertical-align: middle; flex-shrink: 0; undefined;">
                                    <use href="#loox-ic-verified-icon"></use>
                                </svg><span
                                    style="font-style: normal; font-weight: 400; font-size: 12px; line-height: 18px; white-space: nowrap;">Verified</span></span>
                        </div>
                        <div class="clearfix"></div>
                        <div data-time="1695254400000" class="block time" data-upgraded="true">2023/9/21</div>
                        <div aria-label="5 / 5 star review" class="block stars">
                            <ul
                                style="display: inline-flex; margin: unset; padding: unset; text-indent: unset; list-style-type: none; gap: 2px;">
                                <li><svg viewBox="0 0 24 24" data-lx-fill="full" aria-label="rating icon full"
                                        role="img" class="loox-icon star"
                                        style="display: block; width: 1em; height: 1em;">
                                        <use href="#looxicons-rating-icon"></use>
                                    </svg></li>
                                <li><svg viewBox="0 0 24 24" data-lx-fill="full" aria-label="rating icon full"
                                        role="img" class="loox-icon star"
                                        style="display: block; width: 1em; height: 1em;">
                                        <use href="#looxicons-rating-icon"></use>
                                    </svg></li>
                                <li><svg viewBox="0 0 24 24" data-lx-fill="full" aria-label="rating icon full"
                                        role="img" class="loox-icon star"
                                        style="display: block; width: 1em; height: 1em;">
                                        <use href="#looxicons-rating-icon"></use>
                                    </svg></li>
                                <li><svg viewBox="0 0 24 24" data-lx-fill="full" aria-label="rating icon full"
                                        role="img" class="loox-icon star"
                                        style="display: block; width: 1em; height: 1em;">
                                        <use href="#looxicons-rating-icon"></use>
                                    </svg></li>
                                <li><svg viewBox="0 0 24 24" data-lx-fill="full" aria-label="rating icon full"
                                        role="img" class="loox-icon star"
                                        style="display: block; width: 1em; height: 1em;">
                                        <use href="#looxicons-rating-icon"></use>
                                    </svg></li>
                            </ul>
                        </div>
                        <div class="block">
                            <div class="pre-wrap main-text">Excellent and good quality . I like it and easy used .</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script>
    /* 导入文档 */
    document.getElementById('fileInput').addEventListener('change', function (e) {
        const file = e.target.files[0]; // 获取文件引用
        if (!file) {
            return;
        }
        if (!file) return
        const reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = function (e) {
            const data = e.target.result;
            const zzexcel = XLSX.read(data, {
                type: 'binary'
            });
            const result = [];
            for (let i = 0; i < zzexcel.SheetNames.length; i++) {
                const newData = XLSX.utils.sheet_to_json(zzexcel.Sheets[zzexcel.SheetNames[i]]);
                result.push(...newData)
            }
            console.log(result);
        }
    });
</script>
</html>