首页 > 其他分享 >xlsx.full.min.js实现xlsx的导入与导出

xlsx.full.min.js实现xlsx的导入与导出

时间:2023-03-11 12:13:56浏览次数:37  
标签:xlsx full const XLSX min json sheet data

1. json转xlsx

<html lang="zh">
    <head>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    </head>
        <input id="test_button" type="button" value="导出表格"></input>
    </body>
    <script>
        function exportXlsx(data) {
            const book = XLSX.utils.book_new();
            const sheet = XLSX.utils.json_to_sheet(data);
            XLSX.utils.book_append_sheet(book, sheet);
            XLSX.writeFile(book, 'test.xlsx');
        }
        $("input[id='test_button']").click(function(){
            var test_data = [
                {
                    "id": "1",
                    "name": "张三",
                },
                {
                    "id": "2",
                    "name": "李四",
                }
            ]
            exportXlsx(test_data);
        });
    </script>
</html>

效果如下
image

2. xlsx转json

<html lang="zh">
    <head>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/xlsx/0.18.5/xlsx.full.min.js"></script>
    </head>
        <input id="test_button" type="file" value="导入表格"></input>
    </body>
    <script>
        function importXlsx(file) {
            var reader = new FileReader();
            reader.onload = function(event) {
                const data = event.target.result;
                const workbook = XLSX.read(data, { type: "binary" });
                const sheet = workbook.Sheets[workbook.SheetNames[0]]
                const json = XLSX.utils.sheet_to_json(sheet);
                console.log(json);
            }
            reader.readAsBinaryString(file);
        }
        $("input[id='test_button']").change(function(){
            importXlsx(this.files[0]);
        });
    </script>
</html>

效果如下
image

标签:xlsx,full,const,XLSX,min,json,sheet,data
From: https://www.cnblogs.com/wstong2052/p/17205044.html

相关文章