Hướng dẫn export html table to csv javascript - xuất bảng html sang csv javascript
|
Các giá trị phân tách dấu phẩy hoặc CSV là một loại tệp văn bản trong đó mỗi giá trị được phân tách bằng dấu phẩy. Các tệp CSV rất hữu ích cho việc nhập và xuất dữ liệu sang các ứng dụng phần mềm khác. or CSV is a type of text file where each value is delimited by a comma. CSV files are very useful for the import and export of data to other software applications. Show Đôi khi trong khi phát triển các ứng dụng web, bạn có thể đi vào một kịch bản mà bạn cần tải xuống tệp CSV được chuyển đổi từ bảng HTML. Trong bài đăng này, chúng ta hãy thảo luận về cách tạo tính năng này bằng cách sử dụng JavaScript thuần túy mà không cần sử dụng bất kỳ plugin, mô -đun hoặc khung ưa thích nào. Cách tiếp cận: Tạo một bảng HTML. Bằng cách sử dụng mô -đun đối tượng JavaScript và tài liệu (DOM), chúng tôi sẽ trích xuất từng dữ liệu cột theo một hàng và kết hợp dữ liệu bằng dấu phẩy. Sau khi thực hiện việc này với mỗi hàng, một lần nữa sử dụng DOM, chúng tôi sẽ tạo một liên kết tải xuống mới và kích hoạt liên kết bằng trình nghe sự kiện JavaScript để tải xuống dữ liệu để tạo tệp CSV. Create an HTML table. By using JavaScript and Document object module (DOM), we are going to extract each column data in a row and combine the data using commas. After doing this to each row, again using DOM, we are going to create a new download link and trigger the link using JavaScript event listeners to download the data to form a CSV file. Bước 1: Tạo bảng HTML: Tạo trang HTML đơn giản với bảng và nút. Nút này sẽ được sử dụng làm kích hoạt để chuyển đổi bảng thành các giá trị được phân tách bằng dấu phẩy và tải xuống dưới dạng tệp CSV. Áp dụng phong cách CSS cần thiết của riêng bạn. & NBSP; Create a simple HTML page with a table and a button. This button will be used as a trigger to convert the table into comma-separated values and download it in the form of a CSV file. Apply your own needed CSS stylings. HTML
Bước 2: Chuyển đổi dữ liệu bảng thành các giá trị được phân tách bằng dấu phẩy: Viết hàm JavaScript để truy xuất dữ liệu bảng và chuyển đổi nó thành các giá trị được phân tách bằng dấu phẩy. Sử dụng mô hình đối tượng tài liệu để truy cập dữ liệu bảng trong mỗi cột của hàng. Chức năng này nên được kích hoạt khi người dùng nhấp vào nút tải xuống. Write a JavaScript function to retrieve the table data and convert it to comma-separated values. Make use of the document object model to access table data in each column of the rows. This function should be triggered when the user clicks the download button. JavaScript
Khi hàm TableTocSv () được kích hoạt, nó sẽ truy cập vào mỗi dữ liệu hàng bảng bằng mô hình đối tượng tài liệu. GetEuityByTagName (‘TR,) lấy tất cả dữ liệu hàng bảng và lưu trữ nó theo biến hàng. Các hàng [i] .querySelectorall (‘td, th,) sẽ nhận được từng dữ liệu cột của hàng bảng đó. Sau đó, nó được lưu trữ trong biến CSVROW. Dữ liệu biến CSVROW được kết hợp bằng dấu phẩy để biểu thị một hàng tệp CSV và sau đó nó được lưu trữ trong biến CSV_DATA đại diện cho dữ liệu của tệp CSV của chúng tôi kết hợp. Sau đó, chúng tôi tham gia các giá trị CSV_DATA bằng cách sử dụng ký tự dòng mới vì mỗi hàng trong tệp CSV được biểu diễn trong một dòng mới. Bây giờ dữ liệu của chúng tôi đã sẵn sàng để được xuất thành tệp CSV. getElementByTagName(‘tr’) retrieves all table row data and stores it in rows variable. The rows[i].querySelectorAll(‘td,th’) will get each column data of that table row. It is then stored in csvrow variable. The csvrow variable data are combined using commas to represent a row of a CSV file and then it is stored in a csv_data variable which represents the data of our CSV file in combination. We then join csv_data values using the newline character as each row in a CSV file is represented in a new line. Now our data is ready to be exported into a CSV file. Bước 3: Viết tập lệnh để tải xuống tệp CSV: Bây giờ chúng tôi đã sẵn sàng dữ liệu được chuyển đổi, chúng tôi cần viết tập lệnh để tạo tệp CSV, cung cấp dữ liệu của chúng tôi vào đó và kích hoạt trình duyệt để tải xuống tự động sau khi người dùng đã nhấp vào nút tải xuống. Vì hàm này sẽ được kích hoạt sau khi dữ liệu bảng được chuyển đổi, chúng tôi sẽ gọi hàm này bên trong hàm TableTocSv (). Now that we have our converted data ready, we need to write a script to create a CSV file, feed our data into it, and trigger the browser to download it automatically after the user has clicked the download button. Since this function will be triggered after the table data is converted, we will call this function inside tableToCSV() function. JavaScript
Hàm này sẽ lấy dữ liệu CSV được hình thành trước đó, làm đối số. Chúng tôi sẽ tạo một tệp mới bằng cách tạo một đối tượng Blob thuộc loại CSV và sau đó cung cấp dữ liệu CSV của chúng tôi vào đó. Chúng tôi cần một liên kết để kích hoạt cửa sổ trình duyệt để tải xuống tệp. Tuy nhiên, chúng tôi không có liên kết nào trong HTML của chúng tôi để làm như vậy. Vì vậy, chúng tôi sẽ tạo một liên kết mới bằng cách sử dụng DOM và cung cấp các thuộc tính của nó với các giá trị phù hợp. Liên kết này được tạo ra không nên hiển thị cho người dùng vì liên kết này chỉ dành cho mục đích kích hoạt tải xuống chứ không phải cho bất kỳ mục đích nào khác. Vì vậy, chúng tôi cần đảm bảo rằng liên kết này không hiển thị cho người dùng và bị xóa sau khi quá trình kích hoạt tải xuống kết thúc. Một lần nữa chúng tôi có thể sử dụng DOM để đáp ứng tất cả các yêu cầu của chúng tôi. & NBSP; Sử dụng Trình nghe sự kiện Click (), chúng tôi có thể tự động để liên kết được nhấp và tải xuống tệp CSV của chúng tôi. Bây giờ tệp CSV của chúng tôi nên được tải xuống thành công. click() event listener, we can automatically let the link be clicked and download our CSV file. Now our CSV file should be successfully downloaded. Mã cuối cùng: HTML
Output:  Bảng HTML đến tệp CSV Làm cách nào để xuất một bảng từ HTML sang CSV?Bước 2: Chuyển đổi dữ liệu bảng thành các giá trị được phân tách bằng dấu phẩy: Viết hàm JavaScript để truy xuất dữ liệu bảng và chuyển đổi nó thành các giá trị được phân tách bằng dấu phẩy. Sử dụng mô hình đối tượng tài liệu để truy cập dữ liệu bảng trong mỗi cột của hàng. Chức năng này nên được kích hoạt khi người dùng nhấp vào nút tải xuống.Write a JavaScript function to retrieve the table data and convert it to comma-separated values. Make use of the document object model to access table data in each column of the rows. This function should be triggered when the user clicks the download button.
Làm thế nào để bạn xuất tải xuống bảng HTML sang Excel bằng JavaScript?Các bước để xuất bảng HTML sang Excel bằng JavaScript.. Đánh dấu HTML: Thêm bảng với một số dữ liệu .. Nhập thư viện SheetJS .. Mã JavaScript: Sử dụng dữ liệu bảng xuất thư thư viện SheetJS vào tệp Excel .. Làm cách nào để xuất một bảng từ CSV?Cách xuất dữ liệu máy chủ SQL từ bảng sang tệp CSV.. Contents.. Nhấp chuột phải vào cơ sở dữ liệu và điều hướng đến các tác vụ> Xuất dữ liệu:. Trong cửa sổ Nhập và Xuất SQL Server, nhấp vào Tiếp theo:. Tùy chỉnh dữ liệu trong cửa sổ Chọn nguồn dữ liệu:. Sau đó nhấp vào Tiếp theo .. Tùy chỉnh dữ liệu trong cửa sổ Chọn đích:. Làm cách nào để xuất dữ liệu từ bảng HTML sang Excel?Mã JavaScript: TableID - Yêu cầu.Chỉ định ID bảng HTML để xuất dữ liệu từ.Tên tệp - Tùy chọn.Chỉ định tên tệp để tải xuống dữ liệu Excel. |
