Hướng dẫn can you export html to excel? - bạn có thể xuất html sang excel không?

Nếu bạn có một số bảng xuất sắc trên máy tính của mình nhưng không ở định dạng Excel, bạn có thể nhập dữ liệu từ chúng để vượt trội không? Trong một trong những bài viết trước của tôi, tôi đã giới thiệu cách chuyển đổi TXT thành Excel. Ở đây tôi muốn chia sẻ mẹo nhập dữ liệu từ HTML sang Excel.importing the data from HTML to Excel as well.

1. Mở tệp Excel. Chuyển sang tab dữ liệu và nhấp vào các kết nối hiện có trong phần dữ liệu bên ngoài.Data tab and click Existing Connections in Get External Data section.

2. Nhấp vào Duyệt để biết thêm ở góc dưới bên trái của cửa sổ bật ra.Browse for More… in the lower-left corner of the popping out window.

3. Tìm tệp HTML bạn muốn nhập trong thư mục, sau đó bấm đúp vào nó hoặc nhấn mở.Open.

4. Theo đề xuất của mẹo, nhấp vào biểu tượng mũi tên để chọn khu vực dữ liệu sau đó nhấn nhập vào góc dưới bên phải của cửa sổ.Import in the lower-right corner of the window.

5. Bạn có thể xác định vị trí bảng mới tại bảng tính hiện có hoặc bảng tính mới. Chọn vị trí để đặt dữ liệu, sau đó bấm OK. OK.

6. Bảng trong tệp HTML đã được nhập vào bảng Excel. Bạn có thể điều chỉnh nó một cách tự do ngay bây giờ.

Nội dung

• 1 bảng HTML HTML table
• 2 Mảng JavaScript Javascript array
  • 2.1 Ví dụ: Tải xuống bảng HTML ở định dạng Excel [.csv] Example : Download the HTML table in Excel [.csv] format
    • 2.1.1 Bước 1: Tạo bảng HTML Step 1 : Create the HTML table
    • 2.1.2 Bước 2: Thêm thuộc tính CSS để tạo kiểu bảng Step 2 : Add CSS properties to style the table
    • 2.1.3 Bước 3: Tạo nút Tải xuống Step 3 : Create the download button
    • 2.1.4 Bước 4: Triển khai chức năng JavaScript để tải xuống bảng HTML trong tệp CSV. Step 4 : Implement Javascript function to download the HTML table in CSV file.
    • 2.1.5 Bước 5: Gọi chức năng JavaScript bằng sự kiện Onclick Step 5 : Call the Javascript function using title event
  • 2.2 Mã hoàn thành để tham khảo: Complete code for reference :

HTML cung cấp thẻ để hiển thị dữ liệu ở định dạng hàng và cột. Chúng tôi có thể đã thấy những bảng đó trong một số trang web. Ví dụ: Bảng giá cổ phiếu, Báo cáo lương nhân viên, Báo cáo đánh dấu sinh viên, v.v. Hình ảnh dưới đây đang hiển thị báo cáo các trường hợp Corona ở định dạng bảng HTML.

Nếu chúng tôi có tùy chọn tải xuống các bảng đó trong Excel, sẽ rất hữu ích khi phân tích dữ liệu. Cho phép tạo bảng mẫu bằng HTML và bật tùy chọn Tải xuống bằng JavaScript.

Mảng JavaScript

Mảng JavaScript được sử dụng để lưu trữ bộ sưu tập các giá trị trong một biến duy nhất. Như chúng ta đã biết, bảng HTML có một bộ sưu tập các hàng và cột. Chúng ta có thể thêm các giá trị đó vào mảng. Sau đó, các dấu phân cách sẽ được thêm vào cho mỗi giá trị hàng và cột để tạo bản ghi Excel.

var result = [‘công ty, nhóm nhóm, nhóm, giá trị trước đây

• Mỗi hàng trong một bảng được phân định bởi ký tự dòng mới [\ n]\n]
• Mỗi cột trong một bảng được phân định bởi ký tự dấu phẩy [,],]

Ví dụ: Tải xuống bảng HTML ở định dạng Excel [.csv]

Trong ví dụ này, chúng tôi sẽ tạo bảng bảng giá cổ phiếu bằng nút tải xuống - để xuất bảng trong tệp CSV.

Bước 1: Tạo bảng HTML

Mã HTML dưới đây tạo ra bảng bảng giá cổ phiếu.

• - Xác định bảng HTML chứa tập hợp các hàng và giá trị cột
• - Nó tạo ra phần tử hàng trong bảng.
• - Giá trị ô tiêu đề được tạo trong thẻ này.
• - Xác định ô/cột dữ liệu của bảng.

Trong mã HTML, ID [tblstocks] được xác định cho thẻ. Đối với ID đó, chúng ta có thể thêm các thuộc tính CSS [lề, màu, kiểu phông chữ] sẽ thay đổi kiểu bảng.

& nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;tblStocks] is defined for the

Bootstrap cung cấp các biểu tượng đồ họa từ bộ nửa glyphicon. Cho phép tạo nút với biểu tượng tải xuống bằng glypicons.

& nbsp; & nbsp;

Nhận bảng HTML vào biến JavaScript bằng ID TBLSTOCKS, được gán cho thẻ.

• Vòng lặp qua biến để tìm nạp các giá trị ô và thêm các giá trị đó vào mảng JavaScript. Ở đây chúng tôi có mảng bên trong một mảng có nghĩa là mảng bên ngoài chứa số lượng hàng và mỗi mảng bên trong chứa số lượng cột cho mỗi hàng.tblStocks” which is assigned for tag.
  ]

  rows=[=[ [column1,column2,column3,column4,column5],column1,column2,column3,column4,column5], [column1,column2,column3,column4,column5],...column1,column2,column3,column4,column5],... Tạo phần tử thẻ với thuộc tính tải xuống được sử dụng để tải xuống dữ liệu khi người dùng nhấp vào nút. Ở đây chúng tôi đang chỉ định định dạng dữ liệu là CSV.

  • & nbsp; & nbsp; & nbsp; & nbsp;/ * Nhận dữ liệu HTML bằng phần tử bằng ID */ tag element with download attribute which used to download the data when user clicks the button. Here we are specifying data format as csv.

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

  functionexportData[]{exportData[]{ & nbsp; & nbsp; & nbsp; & nbsp;/ * khai báo biến mảng *///* Get the HTML data using Element by Id */     vartable=document.getElementById["tblStocks"];vartable=document.getElementById["tblStocks"]; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; // lặp qua các hàng của bảng/* Declaring array variable */     varrows=[];varrows=[]; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; // hàng//iterate through rows of table     for[vari=0,row;row=table.rows[i];i++]{for[vari=0,row; row=table.rows[i];i++]{ & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;//rows would be accessed using the "row" variable assigned in the for loop & nbsp; & nbsp; & nbsp; & nbsp;/ * Thêm một bản ghi mới trong mảng *///Get each cell value/column from the row         column1=row.cells[0].innerText;column1=row.cells[0].innerText;         column2=row.cells[1].innerText;column2= row.cells[1].innerText;         column3=row.cells[2].innerText;column3=row.cells[2].innerText;         column4=row.cells[3].innerText;column4 =row.cells[3].innerText;         column5=row.cells[4].innerText;column5=row.cells[4].innerText; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; // hàng/* add a new records in the array */         rows.push[rows.push[             [[                 column1,column1,                 column2,column2,                 column3,column3,                 column4,column4,                 column5column5             ]]         ];];         }}         csvContent="data:text/csv;charset=utf-8,";csvContent="data:text/csv;charset=utf-8,"; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; / * Thêm dấu phân cách cột dưới dạng dấu phẩy [,] và mỗi hàng được chia bởi ký tự dòng mới [\ n] *//* add the column delimiter as comma[,] and each row splitted by new line character [\n] */         rows.forEach[function[rowArray]{rows.forEach[function[rowArray]{             row=rowArray.join[","];row= rowArray.join[","]; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;csvContent+=row+"\r\n";         }];}]; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;/ */* create a hidden DOM node and set its download attribute */         varencodedUri=encodeURI[csvContent];varencodedUri=encodeURI[csvContent];         varlink=document.createElement["a"];varlink= document.createElement["a"];         link.setAttribute["href",encodedUri];link.setAttribute["href",encodedUri];         link.setAttribute["download","Stock_Price_Report.csv"];link.setAttribute["download", "Stock_Price_Report.csv"];         document.body.appendChild[link];document.body.appendChild[link]; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; / * Tải xuống tệp dữ liệu có tên "Stock_Price_Report.csv" *///* download the data file named "Stock_Price_Report.csv" */         link.click[];link.click[]; }

  Bước 5: Gọi chức năng JavaScript bằng sự kiện Onclick

  Ở đây, chúng tôi đã tạo chức năng JavaScript trong các tệp khác nhau có tên là Tải xuống DownloadFile.js. Bao gồm tệp đó trong HTML bằng cách sử dụng TAG. Thẻ tập lệnh này nên được đặt bên trong thẻ. tag. This script tag should be placed inside the tag.

  Thêm nút tải xuống bằng Glyphicontype="text/javascript"src="downloadFile.js">

  Cuối cùng, hãy tạo sự kiện Onclick cho nút Danh sách tải xuống để gọi hàm JavaScript ExportData []. title event for the Download List button to call the javascript function exportData[].

  Thêm nút tải xuống bằng Glyphiconbutton title="exportData[]">      Cuối cùng, hãy tạo sự kiện Onclick cho nút Danh sách tải xuống để gọi hàm JavaScript ExportData [].Download list Thêm nút tải xuống bằng Glyphicon/button>

  Cuối cùng, hãy tạo sự kiện Onclick cho nút Danh sách tải xuống để gọi hàm JavaScript ExportData [].Download list button

  & nbsp; & nbsp; & nbsp; & nbsp; danh sách tải xuống

  Như bạn có thể thấy bên dưới, bảng HTML được tải xuống trong tệp CSV [stock_price_report.csv] khi người dùng nhấp vào nút Danh sách tải xuống

  Tải xuống bảng HTML trong CSV

  Bảng HTML được tải xuống trong tệp CSV [stock_price_report.csv]

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68

  Cuối cùng, hãy tạo sự kiện Onclick cho nút Danh sách tải xuống để gọi hàm JavaScript ExportData [].Export HTML data toexcel & nbsp; & nbsp; & nbsp; & nbsp; danh sách tải xuốngUS NASDAQ Stocks price list                Như bạn có thể thấy bên dưới, bảng HTML được tải xuống trong tệp CSV [stock_price_report.csv] khi người dùng nhấp vào nút Danh sách tải xuống#tblStocks { Tải xuống bảng HTML trong CSVfont-family: "Trebuchet MS",Arial,Helvetica,sans-serif;           border-collapse:collapse;border-collapse:collapse;           width:100%;width:100%;         }} Bảng HTML được tải xuống trong tệp CSV [stock_price_report.csv]#tblStocks td, #tblStocks th {           border:1pxsolid#ddd;border:1pxsolid#ddd;           padding:8px;padding:8px;         }} Tạo tệp CSV trong JavaScript#tblStocks tr:nth-child[even]{background-color:#f2f2f2;} Hoàn thành mã để tham khảo:#tblStocks tr:hover {background-color: #ddd;} & nbsp; & nbsp; & nbsp; & nbsp; xuất dữ liệu html toexcel#tblStocks th {             padding-top:12px;padding-top:12px;             padding-bottom:12px;padding-bottom: 12px;             text-align:left;text-align:left;             background-color:#294c67;;background-color:#294c67;;             color:white;color: white;           }}        & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;/head> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;body>                                       CompanyCompany                 GroupGroup Cuối cùng, hãy tạo sự kiện Onclick cho nút Danh sách tải xuống để gọi hàm JavaScript ExportData [].Prev Close[$] & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;Current Price[$]                 Change[%]Change[%]                               & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;Life HealthCare INC                 AA                 35.5835.58                 38.4538.45                 +8.06+8.06                               & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;Den Networks Ltd                 AA                 72.5572.55                 77.6077.60                 +6.96+6.96                               & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;RMG Cements                 BB                 140140                 135135                 -3.57-3.57                                                        & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;Download list & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;/body> & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;/html>

  Tệp JavaScript: downloadfile.js

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45

  functionexportData[]{exportData[]{ & nbsp; & nbsp; & nbsp; & nbsp;/ * Nhận dữ liệu HTML bằng phần tử bằng ID *//* Get the HTML data using Element by Id */     vartable=document.getElementById["tblStocks"];vartable=document.getElementById["tblStocks"]; & nbsp; & nbsp; & nbsp; & nbsp;/ * khai báo biến mảng *///* Declaring array variable */     varrows=[];varrows=[]; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; // lặp qua các hàng của bảng//iterate through rows of table     for[vari=0,row;row=table.rows[i];i++]{for[vari=0,row; row=table.rows[i];i++]{ & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; // hàng//rows would be accessed using the "row" variable assigned in the for loop & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;//Get each cell value/column from the row         column1=row.cells[0].innerText;column1=row.cells[0].innerText;         column2=row.cells[1].innerText;column2= row.cells[1].innerText;         column3=row.cells[2].innerText;column3=row.cells[2].innerText;         column4=row.cells[3].innerText;column4 =row.cells[3].innerText;         column5=row.cells[4].innerText;column5=row.cells[4].innerText; & nbsp; & nbsp; & nbsp; & nbsp;/ * Thêm một bản ghi mới trong mảng *//* add a new records in the array */         rows.push[rows.push[             [[                 column1,column1,                 column2,column2,                 column3,column3,                 column4,column4,                 column5column5             ]]         ];];         }}         csvContent="data:text/csv;charset=utf-8,";csvContent="data:text/csv;charset=utf-8,"; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;/ * Thêm dấu phân cách cột dưới dạng dấu phẩy [,] và mỗi hàng được chia bởi ký tự dòng mới [\ n] *//* add the column delimiter as comma[,] and each row splitted by new line character [\n] */         rows.forEach[function[rowArray]{rows.forEach[function[rowArray]{             row=rowArray.join[","];row= rowArray.join[","]; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;csvContent+=row+"\r\n";         }];}]; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;/ */* create a hidden DOM node and set its download attribute */         varencodedUri=encodeURI[csvContent];varencodedUri=encodeURI[csvContent];         varlink=document.createElement["a"];varlink= document.createElement["a"];         link.setAttribute["href",encodedUri];link.setAttribute["href",encodedUri];         link.setAttribute["download","Stock_Price_Report.csv"];link.setAttribute["download", "Stock_Price_Report.csv"];         document.body.appendChild[link];document.body.appendChild[link]; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp; & nbsp;/ * Tải xuống tệp dữ liệu có tên "Stock_Price_Report.csv" *///* download the data file named "Stock_Price_Report.csv" */         link.click[];link.click[]; }

  Bài viết đề xuất

  • Làm thế nào để tạo văn bản nhấp nháy bằng HTML và CSS?
  • Làm thế nào để hiển thị thư văn bản bằng chữ cái bằng CSS?