JSON文件压缩处理工具

最新推荐文章于 2023-08-03 11:56:03 发布

web修理工

最新推荐文章于 2023-08-03 11:56:03 发布

阅读量649

点赞数

分类专栏： JavaScript 文章标签： json ajax javascript

本文链接：https://blog.csdn.net/qq_42374676/article/details/120453752

版权

JavaScript 专栏收录该内容

163 篇文章 2 订阅

订阅专栏


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body><script id="__bs_script__">//<![CDATA[
    document.write("<script async src='/browser-sync/browser-sync-client.js?v=2.26.7'><\/script>".replace("HOST", location.hostname));
//]]></script>

    <button onclick="addajax()">ajax请求</button>
    <input type="file" value="文件预览" onchange="change(this)" id="upload">
    <button onclick="createFile()">创建文件</button>
    <script>

        // ajax 请求 本地JSON文件
        function ajax(callback) {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    var myObj = JSON.parse(this.responseText);
                    if (callback && typeof callback == "function") {
                        callback(myObj);
                    }
                    console.log(myObj);
                }
            };
            xmlhttp.open("GET", "./1.json", true);
            xmlhttp.send();
        }

        function addajax() {
            // json 文件压缩
            ajax((res) => {
                console.log(res, '=========res')
                let file = JSON.stringify(res)
                console.log(file, '===file')

                var a = document.createElement('a')
                var blob = new Blob([file], { type: 'text/plain' })
                var url = window.URL.createObjectURL(blob)
                a.href = url
                a.download = "000.json"
                a.click()
                window.URL.revokeObjectURL(url)
            })
        }

        // 文件上传(系统)
        function change(e) {
            console.log(e.files, '====change')
            let file = e.files[0]
            // var aafile = new File([file], "820100.json", { type: 'application/json' });
            // console.log(aafile);

            const reader = new FileReader(); //这是核心,读取操作就是由它完成.
            // reader.readAsDataURL(file);//读取文件的内容,也可以读取文件的URL
            // reader.onload = function (e) {
            //     // 转换完成，创建一个a标签用于下载
            //     var a = document.createElement("a");
            //     a.download = file.name;
            //     a.href = e.target.result;
            //     document.body.append(a); // 修复firefox中无法触发click
            //     a.click();
            //     document.body.removeChild(a)
            // }

            function Trim(str, is_global = 'i') {
                var result;
                result = str.replace(/(^\s+)|(\s+$)/g, "");
                if (is_global.toLowerCase() == "g")
                    result = result.replace(/\s/g, "");
                return result;
            }

            reader.readAsText(file); // 转换为base64，可以直接放入a表情href
            reader.onload = function (e) {
                var a = document.createElement('a')
                var blob = new Blob([Trim(e.target.result, 'g')], { type: 'text/plain' })
                var url = window.URL.createObjectURL(blob)
                a.href = url
                a.download = file.name
                a.click()
                window.URL.revokeObjectURL(url)
            }

        }

        // 创建文件(手动)
        function createFile() {
            var file = new File(['foo', 'bar'], 'foobar.txt');

            console.log('size=' + file.size);
            console.log('type=' + file.type);
            console.log('name=' + file.name);
            var reader = new FileReader();
            reader.onload = function (event) {
                console.log(JSON.stringify(reader.result), '====')
            };
            reader.readAsText(file);

            var testEndings = function (string, endings) {
                var file = new File([string], {
                    type: 'plain/text',
                    endings: endings
                });
                var reader = new FileReader();
                reader.onload = function (event) {
                    console.log(endings + ' of ' + JSON.stringify(string) +
                        ' => ' + JSON.stringify(reader.result));
                };
                reader.readAsText(file);
            };

            testEndings('foo\nbar', 'native');
            testEndings('foo\r\nbar', 'native');
            testEndings('foo\nbar', 'transparent');
            testEndings('foo\r\nbar', 'transparent');



        }


        // FileReader.error：读取文件时产生的错误对象
        // FileReader.readyState：整数，表示读取文件时的当前状态。一共有三种可能的状态，0表示尚未加载任何数据，1表示数据正在加载，2表示加载完成。
        // FileReader.result：读取完成后的文件内容，有可能是字符串，也可能是一个 ArrayBuffer 实例。
        // FileReader.onabort：abort事件（用户终止读取操作）的监听函数。
        // FileReader.onerror：error事件（读取错误）的监听函数。
        // FileReader.onload：load事件（读取操作完成）的监听函数，通常在这个函数里面使用result属性，拿到文件内容。
        // FileReader.onloadstart：loadstart事件（读取操作开始）的监听函数。
        // FileReader.onloadend：loadend事件（读取操作结束）的监听函数。
        // FileReader.onprogress：progress事件（读取操作进行中）的监听函数。


        // FileReader.abort()：终止读取操作，readyState属性将变成2。
        // FileReader.readAsArrayBuffer()：以 ArrayBuffer 的格式读取文件，读取完成后result属性将返回一个 ArrayBuffer 实例。
        // FileReader.readAsBinaryString()：读取完成后，result属性将返回原始的二进制字符串。
        // FileReader.readAsDataURL()：读取完成后，result属性将返回一个 Data URL 格式（Base64 编码）的字符串，代表文件内容。对于图片文件，这个字符串可以用于 < img > 元素的src属性。
        // 注意，这个字符串不能直接进行 Base64 解码，必须把前缀data:*/*;base64,从字符串里删除以后，再进行解码。
        // FileReader.readAsText()：读取完成后，result属性将返回文件内容的文本字符串。该方法的第一个参数是代表文件的 Blob 实例，第二个参数是可选的，表示文本编码，默认为 UTF-8。

        // 参考:https://wangdoc.com/javascript/bom/file.html

    </script>
</body>

</html>