資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究如何將 HTML 和 CSS 新增到 PDF 中？
在本教程中，我們將學習如何將 HTML 和 CSS 新增到 PDF 中。
HTML 和 CSS 使用樣式和設計構建網頁。我們可以將該網頁儲存為 PDF 檔案。使用原生 JavaScript 從頭開始建立 PDF 非常困難，並且程式碼將很長。
在 JavaScript 上建立了許多庫來幫助我們執行任務。像 html2pdf、jsPDF 等庫是將網頁轉換為 pdf 的知名庫。這些庫可以透過我們新增到程式中的指令碼在專案中實現。
因此，讓我們看看如何將 HTML 和 CSS 新增到 PDF 中。
在本教程中，我們將使用以下方法建立包含 HTML 和 CSS 的 PDF：
- 使用 html2pdf 庫
- 使用 jsPDF 庫
使用 html2pdf 庫
html2pdf 是一個用於將任何網頁轉換為 pdf 的 JavaScript 庫。我們可以使用 cdnjs 在 HTML 檔案的指令碼中新增此庫。它易於使用，並且是一個完整的客戶端庫。
使用者可以按照以下語法使用 html2pdf 庫將網頁轉換為 PDF：
語法
//To add html2pdf into to project <script src= "https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"> </script> //To create a pdf var element = document.getElementById(<element to convert into pdf>); html2pdf(element);
按照上述語法將 HTML 和 CSS 網頁轉換為 PDF。
示例
在示例中，我們使用了 html2pdf 庫將網頁轉換為 pdf。我們在網頁上添加了標題和段落。單擊網頁上的按鈕後，此網頁將轉換為 pdf。
<html>
<head>
<style>
body {
text-align: center;
}
#div {
color: red;
background-color: green;
align-content: center;
text-align: center;
}
</style>
</head>
<body>
<button id="btn"> Create PDF </button>
<div id="div">
<h2> Using <i> html2pdf library </i> to convert webpage into a pdf </h2>
<p> This is the Demo Text! </p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js">
</script>
<script>
var btn = document.getElementById("btn");
var createpdf = document.getElementById("div");
var opt = {
margin: 1,
filename: 'pdfcreated.pdf',
html2canvas: {
scale: 2
},
jsPDF: {
unit: 'in',
format: 'letter',
orientation: 'portrait'
}
};
btn.addEventListener("click", function() {
html2pdf().set(opt).from(createpdf).save();
});
</script>
</body>
</html>
在上述示例中，使用者可以看到使用 JavaScript 的 html2pdf 庫。我們將 HTML 和 CSS 網頁轉換為 PDF。
使用 jsPDF 庫
jsPDF 也是一個基於 JavaScript 建立的庫，可以將網頁轉換為 pdf 檔案。我們可以像 html2pdf 一樣匯入它。我們必須在 HTML 中的頭部或主體末尾的指令碼中包含 CDN。它只需一個語句即可轉換為 pdf，並且可以輕鬆儲存在裝置上。
所有使用者都可以按照語法使用 jsPDF 庫將網頁轉換為 PDF：
語法
//To integrate jsPDF library <script src = "https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> var element = document.getElementById(<element to convert into pdf>); var pdf = new jsPDF(); pdf.fromHTML(element); pdf.save(<File name>);
按照上述語法使用 jsPDF 庫將網頁轉換為 HTML。
示例
在示例中，我們使用了 jsPDF 庫將網頁轉換為 pdf。jsPDF 庫已使用 cdnjs 連結插入到 script 標籤中。單擊按鈕後，將建立具有與網頁上顯示相同內容的 pdf。
<html>
<body>
<button id="btn"> Create PDF </button>
<div id="container">
<h2> Using <i> jsPDF library </i> to convert webpage into a pdf </h2>
<p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquam, explicabo ullam asperiores esse quod nihil! </p>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js">
</script>
<script>
var button = document.getElementById("btn");
button.addEventListener("click", function() {
var doc = new jsPDF();
var pdf = document.querySelector("#container");
doc.fromHTML(pdf);
doc.save("file.pdf");
});
</script>
</body>
</html>
在上述示例中，使用者可以看到使用 JavaScript 的 jsPDF 庫，我們將 HTML 和 CSS 網頁轉換為 PDF。
在本教程中，我們學習瞭如何將 HTML 和 CSS 新增到 PDF 中。
8K+ 閱讀量
