Generate a PDF with JavaScript

0

 


กรณีการใช้งานทั่วไปใน JavaScript สำหรับการแปลง HTML เป็น PDF ทำให้ผู้เยี่ยมชมเว็บไซต์ของคุณสามารถดาวน์โหลดเนื้อหา HTML เป็นไฟล์ PDF ได้ ตัวอย่างเช่น ใบแจ้งหนี้ ตั๋วคอนเสิร์ต และตั๋วเครื่องบินมักจะมีให้ดาวน์โหลดในรูปแบบ PDF


CDN

 ให้เพิ่มแท็กสคริปต์ ลิงค์ CDN ในไฟล์ HTML ของคุณ

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js" integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>


การใช้ html2pdf

ในการเริ่มต้น ให้กำหนดฟังก์ชัน createPDF() ที่จะรับองค์ประกอบ(element)ที่คุณต้องการดาวน์โหลดเป็น PDF จากนั้นเรียก html2pdf ด้วย element นั้นเพื่อดาวน์โหลดโดยตรงบนไคลเอ็นต์ของผู้ใช้  ถัดไปใช้ปุ่มดาวน์โหลดเรียกใช้ฟังก์ชันนี้

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<title>HTML-to-PDF Example</title>
		<meta
			name="viewport"
			content="width=device-width, initial-scale=1"
		/>
		<!-- html2pdf CDN link -->
		<script
			src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.10.1/html2pdf.bundle.min.js"
			integrity="sha512-GsLlZN/3F2ErC5ifS5QtgpiJtWd43JWSuIgh7mbzZ8zBps+dvLusV+eNQATqgA/HdeKFVgA5v3S/cIrLF7QnIg=="
			crossorigin="anonymous"
			referrerpolicy="no-referrer"
		></script>
	</head>
	<body>
		<button id="download-button">Download as PDF</button>
		<div id="invoice">
			<h1>Our Invoice</h1>
		</div>

		<script>
			const button = document.getElementById('download-button');

			function generatePDF() {
				// Choose the element that your content will be rendered to.
				const element = document.getElementById('invoice');
				// Choose the element and save the PDF for your user.
				html2pdf().from(element).save();
			}

			button.addEventListener('click', generatePDF);
		</script>
	</body>
</html>

How to Generate a PDF with JavaScript 



ที่มาครูสมชายคัดมาจาก : {getButton} $text={อ้างอิงที่มา} $icon={link} $color={red} 
>>>TRY TO CHECK OUT , IF ANY ERROR FOUND. PLEASE LET ME KNOW BY COMMENT.
I'LL TRY MY LEVEL BEST TO FIX THE PROBLEM.
                                                                THANKS FOR VISITING thumariya.blogspot
Have a nice day!
-------------------------- -------------------------
>>>ลองตรวจสอบหากพบข้อผิดพลาด โปรดแจ้งให้เราทราบโดยแสดงความคิดเห็น
ฉันจะพยายามระดับของฉันให้ดีที่สุดเพื่อแก้ไขปัญหา
ขอบคุณสำหรับการเยี่ยมชม thumariya.blogspot
ขอให้เป็นวันที่ดี!

-------------------------- -------------------------

{fullWidth}

Tags:
แสดงความคิดเห็น (0)
ใหม่กว่า เก่ากว่า