Thiết kế website giá rẻ

Question

I am trying to generate a PDF that replicates the layout of my code using jsPDF in JavaScript. Previously, I attempted using html2canvas, but it converts the code layout into an image, resulting in larger file sizes and preventing text selection in the PDF.

Is there a way to directly make my code layout into a PDF using jsPDF while preserving text selectability and keeping file sizes smaller? I need the PDF to reflect the exact code structure, similar to how it appears in my application.

Here is my code and it’s css

import React, { useRef, useState } from 'react'
import './PDFPreviewDialog.css'
import jsPDF from 'jspdf';
import IconButton from '../../../reusable/Buttons/IconButton/IconButton'

const PDFPreviewDialog = ({ onClose, docData }) => {
  const contentRef = useRef(null);
  const totalPages = Math.ceil(docData.length / 15);

  const getCurrentMonthYear = () => {
    const date = new Date();
    return `${date.toLocaleString('default', { month: 'long' })} ${date.getFullYear()}`;
  };
  const [fileName, setFileName] = useState(`${getCurrentMonthYear()} Doctor list`);

  const generatePDF = () => {
    const input = contentRef.current;
    const pdf = new jsPDF('p', 'mm', 'a4');
  
    pdf.html(input, {
      callback: function (doc) {
        doc.autoPrint({variant: 'non-conform'});
        doc.save(`${fileName}.pdf`);
      },
      x: 10,
      y: 10,
      windowWidth: input.offsetWidth,
      windowHeight: input.offsetHeight
    });
  };

  const handlePrint = () => {
    const input = contentRef.current;
    const pdf = new jsPDF('p', 'mm', 'a4');

    pdf.html(input, {
      callback: function (doc) {
        doc.autoPrint();
        window.open(doc.output('bloburl'), '_blank');
      },
      x: 10,
      y: 10,
      windowWidth: input.offsetWidth,
      windowHeight: input.offsetHeight
    });
  };


  return (
    <div className="pdf-preview-dialog">
      {/* Header */}
      <div className="pdf-preview-header">
        <IconButton
          image={"/src/assets/x-mark.svg"}
          bg={'#edeff2'}
          onClick={onClose}
        />
        <p className='pdf-preview-header-title'>Print by Doctor</p>
      </div>

      {/* Body */}
      <div className="pdf-preview-body">
        {/* No of Page and File Title */}
        <div className="pdf-preview-info">
          <div className="page-info">
            <span className='page-info-no-of-page'>No. of Pages</span>
            <span className='page-info-no-of-page-num'>{totalPages}</span>
          </div>
          <div className="file-name">
            <input
              type="text"
              value={fileName}
              onChange={(e) => setFileName(e.target.value)}
            />
          </div>
          <button className="edit-button">
            <img src="/src/assets/pencil.svg" alt="Edit" />
          </button>
        </div>

        {/* PDF Content */}
        <div className="pdf-preview-content" ref={contentRef}>
          {Array.from({ length: totalPages }, (_, i) => (
            <PDFContent
              key={i}
              docData={docData.slice(i * 15, (i + 1) * 15)}
              pageNumber={i + 1}
              totalPages={totalPages}
            />
          ))}
        </div>

        {/* Footer DOWNLOAD - PRINT Buttons */}
        <div className="pdf-preview-actions">
          <button className='pdf-preview-actions-btns' onClick={handlePrint}>
            <p>Print</p>
            <img src="/src/assets/printer_white.svg" alt="printer" />
          </button>
          <button className="pdf-preview-actions-btns" onClick={generatePDF}>
            <p>Download</p>
            <img src="/src/assets/arrow-down-tray.svg" alt="download" />
          </button>
        </div>
      </div>
    </div>
  );
};

const PDFContent = ({ docData, pageNumber, totalPages }) => {
  return (
    <div className="pdf-content">
      {/* Header */}
      <div className="pdf-header">
        <h1>Kadodra Imaging Center</h1>
        <p>Kadodra Chowkadi, Amreli, Surat, 395004</p>
        <p>DR. Anushka Biswa</p>
      </div>

      {/* Doctor List */}
      <table className="doctor-list">
        <thead>
          <tr>
            <th>Name</th>
            <th>Hospital</th>
            <th>Patients</th>
            <th>Revenue</th>
            <th>Referral</th>
            <th>Discount</th>
          </tr>
        </thead>
        <tbody>
          {docData.map((doc, index) => (
            <tr key={index}>
              <td>{doc.docName}</td>
              <td>{doc.hospital}</td>
              <td>{doc.patients}</td>
              <td>{doc.revenue}</td>
              <td>{doc.referral}</td>
              <td>{doc.discount}</td>
            </tr>
          ))}
        </tbody>
      </table>
      <div className="page-number">
        Page {pageNumber} of {totalPages}
      </div>
    </div>
  );
};

export default PDFPreviewDialog;

CSS

.pdf-preview-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 1.42rem 3.42rem;
  border-radius: 1.42rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.7rem;
}

/* Header */
.pdf-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* margin-bottom: 20px; */
}
.pdf-preview-header-title{
  color: #3C4453;
  font-size: 1.14rem;
  line-height: 1.7rem;
  letter-spacing: 0.045rem;
}

/* Body */
.pdf-preview-body{
  display: flex;
  flex-direction: column;
  gap: 1.42rem;
  /* align-items: center; */
}

/* No of Page and File Title */

.pdf-preview-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.57rem 0.85rem;
  border-radius: 1.7rem;
  border: 1px solid #CDD1DB;
  background-color: #fff;
  /* margin-bottom: 20px; */
}
.page-info{
  display: flex;
  gap: 0.07rem;
  border-radius: 0.57rem;
  border: 1px solid #CDDDFE;
  background-color: #F3F7FF;
  font-size: 1.14rem;
  line-height: 1.7rem;
  letter-spacing: 0.045rem;
}
.page-info-no-of-page{
  padding: 0.28rem 0.57rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.57rem;
  background-color: #fff;
}
.page-info-no-of-page-num{
  padding: 0.28rem 0.57rem;
  font-weight: 300;
}
.file-name > input{
  border: none;
  outline: none;
  color: #000;
  font-size: 1.14rem;
  line-height: 1.7rem;
  letter-spacing: 0.045rem;
}
.edit-button{
  padding: 0.57rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  background-color: #DBDFE5;
}
.edit-button > img{
  width: 1.42rem;
  height: 1.42rem;
}

/* PDF Content */

.pdf-preview-content {
  border: 1px solid #ccc;
  padding: 20px;
  margin-bottom: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.pdf-preview-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
}

.pdf-preview-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.7rem;
}
.pdf-preview-actions-btns{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.57rem 1.14rem;
  background-color: #0554F2;
  border: 1px solid transparent;
  gap: 0.28rem;
  border-radius: 999px;
  border-style: none;
  cursor: pointer;
  outline: none;
}
.pdf-preview-actions-btns p{
  line-height: 1.39rem;
  font-size: 0.95rem;
  color: #F6F7F9;
}
.pdf-preview-actions-btns img{
  width: 1.43rem;
  height: 1.43rem;
}

/* Add more styles to match the design in the image */

Any guidance or examples demonstrating how to achieve this with jsPDF would be greatly appreciated. Thank you!

I want the PDF to have the same layout as my code renders and shows, maintaining the same layout in the PDF.

Thiết kế website giá rẻ

Danh mục

How to maintain code layout in PDF using jsPDF in React.js?