Bạn l&agrave; người mới học react v&agrave; muốn thử tạo một thứ g&igrave; đ&oacute; với react? B&agrave;i viết n&agrave;y l&agrave; d&agrave;nh cho bạn. Ở đ&acirc;y, ch&uacute;ng ta sẽ tạo một ứng dụng thanh to&aacute;n c&oacute; thể chuyển đổi biểu mẫu HTML th&agrave;nh tệp PDF tr&ocirc;ng giống như bản sao h&oacute;a đơn. Bắt đầu th&ocirc;i!
Chuẩn bị:
<pre class="language-python"><code>//For creating react app named practise:
npx create-react-app practise
//To create pdf file in form of table:
npm i jspdf
npm i jspdf-autotable</code></pre>
<h2 style="text-align: justify;">Về ứng dụng:</h2>
Ứng dụng sẽ c&oacute; những t&iacute;nh năng sau:
<ul style="text-align: justify;">
<li style="font-weight: 400;" aria-level="1">Th&ecirc;m t&ecirc;n, số lượng, gi&aacute; của sản phẩm v&agrave; tổng thanh to&aacute;n theo số lượng v&agrave; gi&aacute; của sản phẩm tương ứng.</li>
<li style="font-weight: 400;" aria-level="1">T&iacute;nh tổng thanh to&aacute;n của tất cả những sản phẩm được th&ecirc;m v&agrave;o.</li>
<li style="font-weight: 400;" aria-level="1">T&iacute;nh tổng khi nhấp v&agrave;o n&uacute;t submit</li>
</ul>
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/11a45b09-7eef-4a35-9900-972a5c05170e" alt="Rs1" />
Ứng dụng thanh to&aacute;n
<h3 style="text-align: justify;">Tạo mục c&oacute; t&ecirc;n trạng th&aacute;i:</h3>
Tạo mục c&oacute; t&ecirc;n trạng th&aacute;i v&agrave; khởi tạo đối tượng với gi&aacute; trị trống hoặc 0 như b&ecirc;n dưới:
<pre class="language-python"><code>const [item,setItem]=React.useState([{iname:"",quantity:"",amount:"",total:0}])</code></pre>
Th&ecirc;m t&ecirc;n sản phẩm l&agrave; item name, số lượng v&agrave; gi&aacute; sản phẩm l&agrave; quantity v&agrave; amount, sau đ&oacute; total l&agrave; tổng tiền của từng sản phẩm dựa tr&ecirc;n số lượng v&agrave; gi&aacute; được nhập v&agrave;o.
<h3 style="text-align: justify;">Tạo UI front-end:</h3>
B&acirc;y giờ h&atilde;y tạo một biểu mẫu html trong tệp App.js của ứng dụng react v&agrave; th&ecirc;m c&aacute;c trường input cần thiết như dưới đ&acirc;y:
<pre class="language-python"><code>&lt;form onSubmit={handleSubmit}&gt;
 &lt;div className="App"&gt;
 {item.map((input,index) =&gt;(
 &lt;div key={index}&gt;
 &lt;input name="iname" placeholder='item name' value={input.iname}}&gt;&lt;/input&gt;
 &lt;input name="quantity" type="number" pattern="[0-9]*" step=".001" min=".000" max="999.999" placeholder='quantity' value={input.quantity} }&gt;&lt;/input&gt;
 &lt;input name="amount" type="number" pattern="[0-9]*" step=".01" min=".01" max="99999.99" placeholder='amount' value={input.amount}}&gt;&lt;/input&gt;
 &lt;input name="total" placeholder='total' value={input.total} readOnly&gt;&lt;/input&gt;
 &lt;button key={index}}&gt;Remove&lt;/button&gt;
 &lt;/div&gt;
 ))}
 
 &lt;button type='button'&gt;Add+&lt;/button&gt;
 &lt;h3&gt;Total amount:&lt;/h3&gt;
 &lt;button type='submit'&gt;submit&lt;/button&gt;
 
 &lt;/div&gt;
 &lt;/form&gt;</code></pre>
Trong đoạn code tr&ecirc;n, ch&uacute;ng ta sử dụng item dưới dạng mảng v&agrave; tạo nhiều trường input dựa tr&ecirc;n số lượng item.
<h3 style="text-align: justify;">Th&ecirc;m hộp nhập liệu kh&aacute;c khi nhấp v&agrave;o n&uacute;t add:</h3>
B&acirc;y giờ h&atilde;y th&ecirc;m một số t&iacute;nh năng kh&aacute;c v&agrave;o trang web tĩnh. Ta sẽ th&ecirc;m t&iacute;nh năng onClick c&oacute; thể th&ecirc;m hộp văn bản khi nhấn n&uacute;t add. Ngo&agrave;i ra, h&atilde;y th&ecirc;m h&agrave;m addItem để thay đổi trạng th&aacute;i của mục bằng h&agrave;m setItem.
<pre class="language-python"><code>&lt;button type='button' onClick={addItem}&gt;Add+&lt;/button&gt;</code></pre>
<pre class="language-python"><code>function addItem()
 {
 const newItem={iname:"",quantity:"",amount:"",total:0}
 setItem((oldValue) =&gt; {
 const newArray=[]
 for(let i=0;i&lt;oldValue.length;i++)
 {
 newArray.push(oldValue[i])
 }
 newArray.push(newItem)
 return newArray
 })
 }</code></pre>
<h3 style="text-align: justify;">Xử l&yacute; thay đổi trong hộp nhập liệu:</h3>
Mỗi khi thay đổi gi&aacute; trị trong hộp nhập liệu, ta cần cập nhật n&oacute; th&agrave;nh gi&aacute; trị trạng th&aacute;i c&oacute; t&ecirc;n l&agrave; 'item' để t&iacute;nh tổng mỗi mục được th&ecirc;m v&agrave;o biểu mẫu. H&atilde;y tạo h&agrave;m handleChange v&agrave; sau đ&oacute; tạo thay đổi tương ứng:
<pre class="language-python"><code>&lt;input name="iname" placeholder='item name' value={input.iname} onChange={event =&gt; handleChange(index,event)}&gt;&lt;/input&gt;
&lt;input name="quantity" type="number" pattern="[0-9]*" step=".001" min=".000" max="999.999" placeholder='quantity' value={input.quantity} onChange={event =&gt; handleChange(index,event)}&gt;&lt;/input&gt;
&lt;input name="amount" type="number" pattern="[0-9]*" step=".01" min=".01" max="99999.99" placeholder='amount' value={input.amount} onChange={event =&gt; handleChange(index,event)}&gt;&lt;/input&gt;
</code></pre>
<pre class="language-python"><code>function handleChange(index,event)
 {
 //Storing currect item value in a array object 
 let data = [...item]
 //Getting the changed input box name and their corresponding value
 data[index][event.target.name] = event.target.value
 //Calculating the total value accordingly 
 data[index]['total']=(data[index]['quantity']*data[index]['amount']).toFixed(2)
 //Setting the new value accordingly
 setItem(data)
 }</code></pre>
<h3 style="text-align: justify;">Th&ecirc;m t&iacute;nh năng remove:</h3>
B&acirc;y giờ đ&atilde; đến l&uacute;c th&ecirc;m t&iacute;nh năng remove. Khi nhấp v&agrave;o n&uacute;t remove, ch&uacute;ng ta truyền gi&aacute; trị chỉ mục của trường input tương ứng v&agrave; x&oacute;a gi&aacute; trị chỉ mục đ&oacute; khỏi item. Ch&uacute;ng ta c&oacute; thể l&agrave;m điều đ&oacute; với đoạn code sau:
<pre class="language-python"><code>&lt;button key={index} onClick={() =&gt; removeEntry(index)}&gt;Remove&lt;/button&gt;
</code></pre>
<pre class="language-python"><code>function removeEntry(index)
 {
 //Storing old items value in a variable
 let data=[...item]
 //Removing the array object with index value form the stored variable
 data.splice(index,1)
 //Storing it into the state
 setItem(data)
 }</code></pre>
<h3 style="text-align: justify;">T&iacute;nh tổng thanh to&aacute;n:</h3>
Như vậy ch&uacute;ng ta sắp ho&agrave;n th&agrave;nh một ứng dụng thanh to&aacute;n. Đ&atilde; đến l&uacute;c t&iacute;nh tổng thanh to&aacute;n dựa tr&ecirc;n dữ liệu được cấp cho mỗi trường input. H&atilde;y th&ecirc;m total amount dưới dạng trạng th&aacute;i mới v&agrave; cho v&agrave;o trong thẻ biểu mẫu, thẻ n&agrave;y c&oacute; thể thay đổi tự động:
B&ecirc;n trong:
<pre class="language-python"><code>&lt;h3&gt;Total amount: {billTotal ? billTotal : 0}&lt;/h3&gt;</code></pre>
Sửa đổi total amount với useEffect:
<pre class="language-python"><code>//Creating state for billing total amount
 const[billTotal,setBillTotal]=React.useState(0)
 React.useEffect(()=&gt;{
 //Setting total bill amount
 setBillTotal(()=&gt;{
 //Getting copy of all item with its corresponding total
 let data = [...item];
 //Initializing temporary variable
 let temp=0;
 //Parsing through each item to calculate bill total based on each item total amount
 for(let i=0;i&lt;data.length;i++)
 {
 temp= parseFloat(data[i].total) + temp;
 }
 return temp.toFixed(2)
 })
 },[item])</code></pre>
<h3 style="text-align: justify;">Chuyển đổi html th&agrave;nh PDF:</h3>
Đ&acirc;y l&agrave; bước cuối c&ugrave;ng. Ch&uacute;ng ta cần chuyển đổi gi&aacute; trị biểu mẫu được th&ecirc;m v&agrave;o sang dạng PDF. Nhập jspdf v&agrave; jspdf-autotable, sau đ&oacute; th&ecirc;m t&iacute;nh năng handleSubmit v&agrave;o tệp App.js.
<pre class="language-python"><code>import { jsPDF } from "jspdf";
import autoTable from 'jspdf-autotable'

</code></pre>
<pre class="language-python"><code>function handleSubmit(event)
 {
 //Preventing the input field to get erased
 event.preventDefault();
 //Intializing jspdf 
 const doc = new jsPDF()
 let newArray = []
 //Converting array object into array to make PDF conversion easy
 for(let i=0;i&lt;item.length;i++)
 {
 newArray.push([i+1,item[i].iname,item[i].quantity,item[i].amount,item[i].total])
 }
 //Name of Shop in text
 doc.text("N.A.K Vessels shop", 70,20);
 //Calculating today date to display in PDF
 let today = new Date();
 let dd = String(today.getDate()).padStart(2, '0');
 let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
 let yyyy = today.getFullYear();
 today = dd + '/' + mm + '/' + yyyy;
 //Displaying today's date
 doc.text(`Date: ${today}`, 200, 25, null, null, "right");
 doc.text(`Customer name: Murugan`, 200, 30, null, null, "right");
 //Adding table heading along with its array of values
 autoTable(doc, {
 head: [['S.no','Item name', 'Quantity','Amount','Total']],
 body: newArray,
 startY: 35,
 })
 //Adding total billing amount in the end of table
 let finalY = doc.previousAutoTable.finalY;
 doc.text(`Total amount to be paid: ${billTotal}`, 12, finalY + 10);
 //saving bill in the name of 
 doc.save('Bill.pdf')
 }</code></pre>
Như vậy l&agrave; xong! Ch&uacute;ng ta đ&atilde; chuyển đổi HTML th&agrave;nh PDF bằng React. App.js sau c&ugrave;ng sẽ c&oacute; dạng như sau:
<pre class="language-python"><code>import React from 'react'
import { jsPDF } from "jspdf";
import autoTable from 'jspdf-autotable'

function App() {
 const [item,setItem]=React.useState([{iname:"",quantity:"",amount:"",total:0}])
 //Creating state for billing total amount
 const[billTotal,setBillTotal]=React.useState(0)
 React.useEffect(()=&gt;{
 //Setting total bill amount
 setBillTotal(()=&gt;{
 //Getting copy of all item with its corresponding total
 let data = [...item];
 //Initializing temporary variable
 let temp=0;
 //Parsing through each item to calculate bill total based on each item total amount
 for(let i=0;i&lt;data.length;i++)
 {
 temp= parseFloat(data[i].total) + temp;
 }
 return temp.toFixed(2)
 })
 },[item])

 function handleChange(index,event)
 {
 //Storing currect item value in a array object 
 let data = [...item]
 //Getting the changed input box name and their corresponding value
 data[index][event.target.name] = event.target.value
 //Calculating the total value accordingly 
 data[index]['total']=(data[index]['quantity']*data[index]['amount']).toFixed(2)
 //Setting the new value accordingly
 setItem(data)
 }

 function removeEntry(index)
 {
 //Storing old items value in a variable
 let data=[...item]
 //Removing the array object with index value form the stored variable
 data.splice(index,1)
 //Storing it into the state
 setItem(data)
 }


 function addItem()
 {
 //Creating new object 
 const newItem={iname:"",quantity:"",amount:"",total:0}
 setItem((oldValue) =&gt; {
 const newArray=[]
 //Trying to get old value and push it to new empty array
 for(let i=0;i&lt;oldValue.length;i++)
 {
 newArray.push(oldValue[i])
 }
 //After pushing all old array, adding newly created empty object
 newArray.push(newItem)
 return newArray
 })
 }

 function handleSubmit(event)
 {
 //Preventing the input field to get erased
 event.preventDefault();
 //Intializing jspdf 
 const doc = new jsPDF()
 let newArray = []
 //Converting array object into array to make PDF conversion easy
 for(let i=0;i&lt;item.length;i++)
 {
 newArray.push([i+1,item[i].iname,item[i].quantity,item[i].amount,item[i].total])
 }
 //Name of Shop in text
 doc.text("N.A.K Vessels shop", 70,20);
 //Calculating today date to display in PDF
 let today = new Date();
 let dd = String(today.getDate()).padStart(2, '0');
 let mm = String(today.getMonth() + 1).padStart(2, '0'); //January is 0!
 let yyyy = today.getFullYear();
 today = dd + '/' + mm + '/' + yyyy;
 //Displaying today's date
 doc.text(`Date: ${today}`, 200, 25, null, null, "right");
 doc.text(`Customer name: Murugan`, 200, 30, null, null, "right");
 //Adding table heading along with its array of values
 autoTable(doc, {
 head: [['S.no','Item name', 'Quantity','Amount','Total']],
 body: newArray,
 startY: 35,
 })
 //Adding total billing amount in the end of table
 let finalY = doc.previousAutoTable.finalY;
 doc.text(`Total amount to be paid: ${billTotal}`, 12, finalY + 10);
 //saving bill in the name of 
 doc.save('Bill.pdf')
 }

 return (
 &lt;form onSubmit={handleSubmit}&gt;
 &lt;div className="App"&gt;
 {item.map((input,index) =&gt;(
 &lt;div key={index}&gt;
 &lt;input name="iname" placeholder='item name' value={input.iname} onChange={event =&gt; handleChange(index,event)}&gt;&lt;/input&gt;
 &lt;input name="quantity" type="number" pattern="[0-9]*" step=".001" min=".000" max="999.999" placeholder='quantity' value={input.quantity} onChange={event =&gt; handleChange(index,event)}&gt;&lt;/input&gt;
 &lt;input name="amount" type="number" pattern="[0-9]*" step=".01" min=".01" max="99999.99" placeholder='amount' value={input.amount} onChange={event =&gt; handleChange(index,event)}&gt;&lt;/input&gt;
 &lt;input name="total" placeholder='total' value={input.total} readOnly&gt;&lt;/input&gt;
 &lt;button key={index} onClick={() =&gt; removeEntry(index)}&gt;Remove&lt;/button&gt;
 &lt;/div&gt;
 ))}
 
 &lt;button type='button' onClick={addItem}&gt;Add+&lt;/button&gt;
 &lt;h3&gt;Total amount: {billTotal ? billTotal : 0}&lt;/h3&gt;
 &lt;button type='submit'&gt;submit&lt;/button&gt;
 
 &lt;/div&gt;
 &lt;/form&gt;
 );
}

export default App;</code></pre>
<img style="width: 600px; display: block; margin-left: auto; margin-right: auto;" src="https://tek4.vn/public_files/2ec2f420-941c-4bb6-945e-1d8aeea81fb0" alt="rs2" />
Tệp h&oacute;a đơn ở dạng PDF
H&atilde;y tiếp tục theo d&otilde;i v&agrave; ủng hộ c&aacute;c b&agrave;i viết tiếp theo của<a href="https://tek4.vn/"> Tek4.vn</a> về chủ đề n&agrave;y nh&eacute;!

dev1_account1

Tạo hóa đơn bằng React-js

Cùng tác giả

dev1_account1

Có liên quan