Comment implémenter les fonctions d'importation et d'exportation Excel sur le front-end (exemple de code)

Le contenu de cet article explique comment implémenter la fonction d'importation et d'exportation Excel (exemple de code) sur le front-end. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Dans un projet récent, je voulais implémenter une fonction d'importation et d'exportation d'Excel. Après avoir recherché quelques plug-ins, j'ai trouvé le plug-in js-xlsx, j'ai donc essayé de l'utiliser. enregistrera brièvement la méthode d'utilisation et les problèmes rencontrés.

SheetJS js-xlsx est un plug-in qui peut lire et écrire des tableaux dans plusieurs formats. Il prend en charge un bon navigateur et peut être utilisé sur plusieurs plates-formes linguistiques.
Adresse du plug-in : https://github.com/SheetJS/js...

Utiliser

1. Installer les dépendances

et entrez dans le dossier Projet, installez xlsx

yarn add xlsx

2. Introduisez

import * as XLSX from 'xlsx'

dans le projet pour implémenter la fonction d'exportation Excel

. 1. Définissez les méthodes d'exportation qui doivent être utilisées

export default function download(json,fileName){
    const type = 'xlsx'//定义导出文件的格式
    var tmpDown;//导出的内容
    var tmpdata = json[0];
    json.unshift({});
    var keyMap = []; //获取keys
    for (var k in tmpdata) {
        keyMap.push(k);
        json[0][k] = k;
    }
    var tmpdata = [];//用来保存转换好的json 
    
    json.map((v, i) => keyMap.map((k, j) => Object.assign({}, {
        v: v[k],
        position: (j > 25 ? getCharCol(j) : String.fromCharCode(65 + j)) + (i + 1)
    }))).reduce((prev, next) => prev.concat(next)).forEach((v, i) => tmpdata[v.position] = {
        v: v.v
    });
    var outputPos = Object.keys(tmpdata); //设置区域,比如表格从A1到D10
    var tmpWB = {
        SheetNames: ['mySheet'], //保存的表标题
        Sheets: {
            'mySheet': Object.assign({},
                tmpdata, //内容
                {
                    '!ref': outputPos[0] + ':' + outputPos[outputPos.length - 1] //设置填充区域
                })
        }
    };
    tmpDown = new Blob([s2ab(XLSX.write(tmpWB, 
        {bookType: (type == undefined ? 'xlsx':type),bookSST: false, type: 'binary'}//这里的数据是用来定义导出的格式类型
        ))], {
        type: ""
    }); //创建二进制对象写入转换好的字节流
    saveAs(tmpDown,fileName);
}

function saveAs(obj, fileName){//导出功能实现
    var tmpa = document.createElement("a");
    tmpa.download = fileName || "下载";
    tmpa.href = URL.createObjectURL(obj); //绑定a标签
    tmpa.click(); //模拟点击实现下载
    setTimeout(function () { //延时释放
        URL.revokeObjectURL(obj); //用URL.revokeObjectURL()来释放这个object URL
    }, 100);
}

function s2ab(s){ //字符串转字符流
    var buf = new ArrayBuffer(s.length);
    var view = new Uint8Array(buf);
    for (var i = 0; i != s.length; ++i) view[i] = s.charCodeAt(i) & 0xFF;
    return buf;
}

function getCharCol(n){
    let temCol = '',
    s = '',
    m = 0
    while (n > 0) {
        m = n % 26 + 1
        s = String.fromCharCode(m + 64) + s
        n = (n - m) / 26
    }
    return s
}

2. Utilisez la méthode d'exportation dans le projet

//导出excel
//导出excel
downloadExl = () => {
    const { results } = this.props //需要导出的json数据
    let datas = _.clone(results)//这里为了不影响项目的数据的使用 采用了lodash中的深克隆方法
    let json = datas.map(item=> { //将json数据的键名更换成导出时需要的键名
        return {
            '人员ID' :item.id,
            '姓名' : item.name,
            '证件类型': this.findIdType(item.idType),//将类型代号转为汉字
            '证件号码': item.credentialsId,
            '固定电话': item.tel,
            '移动电话': item.mobile
        }
    })
    download(json,'人员信息.xlsx')//导出的文件名
}

3.

<button>导出Excel</button>

De cette façon, vous pouvez facilement implémenter la fonction d'exportation d'Excel

Implémenter la fonction d'importation d'Excel

1 Définir le. méthode à utiliser lors de l'importation

//导入excel
onImportExcel = file => {
    // 获取上传的文件对象
    const { files } = file.target;
    // 通过FileReader对象读取文件
    const fileReader = new FileReader();
    fileReader.onload = event => {
        try {
            const { result } = event.target;
            // 以二进制流方式读取得到整份excel表格对象
            const workbook = XLSX.read(result, { type: 'binary' });
            // 存储获取到的数据
            let data = [];
            // 遍历每张工作表进行读取（这里默认只读取第一张表）
            for (const sheet in workbook.Sheets) {
            // esline-disable-next-line
            if (workbook.Sheets.hasOwnProperty(sheet)) {
                // 利用 sheet_to_json 方法将 excel 转成 json 数据
                data = data.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]));
                // break; // 如果只取第一张表，就取消注释这行
            }
        }
        // 最终获取到并且格式化后的 json 数据
        const uploadData = data.map(item=> {
            return {
                id : Number(item['人员ID']),
                name : item['姓名'],
                idType: this.findIdType(item['证件类型'],'string'),
                credentialsId: item['证件号码'],
                tel: item['固定电话'],
                mobile: item['移动电话']
            }
        })
        console.log(uploadData)//这里得到了后端需要的json数据，调用接口传给后端就行了
        message.success('上传成功！') //这里用了antd中的message组件
        } catch (e) {
            // 这里可以抛出文件类型错误不正确的相关提示
            message.error('文件类型不正确！');
        }
    };
    // 以二进制方式打开文件
    fileReader.readAsBinaryString(files[0]);
}

2. Lier les événements

<button>
    导入Excel
    <input> 
    //这里对原有的input样式进行了修改，accept 属性定义了上传文件支持的类型，onChange 操作中的 importExcel 方法定义了上传文件时执行的操作。 
</button>

3. 4. Pour le téléchargement et la lecture de fichiers Les résultats sont des invites correspondantes (le composant de message dans la conception des fourmis est utilisé ici)

.upload_wrap {
  display: inline-block;
  position: relative;
  width: 94px;
  padding: 3px 5px;
  overflow: hidden;
}

.file_uploader {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  outline: none;
  opacity: 0;
  background-color: transparent;
}

.upload_text {
  display: inline-block;
  margin-left: 5px;
}

.upload_tip {
  display: inline-block;
  margin-left: 10px;
  color: #999;
}

5 Les données json obtenues.

La fonction d'importation et d'exportation est implémentée de cette manière, est-ce très simple ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!