Export excel data from the front end - jsonToExcel

Keywords: Javascript Excel JQuery npm less

Keke, I haven't blogged for a long time...

In the work, we met the pure front end, and exported the data to excel file. Start of text:

The first step of installation depends on:

npm i xlsx

Step 2 write the export function:

import XLSX from 'xlsx'

const exportJsonToExcel = (dataArr) => {
    const now = new Date()
    const wopts = { bookType: 'xlsx', bookSST: false, type: 'binary' };//The data here is used to define the format type of the export
    const wb = { SheetNames: ['Sheet1'], Sheets: {}, Props: {} };
    wb.Sheets['Sheet1'] = XLSX.utils.json_to_sheet(dataArr);//adopt json_to_sheet Turn to single page(Sheet)data
    saveAs(new Blob([s2ab(XLSX.write(wb, wopts))], { type: "application/octet-stream" }), `export file-${now.getFullYear()}${now.getMonth() + 1}${now.getDate()}.${wopts.bookType}`);
}

// export excel
const saveAs = (obj, fileName) => {
    var tmpa = document.createElement("a");
    tmpa.download = fileName || "download";
    const href = URL.createObjectURL(obj); //binding a Label
tmpa.href = href;

    tmpa.click(); //Analog Click to download
    setTimeout(function () { //Delayed release
        URL.revokeObjectURL(href); //use URL.revokeObjectURL()To release this object URL
    }, 100);
}

const s2ab = (s) => {
    if (typeof ArrayBuffer !== 'undefined') {
        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;
    } else {
        var buf = new Array(s.length);
        for (var i = 0; i != s.length; ++i) buf[i] = s.charCodeAt(i) & 0xFF;
        return buf;
    }
}

export default exportJsonToExcel

Step 3 call the exportJsonToExcel method:

  // Handle the download button. If there are less than 1000 buttons, the front-end downloads
  handleClickDownload = () => {
    exportToExcel(data)
  }

// Which is passed to exportToExcel The data format of is as follows: an array of objects, a row of data, key It's the head. value It's data.
data = [{'Contact number':item.Tel,
                'Customer label':item.CustomerLableValue,
                'Customer status':item.StateValue,
                'Follow up from last time(day)':item.OutTrackDay,
                'Customer source':item.SourceValue,
                'Salesman':item.SalesmanName,
                'Province':item.ProvinceName,
                'City':item.CityName,
                'District and county':item.CountyName,
                'Education':item.EducationName,
                'Gender':item.Gender == 0 ? 'male':'female',
                'Political outlook':item.PoliticalOutlookName,
                'QQ':item.QQ,
                'type':item.Type==1?'Individual customers':'Enterprise customer',
                'Contact times':item.ContactNum,
                'WeChat':item.WeChat,
                'error message': item.ErrorInfo
}]

Summary:

The third step is very simple. Format the data you want to export and pass it to the exportToExcel method. Call anywhere you want.

Second, let me learn two new methods: URL.createObjectURL() and URL.revokeObjectURL();

objectURL = URL.createObjectURL(blob): a static method creates a string containing the URL of the blob. This new URL represents the specified File object or blob object.

Every time this method is called, a new URL object will be created, even if the same parameters are used, so you need to use URL.revokeObjectURL() to release.

URL.revokeObjectURL(objectURL): release after use. If release before use, the objectURL is undefined. Lifting chestnuts:

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

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <meta charset="UTF-8">
    <title>test url</title>
</head>

<body>
    <p>test revoke before use</p>
    <input type="file" id="test" />
    <br />
    <br />
    <br />
    <p>test use revoke use</p>
    <input type="file" id="test3" />
    <script>
        $('#test').on('change', function (e) {
            var newImg = document.createElement("img");
            var url = URL.createObjectURL(e.target.files[0])
            console.log(url);

            newImg.src = url;
            URL.revokeObjectURL(url); // It's released here! No picture
            document.body.appendChild(newImg);
            console.log(url);
        });

        $('#test3').on('change', function (e) {
            var newImg = document.createElement("img");
            var url = URL.createObjectURL(e.target.files[0])

            newImg.src = url;
            newImg.onload = function () {
                URL.revokeObjectURL(url); // onload Time to release, no problem, because it has been loaded!
                document.body.appendChild(newImg);
            }
        });
    </script>
</body>

</html>

Posted by Atanu on Mon, 02 Dec 2019 21:08:37 -0800

Programmer Group

Export excel data from the front end - jsonToExcel

The first step of installation depends on:

Step 2 write the export function:

Step 3 call the exportJsonToExcel method:

Summary:

Hot Keywords