{"id":105477,"date":"2025-04-11T00:40:40","date_gmt":"2025-04-10T20:10:40","guid":{"rendered":"https:\/\/nabfollower.com\/blog\/%d9%86%d8%ad%d9%88%d9%87-%d8%ae%d9%88%d8%af%da%a9%d8%a7%d8%b1%d8%b3%d8%a7%d8%b2%db%8c-%d8%a7%d8%b3%d9%86%d8%a7%d8%af-pdf-%d8%a8%d8%a7-react-%d9%88-typescript\/"},"modified":"2025-04-11T00:40:40","modified_gmt":"2025-04-10T20:10:40","slug":"%d9%86%d8%ad%d9%88%d9%87-%d8%ae%d9%88%d8%af%da%a9%d8%a7%d8%b1%d8%b3%d8%a7%d8%b2%db%8c-%d8%a7%d8%b3%d9%86%d8%a7%d8%af-pdf-%d8%a8%d8%a7-react-%d9%88-typescript","status":"publish","type":"post","link":"https:\/\/nabfollower.com\/blog\/%d9%86%d8%ad%d9%88%d9%87-%d8%ae%d9%88%d8%af%da%a9%d8%a7%d8%b1%d8%b3%d8%a7%d8%b2%db%8c-%d8%a7%d8%b3%d9%86%d8%a7%d8%af-pdf-%d8%a8%d8%a7-react-%d9%88-typescript\/","title":{"rendered":"\u0646\u062d\u0648\u0647 \u062e\u0648\u062f\u06a9\u0627\u0631\u0633\u0627\u0632\u06cc \u0627\u0633\u0646\u0627\u062f PDF \u0628\u0627 React \u0648 TypeScript"},"content":{"rendered":"<div data-article-id=\"2384488\" id=\"article-body\">\n<p>\u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0634\u06a9\u0644\u06cc \u06a9\u0647 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0645\u0634\u0627\u063a\u0644 \u062f\u0631 \u0628\u0639\u0636\u06cc \u0627\u0632 \u0645\u0648\u0627\u0642\u0639 \u0628\u0627 \u0622\u0646 \u0631\u0648\u0628\u0631\u0648 \u062e\u0648\u0627\u0647\u0646\u062f \u0634\u062f \u060c \u062a\u0648\u0644\u06cc\u062f PDF \u0627\u0633\u062a &#8211; \u0645\u0648\u0627\u0631\u062f \u060c \u06af\u0632\u0627\u0631\u0634 \u0647\u0627 \u060c \u0631\u0633\u06cc\u062f\u0647\u0627 \u06cc\u0627 \u0641\u0631\u0645 \u0647\u0627 \u060c \u0628\u0631\u0627\u06cc \u0630\u06a9\u0631 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0622\u0646\u0647\u0627. \u0627\u0632 \u0646\u0638\u0631 \u062a\u0627\u0631\u06cc\u062e\u06cc \u060c \u0627\u06cc\u0646 \u062f\u0631\u062f\u0646\u0627\u06a9 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a: Word \u0648 Latex \u0628\u0631\u0627\u06cc \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0641\u0631\u0627\u0647\u0645 \u0646\u0645\u06cc \u06a9\u0646\u0646\u062f \u060c \u0648 \u06af\u0632\u06cc\u0646\u0647 \u0647\u0627\u06cc \u062f\u06cc\u06af\u0631 \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627 \u06cc\u0627 \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc HTML\/CSS \u0634\u06a9\u0646\u0646\u062f\u0647 \u0647\u0633\u062a\u0646\u062f \u06cc\u0627 \u0631\u0627\u0647 \u062d\u0644 \u0647\u0627\u06cc\u06cc \u0645\u0627\u0646\u0646\u062f WKHTMLTOPDF \u06cc\u0627 WEASYPRINT \u06a9\u0647 \u0641\u0642\u0637 \u0627\u0632 \u0632\u06cc\u0631 \u0645\u062c\u0645\u0648\u0639\u0647 CSS \u067e\u0634\u062a\u06cc\u0628\u0627\u0646\u06cc \u0645\u06cc \u06a9\u0646\u0646\u062f.<\/p>\n<p>\u0627\u0645\u0627 \u0627\u06af\u0631 \u0628\u062a\u0648\u0627\u0646\u06cc\u0645 PDF \u0647\u0627 \u0631\u0627 \u0645\u0627\u0646\u0646\u062f \u0627\u062c\u0632\u0627\u06cc React \u062f\u0631\u0645\u0627\u0646 \u06a9\u0646\u06cc\u0645 \u060c \u0686\u0647 \u0645\u06cc \u0634\u0648\u062f\u061f HTMLDOCS \u06cc\u06a9 \u06a9\u062a\u0627\u0628\u062e\u0627\u0646\u0647 \u062c\u062f\u06cc\u062f \u0627\u0633\u062a \u06a9\u0647 DX \u0628\u0632\u0631\u06af \u0648\u0628 \u0645\u062f\u0631\u0646 \u0631\u0627 \u0628\u0647 \u0627\u0633\u0646\u0627\u062f \u0633\u0627\u062e\u062a\u0645\u0627\u0646\u06cc \u0645\u06cc \u0631\u0633\u0627\u0646\u062f \u060c \u0645\u0634\u0627\u0628\u0647 \u0622\u0646\u0686\u0647 \u06a9\u0647 \u0627\u06cc\u0645\u06cc\u0644 React \u0628\u0631\u0627\u06cc \u0627\u06cc\u0645\u06cc\u0644 \u0627\u0646\u062c\u0627\u0645 \u062f\u0627\u062f.<\/p>\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 counter-hierarchy ez-toc-counter-rtl ez-toc-grey ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">\u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628<\/p>\n<span class=\"ez-toc-title-toggle\"><a href=\"#\" class=\"ez-toc-pull-right ez-toc-btn ez-toc-btn-xs ez-toc-btn-default ez-toc-toggle\" aria-label=\"\u062a\u063a\u06cc\u06cc\u0631 \u0648\u0636\u0639\u06cc\u062a \u0641\u0647\u0631\u0633\u062a \u0645\u0637\u0627\u0644\u0628\"><span class=\"ez-toc-js-icon-con\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/span><\/a><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/nabfollower.com\/blog\/%d9%86%d8%ad%d9%88%d9%87-%d8%ae%d9%88%d8%af%da%a9%d8%a7%d8%b1%d8%b3%d8%a7%d8%b2%db%8c-%d8%a7%d8%b3%d9%86%d8%a7%d8%af-pdf-%d8%a8%d8%a7-react-%d9%88-typescript\/#%D8%A2%D9%86%DA%86%D9%87_%D9%85%DB%8C_%D8%AE%D9%88%D8%A7%D9%87%DB%8C%D9%85_%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D9%85\" >\u0622\u0646\u0686\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0633\u0627\u0632\u06cc\u0645<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/nabfollower.com\/blog\/%d9%86%d8%ad%d9%88%d9%87-%d8%ae%d9%88%d8%af%da%a9%d8%a7%d8%b1%d8%b3%d8%a7%d8%b2%db%8c-%d8%a7%d8%b3%d9%86%d8%a7%d8%af-pdf-%d8%a8%d8%a7-react-%d9%88-typescript\/#%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1%D9%87%D8%A7%DB%8C%DB%8C_%DA%A9%D9%87_%D9%85%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%AE%D9%88%D8%A7%D9%87%DB%8C%D9%85_%DA%A9%D8%B1%D8%AF\" >\u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/nabfollower.com\/blog\/%d9%86%d8%ad%d9%88%d9%87-%d8%ae%d9%88%d8%af%da%a9%d8%a7%d8%b1%d8%b3%d8%a7%d8%b2%db%8c-%d8%a7%d8%b3%d9%86%d8%a7%d8%af-pdf-%d8%a8%d8%a7-react-%d9%88-typescript\/#%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D9%BE%D8%B1%D9%88%DA%98%D9%87\" >\u062a\u0646\u0638\u06cc\u0645 \u067e\u0631\u0648\u0698\u0647<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/nabfollower.com\/blog\/%d9%86%d8%ad%d9%88%d9%87-%d8%ae%d9%88%d8%af%da%a9%d8%a7%d8%b1%d8%b3%d8%a7%d8%b2%db%8c-%d8%a7%d8%b3%d9%86%d8%a7%d8%af-pdf-%d8%a8%d8%a7-react-%d9%88-typescript\/#%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D9%BE%D9%88%DB%8C%D8%A7\" >\u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/nabfollower.com\/blog\/%d9%86%d8%ad%d9%88%d9%87-%d8%ae%d9%88%d8%af%da%a9%d8%a7%d8%b1%d8%b3%d8%a7%d8%b2%db%8c-%d8%a7%d8%b3%d9%86%d8%a7%d8%af-pdf-%d8%a8%d8%a7-react-%d9%88-typescript\/#%D8%A7%D9%86%D8%AA%D8%B4%D8%A7%D8%B1_%D8%A8%D9%87_%DB%8C%DA%A9_API\" >\u0627\u0646\u062a\u0634\u0627\u0631 \u0628\u0647 \u06cc\u06a9 API<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A2%D9%86%DA%86%D9%87_%D9%85%DB%8C_%D8%AE%D9%88%D8%A7%D9%87%DB%8C%D9%85_%D8%A8%D8%B3%D8%A7%D8%B2%DB%8C%D9%85\"><\/span>\n<p>  \u0622\u0646\u0686\u0647 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0628\u0633\u0627\u0632\u06cc\u0645<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 \u0627\u06cc\u0646 \u0631\u0627\u0647\u0646\u0645\u0627 \u060c \u0645\u0627 \u06cc\u0627\u062f \u0645\u06cc \u06af\u06cc\u0631\u06cc\u0645:<\/p>\n<ul>\n<li>\u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 React + TypeScript + tailwindcss \u0631\u0627 \u062a\u0646\u0638\u06cc\u0645 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u06cc\u06a9 \u0627\u0644\u06af\u0648\u06cc \u0633\u0646\u062f \u0641\u0627\u06a9\u062a\u0648\u0631 \u0628\u0633\u0627\u0632\u06cc\u062f<\/li>\n<li>\u0628\u0631\u0627\u06cc \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0648 \u0627\u0631\u0627\u0626\u0647 \u0622\u0646 \u0628\u0647 PDF \u0627\u0632 htmldocs \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u062f\u0631 \u063a\u0631\u0641\u0647 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0645\u0627\u0646\u0646\u062f \u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u0634\u062a\u0631\u06cc \u0648 \u0645\u0648\u0627\u0631\u062f \u062e\u0637 \u0639\u0628\u0648\u0631 \u06a9\u0646\u06cc\u062f<\/li>\n<li>\u0628\u0647 \u0635\u0648\u0631\u062a \u0627\u062e\u062a\u06cc\u0627\u0631\u06cc \u0627\u0644\u06af\u0648\u06cc \u062e\u0648\u062f \u0631\u0627 \u0628\u0647 API \u0645\u0646\u062a\u0634\u0631 \u06a9\u0646\u06cc\u062f<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%A8%D8%B2%D8%A7%D8%B1%D9%87%D8%A7%DB%8C%DB%8C_%DA%A9%D9%87_%D9%85%D8%A7_%D8%A7%D8%B3%D8%AA%D9%81%D8%A7%D8%AF%D9%87_%D8%AE%D9%88%D8%A7%D9%87%DB%8C%D9%85_%DA%A9%D8%B1%D8%AF\"><\/span>\n<p>  \u0627\u0628\u0632\u0627\u0631\u0647\u0627\u06cc\u06cc \u06a9\u0647 \u0645\u0627 \u0627\u0633\u062a\u0641\u0627\u062f\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<ul>\n<li>\u0648\u0627\u06a9\u0646\u0634 \u0648 \u0646\u0648\u0639 \u0628\u0631\u0627\u06cc \u0627\u062c\u0632\u0627\u06cc \u0633\u0627\u0632\u0646\u062f\u0647 \u0648 \u0646\u0648\u0639 \u0627\u06cc\u0645\u0646\u06cc<\/li>\n<li>tailwindcss \u0628\u0631\u0627\u06cc \u06cc\u06a9 \u0638\u0627\u0647\u0631 \u0637\u0631\u0627\u062d\u06cc \u0634\u062f\u0647<\/li>\n<li>\n<code>htmldocs<\/code>  \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u0633\u0646\u062f<\/li>\n<\/ul>\n<h2><span class=\"ez-toc-section\" id=\"%D8%AA%D9%86%D8%B8%DB%8C%D9%85_%D9%BE%D8%B1%D9%88%DA%98%D9%87\"><\/span>\n<p>  \u062a\u0646\u0638\u06cc\u0645 \u067e\u0631\u0648\u0698\u0647<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u0627\u06af\u0631 \u062a\u0627\u0632\u0647 \u0634\u0631\u0648\u0639 \u0645\u06cc \u06a9\u0646\u06cc\u062f \u060c \u0633\u0627\u062f\u0647 \u062a\u0631\u06cc\u0646 \u0631\u0627\u0647 \u0628\u0631\u0627\u06cc \u062f\u0627\u0631\u0628\u0633\u062a \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u062c\u062f\u06cc\u062f \u0627\u0633\u062a<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx htmldocs@latest init\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0628\u0627 \u0627\u06cc\u0646 \u06a9\u0627\u0631 \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0622\u0645\u0627\u062f\u0647 \u0628\u0631\u0627\u06cc \u0631\u0641\u062a\u0646 \u0628\u0627 \u0628\u0631\u062e\u06cc \u0627\u0632 tepmlates \u0627\u0632 \u067e\u06cc\u0634 \u0633\u0627\u062e\u062a\u0647 \u0634\u062f\u0647 \u062a\u0646\u0638\u06cc\u0645 \u0645\u06cc \u0634\u0648\u062f.<\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u0646 \u0622\u0645\u0648\u0632\u0634 \u060c \u0641\u0631\u0636 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f \u06a9\u0647 \u0642\u0628\u0644\u0627\u064b \u06cc\u06a9 \u067e\u0631\u0648\u0698\u0647 \u0645\u0648\u062c\u0648\u062f \u062f\u0627\u0631\u06cc\u0645 \u0648 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u0645 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u0645 <code>htmldocs<\/code> \u0628\u0647 \u0622\u0646 \u0627\u0628\u062a\u062f\u0627 \u0628\u0633\u062a\u0647 \u0647\u0627 \u0631\u0627 \u0628\u0647 \u0635\u0648\u0631\u062a \u062f\u0633\u062a\u06cc \u0646\u0635\u0628 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npm <span class=\"nb\">install <\/span>htmldocs @htmldocs\/react @htmldocs\/render\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u067e\u0633 \u060c \u0634\u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>documents<\/code> \u067e\u0648\u0634\u0647 \u0628\u0631\u0627\u06cc \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0634\u0645\u0627.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code><span class=\"nb\">mkdir <\/span>documents\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Document<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@htmldocs\/react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">~\/index.css<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ import global TailwindCSS file<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">Invoice<\/span><span class=\"p\">()<\/span> <span class=\"p\">{<\/span>\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n      <span class=\"p\">&lt;<\/span><span class=\"nc\">Document<\/span> <span class=\"na\">size<\/span><span class=\"p\">=<\/span><span class=\"s\">\"A4\"<\/span> <span class=\"na\">orientation<\/span><span class=\"p\">=<\/span><span class=\"s\">\"portrait\"<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-xl font-bold\"<\/span><span class=\"p\">&gt;<\/span>Invoice starter<span class=\"p\"\/><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n      <span class=\"p\"\/><span class=\"nc\">Document<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">)<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Invoice<\/span><span class=\"p\">;<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062f\u0631 \u062f\u0627\u062e\u0644 \u067e\u0648\u0634\u0647 \u062c\u062f\u06cc\u062f \u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 \u062c\u062f\u06cc\u062f \u0628\u0647 \u0646\u0627\u0645 \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f <code>Invoice.tsx<\/code>:<\/p>\n<p>\u0647\u0645\u0686\u0646\u06cc\u0646 \u0628\u0627\u06cc\u062f \u0627\u06cc\u0646 \u067e\u0648\u0634\u0647 \u0631\u0627 \u0628\u0647 tsconfig \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"err\">\/\/<\/span><span class=\"w\"> <\/span><span class=\"err\">tsconfig.json<\/span><span class=\"w\">\n<\/span><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"include\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">[<\/span><span class=\"err\">...<\/span><span class=\"p\">,<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"documents\"<\/span><span class=\"p\">],<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 tailwind.config.js \u0634\u0645\u0627:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"err\">\/**<\/span><span class=\"w\"> <\/span><span class=\"err\">@type<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"err\">import('tailwindcss').Config<\/span><span class=\"p\">}<\/span><span class=\"w\"> <\/span><span class=\"err\">*\/<\/span><span class=\"w\">\n<\/span><span class=\"err\">module.exports<\/span><span class=\"w\"> <\/span><span class=\"err\">=<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"err\">\/\/...<\/span><span class=\"w\"> <\/span><span class=\"err\">other<\/span><span class=\"w\"> <\/span><span class=\"err\">config<\/span><span class=\"w\"> <\/span><span class=\"err\">options<\/span><span class=\"w\">\n  <\/span><span class=\"err\">content:<\/span><span class=\"w\"> <\/span><span class=\"p\">[<\/span><span class=\"err\">...<\/span><span class=\"p\">,<\/span><span class=\"w\"> <\/span><span class=\"s2\">\".\/documents\/**\/*.{js,jsx,ts,tsx}\"<\/span><span class=\"p\">],<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"err\">;<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u0631\u0627\u0646\u062c\u0627\u0645 \u060c \u0634\u0645\u0627 \u0645\u06cc \u062e\u0648\u0627\u0647\u06cc\u062f \u06cc\u06a9 \u0627\u0633\u06a9\u0631\u06cc\u067e\u062a \u062c\u062f\u06cc\u062f \u0628\u0647 \u0628\u0633\u062a\u0647 \u062e\u0648\u062f \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight json\"><code><span class=\"err\">\/\/<\/span><span class=\"w\"> <\/span><span class=\"err\">package.json<\/span><span class=\"w\">\n<\/span><span class=\"p\">{<\/span><span class=\"w\">\n  <\/span><span class=\"err\">...<\/span><span class=\"w\">\n  <\/span><span class=\"nl\">\"scripts\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"p\">{<\/span><span class=\"w\">\n    <\/span><span class=\"nl\">\"docs:dev\"<\/span><span class=\"p\">:<\/span><span class=\"w\"> <\/span><span class=\"s2\">\"npx htmldocs@latest dev\"<\/span><span class=\"w\">\n  <\/span><span class=\"p\">},<\/span><span class=\"w\">\n<\/span><span class=\"p\">}<\/span><span class=\"w\">\n<\/span><\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u062d\u0627\u0644\u0627 \u060c \u0648\u0642\u062a\u06cc \u062f\u0648\u06cc\u062f\u06cc\u062f <code>npm run docs:dev<\/code>\u060c \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0633\u0631\u0648\u0631 \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0632\u0646\u062f\u0647 \u0631\u0627 \u0628\u0627 \u0633\u0646\u062f \u062c\u062f\u06cc\u062f \u062e\u0648\u062f \u0645\u0634\u0627\u0647\u062f\u0647 \u06a9\u0646\u06cc\u062f.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fri3dmd017ue5ml0f19iu.png\" alt=\"\u0633\u0631\u0648\u0631 \u067e\u06cc\u0634 \u0646\u0645\u0627\u06cc\u0634 \u0632\u0646\u062f\u0647 htmldocs\" loading=\"lazy\" width=\"800\" height=\"566\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D8%B6%D8%A7%D9%81%D9%87_%DA%A9%D8%B1%D8%AF%D9%86_%D8%AF%D8%A7%D8%AF%D9%87_%D9%87%D8%A7%DB%8C_%D9%BE%D9%88%DB%8C%D8%A7\"><\/span>\n<p>  \u0627\u0636\u0627\u0641\u0647 \u06a9\u0631\u062f\u0646 \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>\u062f\u0631 htmldocs \u060c \u062f\u0627\u062f\u0647 \u0647\u0627\u06cc \u067e\u0648\u06cc\u0627 \u0628\u0647 \u0639\u0646\u0648\u0627\u0646 \u063a\u0631\u0641\u0647 \u0628\u0647 \u0645\u0624\u0644\u0641\u0647 \u0645\u0646\u062a\u0642\u0644 \u0645\u06cc \u0634\u0648\u0646\u062f. \u0628\u06cc\u0627\u06cc\u06cc\u062f \u0627\u0644\u06af\u0648\u06cc \u0627\u0633\u062a\u0627\u0631\u062a \u0645\u0627 \u0631\u0627 \u0628\u0631\u0627\u06cc \u0628\u0647 \u062f\u0633\u062a \u0622\u0648\u0631\u062f\u0646 \u062c\u0632\u0626\u06cc\u0627\u062a \u0645\u0634\u062a\u0631\u06cc \u0648 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0645\u062c\u0645\u0648\u0639\u0647 \u0627\u06cc \u0627\u0632 \u062e\u062f\u0645\u0627\u062a \u062a\u063a\u06cc\u06cc\u0631 \u062f\u0647\u06cc\u0645. \u0645\u0627 \u0647\u0645\u0686\u0646\u06cc\u0646 \u0637\u0631\u062d \u0631\u0627 \u062a\u0627\u0632\u0647 \u0645\u06cc \u06a9\u0646\u06cc\u0645 \u0648 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0645\u062d\u0627\u0633\u0628\u0627\u062a \u0642\u06cc\u0645\u062a \u0631\u0627 \u0627\u0636\u0627\u0641\u0647 \u062e\u0648\u0627\u0647\u06cc\u0645 \u06a9\u0631\u062f.<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"k\">import<\/span> <span class=\"p\">{<\/span> <span class=\"nx\">Document<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Head<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Page<\/span><span class=\"p\">,<\/span> <span class=\"nx\">Footer<\/span> <span class=\"p\">}<\/span> <span class=\"k\">from<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">@htmldocs\/react<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span>\n<span class=\"k\">import<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">..\/src\/styles\/tailwind.css<\/span><span class=\"dl\">\"<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ import global TailwindCSS file<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">Service<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">name<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">description<\/span><span class=\"p\">?:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">quantity<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">rate<\/span><span class=\"p\">:<\/span> <span class=\"kr\">number<\/span><span class=\"p\">;<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kr\">interface<\/span> <span class=\"nx\">InvoiceProps<\/span> <span class=\"p\">{<\/span>\n  <span class=\"nl\">customerName<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">customerEmail<\/span><span class=\"p\">:<\/span> <span class=\"kr\">string<\/span><span class=\"p\">;<\/span>\n  <span class=\"nl\">services<\/span><span class=\"p\">:<\/span> <span class=\"nx\">Service<\/span><span class=\"p\">[];<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"kd\">function<\/span> <span class=\"nf\">Invoice<\/span><span class=\"p\">({<\/span> <span class=\"nx\">customerName<\/span><span class=\"p\">,<\/span> <span class=\"nx\">customerEmail<\/span><span class=\"p\">,<\/span> <span class=\"nx\">services<\/span> <span class=\"p\">}:<\/span> <span class=\"nx\">InvoiceProps<\/span><span class=\"p\">)<\/span> <span class=\"p\">{<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">subtotal<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">services<\/span><span class=\"p\">.<\/span><span class=\"nf\">reduce<\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">(<\/span><span class=\"nx\">acc<\/span><span class=\"p\">,<\/span> <span class=\"nx\">service<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"nx\">acc<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">service<\/span><span class=\"p\">.<\/span><span class=\"nx\">quantity<\/span> <span class=\"o\">*<\/span> <span class=\"nx\">service<\/span><span class=\"p\">.<\/span><span class=\"nx\">rate<\/span><span class=\"p\">,<\/span>\n        <span class=\"mi\">0<\/span>\n    <span class=\"p\">);<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">taxRate<\/span> <span class=\"o\">=<\/span> <span class=\"mf\">0.1<\/span><span class=\"p\">;<\/span> <span class=\"c1\">\/\/ 10% tax<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">tax<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">subtotal<\/span> <span class=\"o\">*<\/span> <span class=\"nx\">taxRate<\/span><span class=\"p\">;<\/span>\n    <span class=\"kd\">const<\/span> <span class=\"nx\">total<\/span> <span class=\"o\">=<\/span> <span class=\"nx\">subtotal<\/span> <span class=\"o\">+<\/span> <span class=\"nx\">tax<\/span><span class=\"p\">;<\/span>\n\n    <span class=\"k\">return <\/span><span class=\"p\">(<\/span>\n        <span class=\"p\">&lt;<\/span><span class=\"nc\">Document<\/span> <span class=\"na\">size<\/span><span class=\"p\">=<\/span><span class=\"s\">\"A4\"<\/span> <span class=\"na\">orientation<\/span><span class=\"p\">=<\/span><span class=\"s\">\"portrait\"<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">Head<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nt\">title<\/span><span class=\"p\">&gt;<\/span>Invoice for <span class=\"si\">{<\/span><span class=\"nx\">customerName<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">title<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\"\/><span class=\"nc\">Head<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\">&lt;<\/span><span class=\"nc\">Page<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"p-8\"<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex justify-between items-start mb-8\"<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"p\">&lt;<\/span><span class=\"nt\">h1<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-2xl font-bold my-0\"<\/span><span class=\"p\">&gt;<\/span>INVOICE<span class=\"p\"\/><span class=\"nt\">h1<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-gray-600\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"k\">new<\/span> <span class=\"nc\">Date<\/span><span class=\"p\">().<\/span><span class=\"nf\">toLocaleDateString<\/span><span class=\"p\">()<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-right\"<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"font-medium\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">customerName<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-gray-600\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">customerEmail<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n\n                <span class=\"p\">&lt;<\/span><span class=\"nt\">table<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"w-full mb-8\"<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\">&lt;<\/span><span class=\"nt\">thead<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"p\">&lt;<\/span><span class=\"nt\">tr<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"border-b\"<\/span><span class=\"p\">&gt;<\/span>\n                            <span class=\"p\">&lt;<\/span><span class=\"nt\">th<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-left py-2\"<\/span><span class=\"p\">&gt;<\/span>Service<span class=\"p\"\/><span class=\"nt\">th<\/span><span class=\"p\">&gt;<\/span>\n                            <span class=\"p\">&lt;<\/span><span class=\"nt\">th<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-right py-2\"<\/span><span class=\"p\">&gt;<\/span>Qty<span class=\"p\"\/><span class=\"nt\">th<\/span><span class=\"p\">&gt;<\/span>\n                            <span class=\"p\">&lt;<\/span><span class=\"nt\">th<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-right py-2\"<\/span><span class=\"p\">&gt;<\/span>Rate<span class=\"p\"\/><span class=\"nt\">th<\/span><span class=\"p\">&gt;<\/span>\n                            <span class=\"p\">&lt;<\/span><span class=\"nt\">th<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-right py-2\"<\/span><span class=\"p\">&gt;<\/span>Amount<span class=\"p\"\/><span class=\"nt\">th<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"p\"\/><span class=\"nt\">tr<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\"\/><span class=\"nt\">thead<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\">&lt;<\/span><span class=\"nt\">tbody<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"si\">{<\/span><span class=\"nx\">services<\/span><span class=\"p\">.<\/span><span class=\"nf\">map<\/span><span class=\"p\">((<\/span><span class=\"nx\">service<\/span><span class=\"p\">,<\/span> <span class=\"nx\">index<\/span><span class=\"p\">)<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n                            <span class=\"p\">&lt;<\/span><span class=\"nt\">tr<\/span> <span class=\"na\">key<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"nx\">index<\/span><span class=\"si\">}<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"border-b\"<\/span><span class=\"p\">&gt;<\/span>\n                                <span class=\"p\">&lt;<\/span><span class=\"nt\">td<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"py-2\"<\/span><span class=\"p\">&gt;<\/span>\n                                    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n                                        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"font-medium\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">service<\/span><span class=\"p\">.<\/span><span class=\"nx\">name<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n                                        <span class=\"si\">{<\/span><span class=\"nx\">service<\/span><span class=\"p\">.<\/span><span class=\"nx\">description<\/span> <span class=\"o\">&amp;&amp;<\/span> <span class=\"p\">(<\/span>\n                                            <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-sm text-gray-600\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">service<\/span><span class=\"p\">.<\/span><span class=\"nx\">description<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n                                        <span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n                                    <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n                                <span class=\"p\"\/><span class=\"nt\">td<\/span><span class=\"p\">&gt;<\/span>\n                                <span class=\"p\">&lt;<\/span><span class=\"nt\">td<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-right py-2\"<\/span><span class=\"p\">&gt;<\/span><span class=\"si\">{<\/span><span class=\"nx\">service<\/span><span class=\"p\">.<\/span><span class=\"nx\">quantity<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">td<\/span><span class=\"p\">&gt;<\/span>\n                                <span class=\"p\">&lt;<\/span><span class=\"nt\">td<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-right py-2\"<\/span><span class=\"p\">&gt;<\/span>$<span class=\"si\">{<\/span><span class=\"nx\">service<\/span><span class=\"p\">.<\/span><span class=\"nx\">rate<\/span><span class=\"p\">.<\/span><span class=\"nf\">toFixed<\/span><span class=\"p\">(<\/span><span class=\"mi\">2<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">td<\/span><span class=\"p\">&gt;<\/span>\n                                <span class=\"p\">&lt;<\/span><span class=\"nt\">td<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-right py-2\"<\/span><span class=\"p\">&gt;<\/span>\n                                    $<span class=\"si\">{<\/span><span class=\"p\">(<\/span><span class=\"nx\">service<\/span><span class=\"p\">.<\/span><span class=\"nx\">quantity<\/span> <span class=\"o\">*<\/span> <span class=\"nx\">service<\/span><span class=\"p\">.<\/span><span class=\"nx\">rate<\/span><span class=\"p\">).<\/span><span class=\"nf\">toFixed<\/span><span class=\"p\">(<\/span><span class=\"mi\">2<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n                                <span class=\"p\"\/><span class=\"nt\">td<\/span><span class=\"p\">&gt;<\/span>\n                            <span class=\"p\"\/><span class=\"nt\">tr<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"p\">))<\/span><span class=\"si\">}<\/span>\n                    <span class=\"p\"\/><span class=\"nt\">tbody<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\"\/><span class=\"nt\">table<\/span><span class=\"p\">&gt;<\/span>\n\n                <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex flex-col items-end gap-2\"<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex justify-between w-48\"<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>Subtotal:<span class=\"p\"\/><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>$<span class=\"si\">{<\/span><span class=\"nx\">subtotal<\/span><span class=\"p\">.<\/span><span class=\"nf\">toFixed<\/span><span class=\"p\">(<\/span><span class=\"mi\">2<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex justify-between w-48\"<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>Tax (<span class=\"si\">{<\/span><span class=\"p\">(<\/span><span class=\"nx\">taxRate<\/span> <span class=\"o\">*<\/span> <span class=\"mi\">100<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span>%):<span class=\"p\"\/><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>$<span class=\"si\">{<\/span><span class=\"nx\">tax<\/span><span class=\"p\">.<\/span><span class=\"nf\">toFixed<\/span><span class=\"p\">(<\/span><span class=\"mi\">2<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\">&lt;<\/span><span class=\"nt\">div<\/span> <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"flex justify-between w-48 font-bold border-t pt-2\"<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>Total:<span class=\"p\"\/><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>\n                        <span class=\"p\">&lt;<\/span><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>$<span class=\"si\">{<\/span><span class=\"nx\">total<\/span><span class=\"p\">.<\/span><span class=\"nf\">toFixed<\/span><span class=\"p\">(<\/span><span class=\"mi\">2<\/span><span class=\"p\">)<\/span><span class=\"si\">}<\/span><span class=\"p\"\/><span class=\"nt\">span<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n                <span class=\"p\"\/><span class=\"nt\">div<\/span><span class=\"p\">&gt;<\/span>\n\n                <span class=\"p\">&lt;<\/span><span class=\"nc\">Footer<\/span> \n                    <span class=\"na\">position<\/span><span class=\"p\">=<\/span><span class=\"s\">\"bottom-center\"<\/span>\n                    <span class=\"na\">className<\/span><span class=\"p\">=<\/span><span class=\"s\">\"text-center text-gray-600\"<\/span>\n                    <span class=\"na\">marginBoxStyles<\/span><span class=\"p\">=<\/span><span class=\"si\">{<\/span><span class=\"p\">{<\/span>\n                        <span class=\"na\">marginBottom<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">0.5in<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n                    <span class=\"p\">}<\/span><span class=\"si\">}<\/span>\n                <span class=\"p\">&gt;<\/span>\n                    <span class=\"si\">{<\/span><span class=\"p\">()<\/span> <span class=\"o\">=&gt;<\/span> <span class=\"p\">(<\/span>\n                        <span class=\"p\">&lt;<\/span><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>Thank you for your business!<span class=\"p\"\/><span class=\"nt\">p<\/span><span class=\"p\">&gt;<\/span>\n                    <span class=\"p\">)<\/span><span class=\"si\">}<\/span>\n                <span class=\"p\"\/><span class=\"nc\">Footer<\/span><span class=\"p\">&gt;<\/span>\n            <span class=\"p\"\/><span class=\"nc\">Page<\/span><span class=\"p\">&gt;<\/span>\n        <span class=\"p\"\/><span class=\"nc\">Document<\/span><span class=\"p\">&gt;<\/span>\n    <span class=\"p\">);<\/span>\n<span class=\"p\">}<\/span>\n\n<span class=\"nx\">Invoice<\/span><span class=\"p\">.<\/span><span class=\"nx\">PreviewProps<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">customerName<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Acme Corp<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">customerEmail<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">billing@acmecorp.com<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">services<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n        <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Web Design<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Homepage redesign<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">quantity<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"na\">rate<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1500<\/span> <span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Consulting<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Technical architecture review<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">quantity<\/span><span class=\"p\">:<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"na\">rate<\/span><span class=\"p\">:<\/span> <span class=\"mi\">800<\/span> <span class=\"p\">},<\/span>\n    <span class=\"p\">],<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Invoice<\/span><span class=\"p\">;<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><code>Invoice.PreviewProps<\/code>  \u0628\u0647 \u062a\u0646\u0638\u06cc\u0645 \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0647\u0627\u06cc \u067e\u06cc\u0634 \u0641\u0631\u0636 \u0631\u0648\u06cc \u0633\u0646\u062f \u0628\u0631\u0627\u06cc \u0627\u0631\u0627\u0626\u0647 \u06a9\u0645\u06a9 \u0645\u06cc \u06a9\u0646\u062f. \u0627\u06cc\u0646 \u06cc\u06a9 \u0648\u06cc\u0698\u06af\u06cc \u0645\u0648\u0631\u062f \u0646\u06cc\u0627\u0632 \u0628\u0631\u0627\u06cc \u0627\u0637\u0645\u06cc\u0646\u0627\u0646 \u0627\u0632 \u0627\u06cc\u0646\u06a9\u0647 \u0633\u0646\u062f \u0634\u0645\u0627 \u0642\u0627\u062f\u0631 \u0628\u0647 \u062a\u0647\u06cc\u0647 \u0635\u062d\u06cc\u062d \u0627\u0633\u062a.<\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0633\u0646\u062f \u0634\u0645\u0627 \u0628\u0627\u06cc\u062f \u0628\u0647 \u0627\u06cc\u0646 \u0634\u06a9\u0644 \u0628\u0627\u0634\u062f:<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fc0nt4rbslsyipwiwneui.png\" alt=\"\u0627\u0644\u06af\u0648\u06cc \u0641\u0627\u06a9\u062a\u0648\u0631\" loading=\"lazy\" width=\"800\" height=\"566\" title=\"\"><\/p>\n<p>\u0628\u0631\u0627\u06cc \u0627\u06cc\u062c\u0627\u062f \u062f\u0633\u062a\u06cc \u06cc\u06a9 \u0633\u0646\u062f\u06cc \u0628\u0631 \u0627\u0633\u0627\u0633 \u0627\u06cc\u0646 \u0627\u0644\u06af\u0648\u06cc \u060c \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0631\u0648\u06cc &#8220;\u067e\u0631 \u0648 \u062a\u0648\u0644\u06cc\u062f&#8221; \u06a9\u0644\u06cc\u06a9 \u06a9\u0646\u06cc\u062f \u06a9\u0647 \u0628\u0631\u0627\u06cc \u067e\u0631 \u06a9\u0631\u062f\u0646 \u062c\u0632\u0626\u06cc\u0627\u062a \u0641\u0631\u0645 \u0627\u06cc\u062c\u0627\u062f \u0645\u06cc \u0634\u0648\u062f<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F4elk1e33lv0obefzr84r.png\" alt=\"\u0641\u0631\u0645 \u0631\u0627 \u067e\u0631 \u0648 \u062a\u0648\u0644\u06cc\u062f \u06a9\u0646\u06cc\u062f\" loading=\"lazy\" width=\"800\" height=\"565\" title=\"\"><\/p>\n<h2><span class=\"ez-toc-section\" id=\"%D8%A7%D9%86%D8%AA%D8%B4%D8%A7%D8%B1_%D8%A8%D9%87_%DB%8C%DA%A9_API\"><\/span>\n<p>  \u0627\u0646\u062a\u0634\u0627\u0631 \u0628\u0647 \u06cc\u06a9 API<br \/>\n<span class=\"ez-toc-section-end\"><\/span><\/h2>\n<p>HTMLDOCS \u0647\u0645\u0686\u0646\u06cc\u0646 \u06cc\u06a9 \u0633\u0631\u0648\u06cc\u0633 \u0627\u0628\u0631\u06cc \u0631\u0627 \u0627\u0631\u0627\u0626\u0647 \u0645\u06cc \u062f\u0647\u062f \u06a9\u0647 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u0633\u0646\u0627\u062f \u0631\u0627 \u0645\u0646\u062a\u0634\u0631 \u06a9\u0646\u06cc\u062f \u062a\u0627 \u0622\u0646\u0647\u0627 \u0631\u0627 \u062f\u0631 \u067e\u0634\u062a \u06cc\u06a9 API REST \u0633\u0627\u062f\u0647 \u0642\u0631\u0627\u0631 \u062f\u0647\u06cc\u062f. <\/p>\n<p>\u0642\u0628\u0644 \u0627\u0632 \u0627\u0646\u062a\u0634\u0627\u0631 \u060c \u0628\u0627\u06cc\u062f \u06cc\u06a9 \u0634\u0646\u0627\u0633\u0647 \u0633\u0646\u062f \u0631\u0627 \u0628\u0647 \u067e\u0631\u0648\u0646\u062f\u0647 \u0627\u0636\u0627\u0641\u0647 \u06a9\u0646\u06cc\u062f:<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight tsx\"><code><span class=\"c1\">\/\/ rest of Invoice.tsx<\/span>\n\n<span class=\"nx\">Invoice<\/span><span class=\"p\">.<\/span><span class=\"nx\">PreviewProps<\/span> <span class=\"o\">=<\/span> <span class=\"p\">{<\/span>\n    <span class=\"na\">customerName<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Acme Corp<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">customerEmail<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">billing@acmecorp.com<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span>\n    <span class=\"na\">services<\/span><span class=\"p\">:<\/span> <span class=\"p\">[<\/span>\n        <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Web Design<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Homepage redesign<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">quantity<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1<\/span><span class=\"p\">,<\/span> <span class=\"na\">rate<\/span><span class=\"p\">:<\/span> <span class=\"mi\">1500<\/span> <span class=\"p\">},<\/span>\n        <span class=\"p\">{<\/span> <span class=\"na\">name<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Consulting<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">description<\/span><span class=\"p\">:<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">Technical architecture review<\/span><span class=\"dl\">\"<\/span><span class=\"p\">,<\/span> <span class=\"na\">quantity<\/span><span class=\"p\">:<\/span> <span class=\"mi\">2<\/span><span class=\"p\">,<\/span> <span class=\"na\">rate<\/span><span class=\"p\">:<\/span> <span class=\"mi\">800<\/span> <span class=\"p\">},<\/span>\n    <span class=\"p\">],<\/span>\n<span class=\"p\">};<\/span>\n\n<span class=\"c1\">\/\/ add this line<\/span>\n<span class=\"nx\">Invoice<\/span><span class=\"p\">.<\/span><span class=\"nx\">documentId<\/span> <span class=\"o\">=<\/span> <span class=\"dl\">\"<\/span><span class=\"s2\">invoice<\/span><span class=\"dl\">\"<\/span>\n\n<span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"nx\">Invoice<\/span><span class=\"p\">;<\/span>\n\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u067e\u0633 \u060c \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0627\u062c\u0631\u0627 \u06a9\u0646\u06cc\u062f<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>npx htmldocs@latest login\nnpx htmldocs@latest publish documents\/Invoice.tsx\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0633\u067e\u0633 \u060c \u0634\u0645\u0627 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0631\u0627\u06cc \u062f\u06cc\u062f\u0646 \u0633\u0646\u062f \u0628\u0627\u0631\u06af\u0630\u0627\u0631\u06cc \u0634\u062f\u0647 \u0648\u0627\u0631\u062f \u062f\u0627\u0634\u0628\u0648\u0631\u062f \u0634\u0648\u06cc\u062f <\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8xdcqtjnq0qn6jqs4elg.png\" alt=\"\u0634\u0631\u062d \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"566\" title=\"\"><\/p>\n<p>\u0627\u06a9\u0646\u0648\u0646 \u0645\u06cc \u062a\u0648\u0627\u0646\u06cc\u062f \u0628\u0627 \u0628\u0631\u0642\u0631\u0627\u0631\u06cc \u06cc\u06a9 \u062a\u0645\u0627\u0633 API \u0633\u0627\u062f\u0647 \u060c \u06cc\u06a9 \u0641\u0627\u06cc\u0644 PDF \u0627\u06cc\u062c\u0627\u062f \u06a9\u0646\u06cc\u062f!<\/p>\n<div class=\"highlight js-code-highlight\">\n<pre class=\"highlight shell\"><code>curl <span class=\"nt\">-X<\/span> POST https:\/\/htmldocs.com\/api\/documents\/invoice <span class=\"se\">\\<\/span>\n  <span class=\"nt\">-H<\/span> <span class=\"s2\">\"Authorization: Bearer YOUR_API_KEY\"<\/span> <span class=\"se\">\\<\/span>\n  <span class=\"nt\">-H<\/span> <span class=\"s2\">\"Content-Type: application\/json\"<\/span> <span class=\"se\">\\<\/span>\n  <span class=\"nt\">-d<\/span> <span class=\"s1\">'{\n    \"props\": {\n      \"services\": [\n        {\n          \"name\": \"Web Design\",\n          \"rate\": 1500,\n          \"quantity\": 1,\n          \"description\": \"Homepage redesign\"\n        },\n        {\n          \"name\": \"Consulting\",\n          \"rate\": 800,\n          \"quantity\": 2,\n          \"description\": \"Technical architecture review\"\n        }\n      ],\n      \"customerName\": \"Acme Corp\",\n      \"customerEmail\": \"billing@acmecorp.com\"\n    },\n    \"format\": \"json\"\n  }'<\/span>\n<\/code><\/pre>\n<div class=\"highlight__panel js-actions-panel\">\n<div class=\"highlight__panel-action js-fullscreen-code-action\">\n    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-on\"><title>\u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u0631\u0627 \u0648\u0627\u0631\u062f \u06a9\u0646\u06cc\u062f<\/title>\n    <path d=\"M16 3h6v6h-2V5h-4V3zM2 3h6v2H4v4H2V3zm18 16v-4h2v6h-6v-2h4zM4 19h4v2H2v-6h2v4z\"\/>\n<\/svg><\/p>\n<p>    <svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"20px\" height=\"20px\" viewbox=\"0 0 24 24\" class=\"highlight-action crayons-icon highlight-action--fullscreen-off\"><title>\u0627\u0632 \u062d\u0627\u0644\u062a \u062a\u0645\u0627\u0645 \u0635\u0641\u062d\u0647 \u062e\u0627\u0631\u062c \u0634\u0648\u06cc\u062f<\/title>\n    <path d=\"M18 7h4v2h-6V3h2v4zM8 9H2V7h4V3h2v6zm10 8v4h-2v-6h6v2h-4zM8 15v6H6v-4H2v-2h6z\"\/>\n<\/svg><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>\u0648 \u0622\u0646\u062c\u0627 \u0645\u06cc \u0631\u0648\u06cc\u0645!<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/media2.dev.to\/dynamic\/image\/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqt4jfax5t8ffedf8beid.png\" alt=\"\u0634\u0631\u062d \u062a\u0635\u0648\u06cc\u0631\" loading=\"lazy\" width=\"800\" height=\"568\" title=\"\"><\/p>\n<p>\u0628\u0631\u0627\u06cc \u06a9\u0633\u0628 \u0627\u0637\u0644\u0627\u0639\u0627\u062a \u0628\u06cc\u0634\u062a\u0631 \u062f\u0631 \u0645\u0648\u0631\u062f HTMLDOCS \u060c \u0627\u06cc\u0646 \u0645\u0648\u0627\u0631\u062f \u0631\u0627 \u0628\u0631\u0631\u0633\u06cc \u06a9\u0646\u06cc\u062f:<\/p>\n<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u06cc\u06a9\u06cc \u0627\u0632 \u0645\u0634\u06a9\u0644\u06cc \u06a9\u0647 \u0628\u0633\u06cc\u0627\u0631\u06cc \u0627\u0632 \u0645\u0634\u0627\u063a\u0644 \u062f\u0631 \u0628\u0639\u0636\u06cc \u0627\u0632 \u0645\u0648\u0627\u0642\u0639 \u0628\u0627 \u0622\u0646 \u0631\u0648\u0628\u0631\u0648 \u062e\u0648\u0627\u0647\u0646\u062f \u0634\u062f \u060c \u062a\u0648\u0644\u06cc\u062f PDF \u0627\u0633\u062a &#8211; \u0645\u0648\u0627\u0631\u062f \u060c \u06af\u0632\u0627\u0631\u0634 \u0647\u0627 \u060c \u0631\u0633\u06cc\u062f\u0647\u0627 \u06cc\u0627 \u0641\u0631\u0645 \u0647\u0627 \u060c \u0628\u0631\u0627\u06cc \u0630\u06a9\u0631 \u0628\u0631\u062e\u06cc \u0627\u0632 \u0622\u0646\u0647\u0627. \u0627\u0632 \u0646\u0638\u0631 \u062a\u0627\u0631\u06cc\u062e\u06cc \u060c \u0627\u06cc\u0646 \u062f\u0631\u062f\u0646\u0627\u06a9 \u0628\u0648\u062f\u0647 \u0627\u0633\u062a: Word \u0648 Latex \u0628\u0631\u0627\u06cc \u0627\u0644\u06af\u0648\u0647\u0627\u06cc \u0632\u06cc\u0627\u062f\u06cc \u0641\u0631\u0627\u0647\u0645 \u0646\u0645\u06cc \u06a9\u0646\u0646\u062f \u060c \u0648 &hellip;<\/p>\n","protected":false},"author":2,"featured_media":105478,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"fifu_image_url":"https:\/\/media2.dev.to\/dynamic\/image\/width=1000,height=500,fit=cover,gravity=auto,format=auto\/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft6r46ny31i0nbphwvcs5.jpg","fifu_image_alt":"","footnotes":""},"categories":[339],"tags":[],"class_list":["post-105477","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dev"],"_links":{"self":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/105477","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/comments?post=105477"}],"version-history":[{"count":0,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/posts\/105477\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media\/105478"}],"wp:attachment":[{"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/media?parent=105477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/categories?post=105477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nabfollower.com\/blog\/wp-json\/wp\/v2\/tags?post=105477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}