Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to import and export Excel files in React". The editor shows you the operation process through actual cases. The method of operation is simple and fast, and it is practical. I hope that this article "how to import and export Excel files in React" can help you solve the problem.

Presentation layer

Here I am using the Upload upload component of antd

Reference part of the antd code

Import {Button,Table,Upload} from "antd"; Excel imports Excel and exports business layer

First of all, analyze the work:

Import Excel work: users upload Excel tables, convert table contents into json objects for convenient back-end processing, and the back-end stores data in the database

Export Excel work: get the back-end json format data, the front end converts the data into sheet workbook objects, and the generated objects are converted to Excel tables for download and export

Here are the technical details

Core plug-in xlsx

Install xlsx:npm install xlsx-- save-dev

It mainly introduces the core api used:

XLSX.read (data,type) / / parsing Excel data

Workbook.Sheets [workbook.SheetNames [0]] / / fetches the first sheet table in the workbook object, which stipulates that the user has only one sheets and does not understand the following explanation of workbook.

XLSX.utils.sheet_to_json (wb.Sheets [wb.SheetNames [0]], {header:1,defval: ""}) / / convert workbook objects to an array of JSON objects, note that defval is not set'", then the default value is empty

XLSX.utils.json_to_sheet (json) / / convert a json object to a workbook object

/ / workbook understands: {SheetNames: ["sheet1", "sheet2"], Sheets: {/ / worksheet "sheet1": {/ / cell "A1": {.}, / cell "A2": {.},.} / / worksheet "sheet2": {/ / cell "A1": {...}, / / cell "A2": {...},...}} excel Import

Core code:

Const f = file;const reader = new FileReader (); reader.onload = function (e) {try {const datas = e.target.result; const workbook = XLSX.read (datas, {type: "binary",}); / / parsed datas const first_worksheet = workbook.Sheets [workbook.SheetNames [0]] / / is the first sheet const jsonArr = XLSX.utils.sheet_to_json of the worksheet in the workbook (first_worksheet, {header: 1) defval: ""}); / / converts workbook objects into an array of JSON objects handleImpotedJson (jsonArr) / / Array processing message.success ("Excel upload parsed successfully!") } catch (e) {message.error ("incorrect file type! or file parsing error")}}; reader.readAsBinaryString (f)

Understand:

The FileReader object instantiates the file object for processing in the onload event

Parsing data by XLSX.read

XLSX.utils.sheet_to_json (first_worksheet, {header: 1) defval: ""}) converts the parsed workbook object into a JSON object

Excel export

Core code:

Const downloadExcel = () = > {const json = handleExportedJson (data) const sheet = XLSX.utils.json_to_sheet (json); openDownloadDialog (sheet2blob (sheet, "Sheet1"), "download file .xls")} const handleExportedJson = (array) = > {...} / / process Json data const openDownloadDialog = (url, saveName) = > {...} / / Open and download const sheet2blob = (sheet, sheetName) = > {.} / / convert to blob type

Understand:

Get the processed json format data

Convert XLSX.utils.json_to_sheet (json) to sheet workbook object

Sheet2blob (sheet,saveName) converts workbook objects to blob

OpenDownloadDialog creates a blob address to download via tags.

Excel Export plug-in (js-export-excel)

Why there is no self-implemented code before, it is because there are useful plug-ins, the code is very simple.

Core code:

/ / directly export the file let dataTable = []; / / the data content in the excel file let option = {}; / / option represents the excel file dataTable = data; / / data source option.fileName = "download file" / / excel file name console.log ("data===", dataTable) option.datas = [{sheetData: dataTable, / / data source sheetName in excel file: "Sheet1", / / sheet page name in excel file sheetFilter: ["id", "name", "belong", "step", "tag"], / / column data to be displayed in excel file sheetHeader: ["Project id" "Project name", "Company", "Project Phase", "Project label"], / / header name of each column in the excel file}] let toExcel = new ExportJsonExcel (option) / / generate excel file toExcel.saveExcel (); / / download excel file

For the basic usage of this plug-in, it also supports export of Blob, compression, etc. For more information, please see the official website.

Explain the core option:

FileName download file name (default: download)

Datas data:

/ * multiple sheet*//* each sheet is an object * / [{sheetData: [], / / data sheetName: ", / / (optional) sheet name, default is sheet1 sheetFilter: [], / / (optional) column filtering (only works when data is object) sheetHeader: [] / / first row, header columnWidths: [] / (optional) column width, need to correspond to column order}]

Browser support: ie 10 + I tested demo can be used in chrom, Safari, IE.

Realize the effect

This is the end of the introduction of "how to import and export Excel files by React". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.