Antd Vue 文件导出与导入

Antd Vue 文件导出与导入

公司的一个项目，需要实现通用策略同步功能，在ST环境配置好的策略，能够通过导出模板的方式，同步到UAT及生产环境，保证流程配置的可迁移性。

思路是把策略相关内容生成txt文件，然后在UAT环境通过导入文件，读取文件内容，将数据发送到后端，后端对数据进行出来。

这里导出的数据格式我直接以JSON请求报文的格式导出，导入的时候直接读取发送到后端即可。

<template>
    <div>
        <a-upload :action="uploadUrl" :headers="headers" @change="handleChange"
                  :before-upload="beforeUpload">
            <a-button style="margin-left: 10px"> 文件导入</a-button>
        </a-upload>
        <a-button size="small" style="margin-left: 20px;" @click="exportFile">生成文件</a-button>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                uploadUrl: requestUri.importFile,
                headers: {
                    authorization: 'authorization-text',
                    contentType: 'application/json',
                },
                fileList: [],
            }
        },
        methods: {
            exportFile() {
                var ids = "";
                this.policyUse.needSourceIds.forEach(item => {
                    ids += item + ","
                })
                var request = {
                    data: this.policySourceSelect,
                    policyCod: this.policyUse.policyCod,
                    needSourceIds: ids.substr(0, ids.length - 1),
                    policyTyp: this.policyUse.policyTyp,
                    dsc: this.policyUse.Dsc,
                }
                exportRaw(this.policyUse.policyCod + '.txt', JSON.stringify(request));
            },
            handleChange(info) {
                initUpload(info.file, requestUri.importFile);
                if (info.file.status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
                if (info.file.status === 'done') {
                    this.$message.success(`${info.file.name} file uploaded successfully`);
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`);
                }
            },
            beforeUpload(file) {
                this.fileList = [...this.fileList, file];

                return false;
            },

        }
    }
</script>

StaticMethods.js

//导出数据方法
export let exportRaw = (name, data) => {
    var urlObject = window.URL || window.webkitURL || window;
    var export_blob = new Blob([data]);
    var save_link = document.createElementNS("http://www.w3.org/1999/xhtml", "a")
    save_link.href = urlObject.createObjectURL(export_blob);
    save_link.download = name;
    fakeClick(save_link);
}

export let fakeClick = (obj) => {
    var ev = document.createEvent("MouseEvents");
    ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
    obj.dispatchEvent(ev);
}

//导入数据方法
export let initUpload = (file,url) => {
    var chunk = 100 * 1024;   //每片大小
    var query = {};
    var chunks = [];
    var start = 0;
    //文件分片
    for (var i = 0; i < Math.ceil(file.size / chunk); i++) {
        var end = start + chunk;
        chunks[i] = file.slice(start, end);
        start = end;
    }

    // 采用post方法上传文件
    // url query上拼接以下参数，用于记录上传偏移
    // post body中存放本次要上传的二进制数据
    query = {
        fileSize: file.size,
        dataSize: chunk,
        nextOffset: 0
    }
    upload(chunks, query,url,successPerUpload);


}

export let upload = (chunks, query,url, cb) => {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url);
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    xhr.overrideMimeType("application/octet-stream");

    //获取post body中二进制数据
    var index = Math.floor(query.nextOffset / query.dataSize);
    getFileBinary(chunks[index], function (binary) {
        if (xhr.sendAsBinary) {
            xhr.sendAsBinary(binary);
        } else {
            xhr.send(binary);
        }

    });
}

export let successPerUpload = (resp, chunks, query) => {
    if (resp.isFinish === true) {
        alert("上传成功");
    } else {
        //未上传完毕
        query.offset = resp.offset;
        upload(chunks, query, successPerUpload);
    }
}

export let getFileBinary = (file, cb) => {
    var reader = new FileReader();
    reader.readAsArrayBuffer(file);
    reader.onload = function (e) {
        if (typeof cb === "function") {
            cb.call(this, this.result);
        }
    }
}