1 introduction

1.1 Service Scenarios

Import Excel form from the front desk to obtain batch data.

Export Excel tables based on an array.

Xrkffgg.github. IO /Kvue/#/Js/0…

2 Implementation Principles

2.1 Importing the Tool library

File-saver, XLSX, script-loader

npm install -S file-saver xlsx

npm install -D script-loader

2.2 the import Excel

2.2.1 Element Upload control

<el-upload
    class="upload-demo"
    action=""
    :on-change="handleChange"
    :on-exceed="handleExceed"
    :on-remove="handleRemove"
    :file-list="fileListUpload"
    :limit="limitUpload"
    accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel"
    :auto-upload="false">
    <el-button size="small" type="primary"<div slot= </el-button"tip" class="el-upload__tip"</div> </el-upload>Copy the code

LimitUpload = 1 You can upload only one file

Accept is the default open uploadable file format

handleChange(file, fileList){
    this.fileTemp = file.raw
},

handleRemove(file,fileList){
    this.fileTemp = null
},
Copy the code

FileTemp defines a variable that points to the newly uploaded attachment, starting with null.

Here we find that the control file.raw is the type of file we want to use.

2.2.2 Import Judgment

if(this.fileTemp){
    if((this.fileTemp.type == 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet') || (this.fileTemp.type == 'application/vnd.ms-excel')){
        this.importfxx(this.fileTemp)
    } else {
        this.$message({
            type:'warning',
            message:'Attachment format is wrong, please delete and upload again! '}}})else {
    this.$message({
        type:'warning',
        message:'Please upload the attachment! '})}Copy the code

2.2.3 Importing functions

importfxx(obj) {
    let_this = this; // This. File = obj var rABS =false; Var f = this.file; var reader = new FileReader(); //if(! FileReader.prototype.readAsBinaryString) { FileReader.prototype.readAsBinaryString =function(f) {
        var binary = "";
        var rABS = false; Var pt = this; var wb; Var outdata; var reader = new FileReader(); reader.onload =function(e) {
        var bytes = new Uint8Array(reader.result);
        var length = bytes.byteLength;
        for(var i = 0; i < length; i++) {
            binary += String.fromCharCode(bytes[i]);
        }
        var XLSX = require('xlsx');
        if(rABS) {wb = xlsx.read (btoa(fixdata(binary)), {// Manual conversiontype: 'base64'
            });
        } else {
            wb = XLSX.read(binary, {
                type: 'binary'}); } outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]); //outdata is what you want this.da = [...outdata]let arr = []
            this.da.map(v => {
                let obj = {}
                obj.code = v['device ID']
                obj.type = v['Device Model']
                arr.push(obj)
            })
            return arr
        }
        reader.readAsArrayBuffer(f);
    }
    
    if(rABS) {
        reader.readAsArrayBuffer(f);
    } else{ reader.readAsBinaryString(f); }},Copy the code

Arr is what we want, which is an array. Each value is an object containing two properties, code Type.

In Excel, the format is horizontal device ID and device model.

2.3 export Excel

2.3.1 Importing JS Files

Download address: – Github

Put two of these JS files into your own project.

2.3.2 Modifying the ADDRESS in the JS File

Export2Excel.js
Blob.js
Export2Excel.js

These files do not support import, so script-loader is required to mount them to the global environment.

2.3.3 Exporting functions

getExcel(res) {
    require.ensure([], () => {
        const { export_json_to_excel } = require('.. /.. /introduce/Export2Excel.js')
        const tHeader = ['name'.'age']
        const filterVal = ['name'.'age']
        const list = res
        const data = this.formatJson(filterVal, list)
        export_json_to_excel(tHeader, data, 'Exported List name')
    })
},

formatJson(filterVal, jsonData) {
    return jsonData.map(v => filterVal.map(j => v[j]))
},
Copy the code

The references here are named require(‘.. /.. /introduce/Export2Excel.js’)

Res for incoming array, format, such as: res = [{name: ‘white’ age: ’18’}, {name: ‘black’ age: ’16’}]

THeader is the name of the exported Excel table header, and the name of the exported list is the name of the exported Excel table

The download location of Excel depends on the download location set by the browser

3 afterword.

Thank you for your support. If insufficient, welcome to point out, mutual encouragement.

If you like it, please like it and thank you 😂

Welcome to my: [Github] [Nuggets] [Jane book] [CSDN] [OSCHINA] [SF]

3.1 Reference Materials

• www.cnblogs.com/liguiwang..
• www.cnblogs.com/qiu…

This article adoptsCreative Commons Attribution – Non-commercial Use – Same way Share 4.0 International LicenseGrant permission.

Source: github.com/xrkffgg/Too…