Hướng dẫn xuất file excel nodejs

Trong các bài hướng dẫn trước, chúng ta đã sử dụng nhiều lần câu lệnh require("fs"). Đây là cú pháp để khai báo mô-đun fs để có thể gọi các phương thức xử lý File I/O hay đọc nghi file trong Node.js. Cú pháp như sau:

Nội dung chính Show

  • Khái niệm đồng bộ vs không đồng bộ trong Node.js
  • Các Flag được sử dụng cho việc đọc ghi file trong Node.js
  • Đọc thông tin metadata của File trong Node.js
  • Ghi file trong Node.js
  • Đọc dữ liệu từ File trong Node.js
  • Đóng File trong Node.js
  • Truncate một File trong Node.js
  • Xóa File trong Node.js
  • Tạo thư mục trong Node.js
  • Đọc thư mục trong Node.js
  • Xóa thư mục trong Node.js


Nội dung chính

  • Khái niệm đồng bộ vs không đồng bộ trong Node.js
  • Mở một File trong Node.js
  • Các Flag được sử dụng cho việc đọc ghi file trong Node.js
  • Đọc thông tin metadata của File trong Node.js
  • Ghi file trong Node.js
  • Đọc dữ liệu từ File trong Node.js
  • Đóng File trong Node.js
  • Truncate một File trong Node.js
  • Xóa File trong Node.js
  • Tạo thư mục trong Node.js
  • Đọc thư mục trong Node.js
  • Xóa thư mục trong Node.js

Khái niệm đồng bộ vs không đồng bộ trong Node.js

Mỗi phương thức trong fs Module có các form đồng bộ và các form không đồng bộ. Các phương thức không đồng bộ nhận một tham số cuối cùng là một hàm callback thực thi khi kết thúc và nhận tham số đầu tiên là một hàm callback để xử lý lỗi. Việc sử dụng các phương thức không đồng bộ là tốt hơn các phương thức đồng bộ, bởi vì các phương thức không đồng bộ không bao giờ khóa trình thực thi chương trình trong khi phương thức đồng bộ thì có.

Ví dụ

Để minh họa hoạt động I/O trong Node.js, đầu tiên bạn tạo input.txt có nội dung:

Huong dan doc nghi file trong Node.js

Tạo file1.js. Như trên đã trình bày, mỗi phương thức của fs Module đều có hai form là đồng bộ và không đồng bộ. Để đọc dữ liệu, mình sử dụng phương thức readFile() của form không đồng bộ và readFileSync() của form đồng bộ để đọc dữ liệu. Hai phương thức này nhận tham số đầu tiên là tên file để đọc dữ liệu từ đó.

var fs = require("fs"); 
// Phuong thuc doc file khong dong bo
fs.readFile('input.txt', function (err, data) {
   if (err) {
       return console.error(err);
   }
   console.log("Phuong thuc doc file khong dong bo: " + data.toString());
});
// Phuong thuc doc file dong bo
var data = fs.readFileSync('input.txt');
console.log("Phuong thuc doc file dong bo: " + data.toString());
console.log("Ket thuc chuong trinh.");

Chạy file1.js để xem kết quả:

Kết quả:

Hướng dẫn xuất file excel nodejs


Cú pháp

Để mở một file trong chế độ không đồng bộ, bạn sử dụng phương thức open() có cú pháp:

fs.open(path, flags[, mode], callback)

Chi tiết tham số:

  • path: Đây là một chuỗi biểu diễn tên file cũng như đường dẫn tới file đó.

  • flags: Biểu diễn hành vi của file được mở. Tất cả các giá trị có thể sẽ được trình bày trong bảng dưới đây.

  • mode: Thiết lập chế độ cho file, các chế độ này chỉ được thiết lập khi file đã được tạo. Giá trị mặc định là 0666, tức là readable và writeable.

  • callback: Hàm callback nhận hai tham số, dạng (err, files) trong đó files là một mảng chứa các tên file trong thư mục.

    Xin chào các bạn quay lại blog của mình. Trong bài này mình sẽ giới thiệu cho các bạn đến một ứng dụng Jquery để chuyển đổi một bảng trong HTML sang một file Excel. Bây giờ hãy cùng nhau tìm hiểu nhé!

    Nội dung chính Show

    • 1. Example project
    • 2. Điều kiện tiên quyết
    • Tạo một tiêu đề cho Header
    • Tạo bảng Customers
    • Truyền dữ liệu từ App component
    • 3. Thực hiện các chức năng Export
    • 4. Chức năng Export với bên thứ ba hoắc NPM lib
    • 5. Tóm lược
    • 6. Phần kết luận

    Chúng ta sẽ sử dụng plugin Table2Excel để chuyển đổi từ bảng sang file Excel. Các bạn nhấp vào đường dẫn bên dưới để tải file Javascript về nhé!
    Download File Table2Excel

    Sau đó các bạn sẽ giải nén file và tạo ra cấu trúc thư mục cây như sau:

    Các bạn nhập đoạn code này vào trangchinh.html:

     


    Trang Chính












    Sau khi đã thêm được file jquery.table2excel.min.js vào trang HTML thì bạn nhập một bảng như ví dụ sau đây:

    #FirstLastHandle1MarkOtto@mdo2JacobThornton@fat3Larrythe Bird@twitter

    Với đoạn code như hình dưới đây và các bạn cần lưu ý là đặt id cho bảng là id="table2excel" :






























    # First Last Handle
    1 Mark Otto @mdo
    2 Jacob Thornton @fat
    3 Larry the Bird @twitter

    < button class="btn btn-success">Xuất File Excel

    Sau khi đã thiết lập bảng xong thì bạn bắt đầu nhập code để chuyển đổi từ Bảng sang Excel:


    Một số mà bạn cần lưu ý trong đoạn code trên:

    • filename là tên để đặt cho Tên của File Excel
    • fileext là đuôi mà chúng ta muốn xuất dưới dạng Excel

    Sau khi đã nhập thành công thì bạn thử nhấn vào nút Xem Kết Quả để thấy thành quả nhé!

    Mình cũng gửi các bạn đường dẫn để tải về những file trong thư mục table2excel để bạn đễ hình dung và có thể xem lại!
    Đường dẫn tải File Source Code

    Các bạn có thể tìm hiểu thêm thông qua đường dẫn dưới đây nhé!
    Đường dẫn để bạn tìm hiểu thêm

    Tổng kết:

    Qua đây bạn đã có thể tạo được một File Excel từ một bảng HTML. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

    Hướng dẫn xuất file excel nodejs

    Chúng ta thường xuất dữ liệu từ bảng sang bảng excel trong các ứng dụng web. Có hai cách để thực hiện chức năng export trong React: một là sử dụng bất kỳ thư viện bên thứ ba nào và cách khác là tạo component riêng của bạn. Trong bài đăng này, chúng ta sẽ xem cách triển khai chức năng export ra excel trong ứng dụng React theo cả hai cách.

    Dưới đây là các chủ đề chúng ta sẽ trải qua trong bài viết này:

    • Example Project
    • Điều kiện tiên quyết
    • Thực hiện chức năng export
    • Chức năng Export với bên thứ ba hoắc NPM lib
    • Tóm lược
    • Kết luận

    1. Example project

    Đây là một ứng dụng đơn giản với dữ liệu bảng và nút xuất ở góc trên cùng bên phải. Khi bạn bấm vào nút, dữ liệu từ bảng sẽ được tải xuống trong một bảng excel.

    3. Thực hiện các chức năng Export

    Hãy tạo ra một component có tên là ExportCSVwhich lấy dữ liệu làm props và quan tâm tới phần còn lại của chức năng export. Đây là component với phương thức exportToCSV để xử lý tất cả các chức năng tải xuống excel với xlxs và file-saver.

    import React from 'react'
    import Button from 'react-bootstrap/Button';
    import * as FileSaver from 'file-saver';
    import * as XLSX from 'xlsx';
    
    export const ExportCSV = ({csvData, fileName}) => {
    
        const fileType = 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet;charset=UTF-8';
        const fileExtension = '.xlsx';
    
        const exportToCSV = (csvData, fileName) => {
            const ws = XLSX.utils.json_to_sheet(csvData);
            const wb = { Sheets: { 'data': ws }, SheetNames: ['data'] };
            const excelBuffer = XLSX.write(wb, { bookType: 'xlsx', type: 'array' });
            const data = new Blob([excelBuffer], {type: fileType});
            FileSaver.saveAs(data, fileName + fileExtension);
        }
    
        return (
            <Button variant="warning" onClick={(e) => exportToCSV(csvData,fileName)}>Export</Button>
        )
    }
    

    Component này là một thành phần trình bày lấy dữ liệu để tải xuống và tên tệp làm props. Phương thức exportToCSV được gọi khi nhấp vào nút xuất.

    Bạn cần nhập component này trong App component.

    // removed for brevity
    render() {
    
        return (
          <div className="App">
            <Header />
            <div className="row">
                <div className="col-md-8">
                    <h2>Customers</h2>
                </div>
                <div className="col-md-4 center">
                    <ExportCSV csvData={this.state.customers} fileName={this.state.fileName} />
                </div>
            </div>
            <Customers customers={this.customers()}/>
          </div>
        );
      }
    

    Màn hình sau đây là màn hình cuối cùng sau khi chúng ta thêm tất cả các chức năng trên và sẵn sàng hoạt động !!

    4. Chức năng Export với bên thứ ba hoắc NPM lib

    Reac-csv là thư viện bên thứ ba mà chúng ta có thể sử dụng. Tất cả việc chúng ta cần làm là truyền dữ liệu và fileName và thư viện này sẽ lo phần còn lại cho chúng ta.

    Chúng ta cần cài đặt Reac-csv trước và sau đó nhập nó trong component ExportCSV.

    npm install react-csv --save
    

    Nhập CSVLink từ react-csv và chuyển dữ liệu cần thiết và tên tệp vào liên kết đó như bên dưới.

    import React from 'react'
    import { CSVLink } from 'react-csv'
    import Button from 'react-bootstrap/Button';
    
    export const ExportReactCSV = ({csvData, fileName}) => {
        return (
            <Button variant="warning">
                <CSVLink data={csvData} filename={fileName}>Export</CSVLink>
            </Button>
        )
    }
    

    Trong App component, tất cả những gì bạn cần làm là nhập






























    # First Last Handle
    1 Mark Otto @mdo
    2 Jacob Thornton @fat
    3 Larry the Bird @twitter

    < button class="btn btn-success">Xuất File Excel
    0 thay vì





























    # First Last Handle
    1 Mark Otto @mdo
    2 Jacob Thornton @fat
    3 Larry the Bird @twitter

    < button class="btn btn-success">Xuất File Excel
    1.

    import { ExportReactCSV } from './ExportReactCSV'
      
        // removed code for the brevity
    
        <div className="col-md-4 center">
            <ExportReactCSV csvData={this.state.customers} fileName={this.state.fileName} />
        </div>
          
      }
    }
    
    export default App;
    

    5. Tóm lược

    • Chúng ta cần xsls và file-saver libs để thực hiện chức năng export trong React.
    • Có một số cách bạn có thể triển khai logic export của mình trong React: một là sử dụng logic riêng, một cách khác là sử dụng bất kỳ lib bên thứ ba nào.
    • Thực hiện logic export với component riêng biệt để có thể sử dụng lại và cũng có thể được nhập vào bất kỳ component nào để sử dụng nó.

    6. Phần kết luận

    Có một số libs bên thứ ba hoặc npm để sử dụng ngay . Nhưng, đôi khi chúng ta phải tạo component riêng cho chức năng export để có thể linh hoạt hơn và các cho các mục đích khác như lý do bảo mật. Cảm ơn các bạn đã theo dõi. Trong bài viết có tham khảo tại https://blog.bitsrc.io/exporting-data-to-excel-with-react-6943d7775a92