Hướng dẫn next js export excel - js tiếp theo xuất excel

here is my code as a a sample i hope it helps

/api/shipments/downloadManifest.js/

const fs = require("fs");
import Shipment from "../../../backend/shipmentModel";
const json2xls = require("json2xls");
import path from "path";

const handler = async (req, res) => {
  if (req.method === "POST") {
    const { batchStart, batchEnd } = req.body;
    if (!batchStart || !batchEnd) {
      return res.status(200).json({
        status: "error",
        error: "No start and end date defined!",
      });
    }

    try {
      const data = await Shipment.find({
        createdAt: {
          $gte: batchStart,
          $lte: batchEnd,
        },
      });

      const excel = json2xls(data, {
        fields: [
          "name",
          "destination",
          "weight",
          "carton",
          "dollar_rate",
          "customs_rate",
          "freight_rate",
          "freight_$",
          "freight",
          "customs",
          "amountDue",
          "mobile",
          "action",
        ],
      });

      await fs.writeFileSync("./public/manifest.xlsx", excel, "binary");
      const filePath = path.join(process.cwd(), "/public/manifest.xlsx");
      const manifestBuffer = fs.createReadStream(filePath);

      await new Promise(function (resolve) {
        res.setHeader(
          "Content-Disposition",
          "attachment; filename=manifest.xlsx"
        );
        res.setHeader(
          "Content-Type",
          "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
        );
        res.setHeader("Content-Length", `${manifestBuffer.size}`);
        manifestBuffer.pipe(res);
        manifestBuffer.on("end", resolve);
        manifestBuffer.on("error", function (err) {
          if (err.code === "ENOENT") {
            res.status(400).json({
              error: "error",
              error: "Sorry we could not find the file you requested!",
            });
            res.end();
          } else {
            res.status(500).json({
              error: "error",
              message: "Sorry, something went wrong!",
            });
            res.end();
          }
        });
      });
    } catch (error) {
      console.log(error);
      return res.status(200).json({
        status: "error",
        msg: error.message,
      });
    }
  }
};

export default handler;

/pages/shipments.js

 setLoading(true);
    const data = await axios.post(
      "/api/shipments/downloadManifest",
      {
        batchStart: batch.batchStart,
        batchEnd:
          batchIndex ===
          batches?.[batches?.length - 1]?.months?.[
            batches?.[batches?.length - 1]?.months?.length - 1
          ]?.batches?.length -
            1
            ? new Date(Date.now())
            : batch.batchEnd,
      },
      {
        responseType: "blob",
      }
    );
    const pdfBlob = new Blob([data.data], { type: "application/xlsx" });
    setLoading(false);

    return saveAs(pdfBlob, "manifest.xlsx");

do not forget to install "file-saver" and "json2xls" npm packages as a dependency

Một Cách Tìm Nạp Dữ Liệu Phía Client-Sidecomponents render của bạn không đơn giản như bạn có thể làm trong ứng dụng React.

Ở phía trên mình không đề cập bất kì phương pháp tìm nạp dữ liệu phía client-side nhưng các bạn có thể sử dụng useEffect hook hoặc useSwr được phát triên bởi Vercel.

SWR là chiến lược trả dữ liệu từ bộ nhớ cache trước, sau đó tìm nạp (xác thưc lại) và cuối cùng là dữ liệu cập nhật.build time hoặc theo từng request trước khi dữ liệu được gửi đến client.

Tìm hiểu thêm tại đây https://swr.vercel.app/.

Tổng Kết:build time. => Lấy dữ liệu tại thời điểm build time.

Trong bài viết này mình đã giới thiệu 3 phương thức Next.Js có thể được sử dụng để tìm nạp dữ liệu tại thời điểm build time hoặc trước mỗi request phía client. Nếu các bạn có ý kiến gì thì hãy để lại bình luận bên dưới. Cám ơn!Page để lấy dữ liệu ngay thời điểm build time. Một khi ứng dụng đã được built, nó sẽ không làm mới dữ liệu cho đến khi một build khác được khởi chạy.

Cách Sử Dụng:

export async function getStaticProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: {}, // will be passed to the page component as props
  }
}

Lợi Ích

• Dữ liệu được làm mới mỗi khi client tải trang có nghĩa là dữ liệu được cập nhật kể từ khi họ truy cập trang.
• Dữ liệu được hiển thị trước khi đến client nên rất tốt cho SEO.Page đều sử dụng getStaticProps (hoặc không sử dụng các phương thức lấy dữ liệu từ server) thì Next.Js có thể xuất ra HTML bằng cách sử dụng lệnh next export. Điều này thuận lợi cho việc tạo trang web tĩnh và có thể lưu trữ trên Github.
• Dữ liệu được hiển thị trước khi đến client. Điều này rất tốt cho SEO.client. Điều này rất tốt cho SEO.

Ví Dụ:

Hãy tưởng tượng bạn có một trang Blog cá nhân hiển thị các trang từ các tệp markdown tại thời điểm build time. getStaticProps có thể đọc các tệp đó và lấy data vào các page component tại thời điểm build time. Khi bạn thay đổi dữ liệu blog, bạn phải rebuild site lại để thấy sự thay đổi.markdown tại thời điểm build time. getStaticProps có thể đọc các tệp đó và lấy data vào các page component tại thời điểm build time. Khi bạn thay đổi dữ liệu blog, bạn phải rebuild site lại để thấy sự thay đổi.

getServerSideProps (Server-side Rendering)

Fetch data on each request. => Lấy dữ liệu mỗi lần request.each request. => Lấy dữ liệu mỗi lần request.

Phương thức getServerSideProps lấy dữ liệu mỗi khi user gửi request lên hệ thống. Nó sẽ tìm nạp dữ liệu trước khi client có thể view được trang web (trái ngược với tải trang rồi tìm nạp dữ liệu ở client). Nếu client đưa ra các request tiếp theo, dữ liệu sẽ được tìm và nạp lại.getServerSideProps lấy dữ liệu mỗi khi user gửi request lên hệ thống. Nó sẽ tìm nạp dữ liệu trước khi client có thể view được trang web (trái ngược với tải trang rồi tìm nạp dữ liệu ở client). Nếu client đưa ra các request tiếp theo, dữ liệu sẽ được tìm và nạp lại.

Cách Sử Dụng:

export async function getServerSideProps(context) {
  const res = await fetch(`https://...`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: {}, // will be passed to the page component as props
  }
}

Lợi Ích

• Dữ liệu được làm mới mỗi khi client tải trang có nghĩa là dữ liệu được cập nhật kể từ khi họ truy cập trang.
• Dữ liệu được hiển thị trước khi đến client nên rất tốt cho SEO.

Ví Dụ:

getServerSideProps nên được sử dụng để xây dựng ứng dụng đảm bảo dữ liệu được cập nhật liên tục mà không cần phải refresh trang. Ví dụ dữ liệu chứng khoán, dữ liệu tình hình Covid,… nên được sử dụng để xây dựng ứng dụng đảm bảo dữ liệu được cập nhật liên tục mà không cần phải refresh trang. Ví dụ dữ liệu chứng khoán, dữ liệu tình hình Covid,…

getInitialProps (Server-side Rendering)

Fetch data on each request. => Lấy dữ liệu mỗi lần request.each request. => Lấy dữ liệu mỗi lần request.

getInitialProps là cách ban đầu mà ứng dụng Next.Js tìm nạp dữ liệu phía máy chủ. kể từ Next.js 9.3, các bạn nên sử dụng phương thức đã nói ở phía trên ( getServerSideProps) thay vì getInitialProps. là cách ban đầu mà ứng dụng Next.Js tìm nạp dữ liệu phía máy chủ. kể từ Next.js 9.3, các bạn nên sử dụng phương thức đã nói ở phía trên ( getServerSideProps) thay vì getInitialProps.

Cách Dùng:

function Page({ stars }) {
  return 
Next stars: {stars}
}

Page.getInitialProps = async (ctx) => {
  const res = await fetch('https://api.github.com/repos/vercel/next.js')
  const json = await res.json()
  return { stars: json.stargazers_count }
}

export default Page

Làm Thế Nào Để Xác Định Nên Sử Dụng Phương Thức Nào?

Khi sử dụng Next.Js, mình luôn đặt mục tiêu là mỗi trang ở trạng thái tĩnh. Điều này có nghĩa là cố gáng tránh sử dụng getServerSideProps và ưu tiên getStaticProps. Tuy nhiên, nếu dữ liệu thay đổi liên tục thì phải sử dụng getServerSideProps. Mình không sử dụng getInitialProps nữa.getServerSideProps và ưu tiên getStaticProps. Tuy nhiên, nếu dữ liệu thay đổi liên tục thì phải sử dụng getServerSideProps. Mình không sử dụng getInitialProps nữa.

Một Cách Tìm Nạp Dữ Liệu Phía Client-Side

Ở phía trên mình không đề cập bất kì phương pháp tìm nạp dữ liệu phía client-side nhưng các bạn có thể sử dụng useEffect hook hoặc useSwr được phát triên bởi Vercel.useEffect hook hoặc useSwr được phát triên bởi Vercel.

SWR là chiến lược trả dữ liệu từ bộ nhớ cache trước, sau đó tìm nạp (xác thưc lại) và cuối cùng là dữ liệu cập nhật.

Tìm hiểu thêm tại đây https://swr.vercel.app/.

import useSWR from 'swr'

function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return 
failed to load
  if (!data) return 
loading...
  return 
hello {data.name}!
}

Tổng Kết:

Trong bài viết này mình đã giới thiệu 3 phương thức Next.Js có thể được sử dụng để tìm nạp dữ liệu tại thời điểm build time hoặc trước mỗi request phía client. Nếu các bạn có ý kiến gì thì hãy để lại bình luận bên dưới. Cám ơn!build time hoặc trước mỗi request phía client. Nếu các bạn có ý kiến gì thì hãy để lại bình luận bên dưới. Cám ơn!

Post Views:128 128