Excel Import
html Code
<button style={{ color: '#1890ff', fontSize: '14px', cursor: 'pointer' }} onClick={() => { upFile(); }} >
Import
</button>
<input id="upFile" type="file" style={{ display: 'none' }} accept=".xlsx, .xls" onChange={upChange} />js Code
import XLSX from 'xlsx';
const upFile = () => {
const upSdaFile: any = document.getElementById('upFile');
upSdaFile.click();
};
const upChange = (e) => {
const file = e.target.files[0]; // Get the first file
const reader = new FileReader();
reader.readAsBinaryString(file); // Read this file
reader.onload = function (event) {
try {
const { result }: any = event.target;
const xlsxData = XLSX.read(result, { type: 'binary' }); // Read xlsx
let col: any = null;
// @ts-ignore
for (const n in xlsxData.Sheets) { // eslint-disable-line
// Here are several forms So write a loop
col = XLSX.utils.sheet_to_json(xlsxData.Sheets[n], { header: 1, defval: '', blankbook: true }); // Parse to array
}
console.log('col', col);
} catch (err) {
console.log('err', err);
}
};
};Be careful not to quote 0.18. Several xlsx, It conflicts with other files, and the error message cannot be found , To install "xlsx": "0.17.0"
Excel export
html Code
<Button onClick={() => ecportExcel()} > export </Button>js Code
const jsonData = [
{ name: ' Zhang San ', age: 12, gender: ' male ' },
{ name: ' Li Si ', age: 14, gender: ' male ' },
{ name: ' Wang Wu ', age: 15, gender: ' Woman ' },
]
// Front end implementation export
const ecportExcel = (jsonData: any) => {
// Column headings , commas , Each comma is separated by a cell
let str = ` Serial number , name , Age , Gender \n`;
const tableData: any = []
jsonData.forEach((el: any, index: number) => {
tableData.push({
index: index + 1,
name: el?.name || '',
age: el?.age || '',
gender: el?.gender || '',
})
});
// increase \t To prevent tables from displaying scientific notation or other formats
for (let i = 0; i < tableData.length; i++) { // eslint-disable-line
for (const key in tableData[i]) { // eslint-disable-line
str += `${`${tableData[i][key]}\t`},`;
}
str += '\n';
}
// encodeURIComponent Solve the Chinese garbled code
const uri = `data:text/xlsx;charset=utf-8,\ufeff${encodeURIComponent(str)}`;
// By creating a a Tag implementation
const link = document.createElement("a");
link.href = uri;
// Name the downloaded file
link.download = " Summary of enterprise commitments .xlsx";
link.click();
}
You are welcome to pay great attention to ！！！
js Import excel& export excel More articles about
- How to use JavaScript Import and export Excel file
This article was created and launched by the technical team of grape city Reprint please indicate the source : Grape city official website , Grape city provides professional development tools for developers . Solutions and services , Enabling developers . JavaScript It's a framework that covers a lot of things . Literal translation . You can easily customize the script of the client ...
- How to use JavaScript Implementation of front-end import and export excel file
One .SpreadJS brief introduction SpreadJS It's based on HTML5 Pure JavaScript Spreadsheet and grid function controls , With “ High speed and low consumption . Pure front end . Zero depends on ” Product features , Can be embedded in any operating system , At the same time satisfy .NE ...
- [ turn ]Java Import 、 export Excel
Original address :http://blog.csdn.net/jerehedu/article/details/45195359 One . Introduce At present B/S Pattern has become the mainstream of application development , And in the enterprise office system , There are often clients like this ...
- Share me based on NPOI+ExcelReport Implementation of import and export EXCEL Class library ：ExcelUtility （ To continue 3 piece - When exporting, dynamically generate multiple Sheet EXCEL）
ExcelUtility The class library passed by me ( Dream on the road ) Recent continuous optimization and new features , Now it is basically stable , Basically, it can satisfy most of EXCEL Export requirements , This class library has been used in our company ERP The system is fully used , The result is right , Today should be ...
- Share me based on NPOI+ExcelReport Implementation of import and export EXCEL Class library ：ExcelUtility （ To continue 2 piece - Template export comprehensive example ）
since ExcelUtility Since the introduction of class , After the actual use and continuous improvement in the project , Now we have made many optimizations and added many functions , This article will not cover the principle , Post the sample code and related templates directly . Result chart , So that we can quickly grasp , In addition, these examples say ...
- Share me based on NPOI+ExcelReport Implementation of import and export EXCEL Class library ：ExcelUtility （ sequel ）
The article I published last Saturday < Share me based on NPOI+ExcelReport Implementation of import and export EXCEL Class library :ExcelUtility> It has been warmly supported and recommended by everyone , Thank you again , The ExcelUtility ...
- Java Import and export of Excel
Use Jakarta POI Import . export Excel Jakarta POI It's a set of tools for accessing Microsoft format documents Java API.Jakarta POI There are many components , Some of them are used to operate Excel Format file HSSF and ...
- Java Import 、 export Excel
original text :Java Import . export Excel One . Introduce At present B/S Pattern has become the mainstream of application development , And in the enterprise office system , There are often customers who ask for : You need to use our report directly Excel open ( Telecommunication system . The banking system ). Or is it : We have ...
- Java Use in poi Import 、 export Excel
One . Introduce At present B/S Pattern has become the mainstream of application development , And in the enterprise office system , There are often customers who ask for : You need to use our report directly Excel open ( Telecommunication system . The banking system ). Or is it : We are used to using Excel Print . So in our reality ...
- js Realize one click Export Excel
Demo address :https://xibushijie.github.io/static/ExportToExcel.html <!DOCTYPE html> <html lang=&quo ...
Random recommendation
- spring mvc DispatcherServlet The prequel of detailed explanation ---FrameworkServlet
When doing a project, I met Controller Out of commission aop To intercept , It's learned from online search that : Use spring mvc Started two context:applicationContext and WebapplicationCont ...
- office Quick resume production
The year of graduation is a year of transformation from school to society , Facing a major turning point in life -- job-hunting . In the era of information explosion , Even if you can pull up the mountain, you will inevitably be left behind in the grass . A vision for the future , Yearning for a better life , More or less you need a ...
- pyqt5 Interface is separated from logic -- The decorator implementation of the signal slot
This article shows pyqt5 The decorator implementation of the signal slot ( Draw lessons from eirc6) A simple example . Realization function : Add two numbers , Show results . Pictured Two documents , The first is the interface file ui_calc.py # ui_calc.py ...
- java Read all types of files
java Read all types of files Several bags used bcmail-jdk14-132.jar/bcprov-jdk14-132.jar/checkstyle-all-4.2.jar/FontBox-0.1.0-d ...
- EMVTag series 8《IC Card public key certificate 》
Ø 9F46 IC Card public key certificate L: NI -C( Conditional ): If the support DDA Certified by the issuer IC Card public key Ø 9F47 IC Card public key index F: b T: 9F47 L: 1 or 3 C: Such as ...
- 【 turn 】 Git A detailed explanation of common orders （ Two ）---- Pretty good
Original website :http://blog.csdn.net/ithomer/article/details/7529022 Git It's a powerful distributed version management tool , It is not only suitable for managing the source code of large open source software ( Such as : ...
- Copy xml file
public static void copyFailFile(String bugID) throws Exception { File file = new File(".") ...
- Frame for playing video Vitamio The use of
I used this awesome frame , Then I did it at will . I found that I couldn't play the video . It took half a day to do well , Today, I did it casually , I found that I couldn't do it again . I'll cut in ! Now it finally comes out , I find that I always make mistakes in the steps or write less The general procedure : One : Import ...
- Django Summary of project construction and configuration
Install and create virtual environments Reference resources :linux Under the system Python Installation and use of virtual environment install Django package Enter the virtual environment first , Execute under the network : pip install django==1.8.7 1.8.7 Express dja ...
- solve RabbitMQ colony Channel shutdown: connection error error （HAProxy Load balancing ）
Related articles : build RabbitMQ Server High availability cluster Specific error messages : 2018-05-04 11:21:48.116 ERROR 60848 --- [.168.0.202:8001] o.s. ...
