FileSave - 榕贵软件


handleExportHistory() {
      let that=this;
      // eslint-disable-next-line
      loadjs.ready("file-saver", function () {
        var blob = new Blob([JSON.stringify(that.used.history)], {
          type: "text/json;charset=utf-8",
        });
        // eslint-disable-next-line
        saveAs(blob, "devops-data.json");
      });
    },


try {
    var isFileSaverSupported = !!new Blob;
} catch (e) {}


FileSaver saveAs(Blob/File data, optional DOMString filename, optional Boolean disableAutoBOM)

var blob = new Blob(["Hello, world!"], {type: "text/plain;charset=utf-8"});
saveAs(blob, "hello world.txt");


var canvas = document.getElementById("my-canvas"), ctx = canvas.getContext("2d");
// draw to canvas...
canvas.toBlob(function(blob) {
    saveAs(blob, "pretty image.png");
});


uglifyjs FileSaver.js --mangle --comments /@source/ > FileSaver.min.js
# or simply:
npm run build


npm install file-saver --save
bower install file-saver


<input type="file" accept="application/json", class="upload"/>

$('.upload').click(function(e){
    var target = e.target
    var file = targe.files[0]
    var reader = new FileReader()
    reader.readAsText(file);
    reader.onload = function(){
        var result = JSON.parse(this.result)[0]
    }
})

<input type="button", class="download">

$('.download').click(function(){
    var d = {}
    var datastr = "data:text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(d));
    var downloadAnchorNode = document.createElement('a')
    downloadAnchorNode.setAttribute("href", datastr);
    downloadAnchorNode.setAttribute("download", 'tem.json')
    downloadAnchorNode.click();
    downloadAnchorNode.remove();
})



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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button id="export">导出</button>
    <input type="file" id="file">
    <button id="button">获取内容</button>
    <script>
        function getId(id) {
            return document.getElementById(id)
        }
        const exportBtn = getId("export");
        const fileEle = document.getElementById('file');
        const buttonEle = document.getElementById('button');

        let person = {
            name: "王老五",
            age: 20
        }

        // 导出json文件
        exportBtn.onclick = exportJSON.bind(this, person, "test.json")
        function exportJSON(data, filename) {
            console.log(data, "data");
            if (typeof data === "object") {
                data = JSON.stringify(data, undefined, 4);
            }
            var blob = new Blob([data], { type: "text/json" }),
                e = document.createEvent("MouseEvents"),
                a = document.createElement("a");
            a.download = filename;
            a.href = window.URL.createObjectURL(blob);
            a.dataset.downloadurl = ["text/json", a.download, a.href].join(":");
            e.initMouseEvent(
                "click",
                true,
                false,
                window,
                0,
                0,
                0,
                0,
                0,
                false,
                false,
                false,
                false,
                0,
                null
            );
            a.dispatchEvent(e);
        }

        // 导入json文件
        buttonEle.onclick = function () {
            var reader = new FileReader();//新建一个FileReader
            reader.readAsText(fileEle.files[0], "UTF-8");//读取文件
            reader.onload = function (evt) { //读取完文件之后会回来这里
                var fileString = evt.target.result; // 读取文件内容
                console.log(fileString);
            }
        };
    </script>
</body>

</html>

文档更新时间: 2022-02-16 21:26 作者：admin