在現代web應用程序、商業報告和其他文檔生成應用程序中,將網頁內容轉換為PDF格式是一個常見的需求。傳統的做法是使用類似於Adobe Acrobat等PDF生成庫,並且這些庫大多數只適用於後端。 但是,隨着前端web技術的發展,現在可以使用JavaScript或TypeScript在瀏覽器中直接生成PDF文件。這種方法有很多優點,如避免服務器負載,並且使得PDF生成的過程變得更加靈活。
一、前端生成PDF下載
有時候,用戶需要下載由前端生成的PDF文件。這是可以通過使用Blob和URL.createObjectURL()方法實現的。通過將一個Blob對象直接放在URL上,可以在客戶端上直接生成下載鏈接。以下是實現的代碼示例:
const pdfBlob = new Blob([pdfData], { type: 'application/pdf' }); const pdfUrl = URL.createObjectURL(pdfBlob); const link = document.createElement('a'); link.href = pdfUrl; link.download = "example.pdf"; document.body.appendChild(link); link.click();
在獲得鏈接之後,我們還需要創建一個a元素,將其設置為下載鏈接,並且通過模擬點擊標籤來強制瀏覽器開始下載PDF。
二、前端生成PDF功能
前端生成PDF功能是通過將HTML內容轉換為PDF實現的,這可以通過許多JavaScript PDF庫來完成。其中最受歡迎的是jsPDF、pdfmake、html2pdf以及wkhtmltopdf。以上的PDF生成器都可用於前端實現HTML到PDF的轉換。jsPDF是一個開源庫,可以生成HTML5 JavaScript應用程序。通過jsPDF,開發人員可以通過使用JavaScript規範簡單地創建和保存PDF文件。
const doc = new jsPDF(); doc.text("Hello World", 10, 10); doc.save("example.pdf");
以上代碼中,我們創建了一個空的PDF文檔,然後在其上添加一些文本。最後通過調用save()方法來保存該文檔。如果您需要將一個現有的HTML文檔轉換為PDF,則可以使用html2canvas和jsPDF一起使用。
html2canvas(document.body).then(canvas => { const imgData = canvas.toDataURL('image/png'); const pdf = new jsPDF(); pdf.addImage(imgData, 'PNG', 0, 0); pdf.save("example.pdf"); });
通過html2canvas,我們可以生成整個HTML頁面的截圖,將其轉換為PNG圖像,並將其添加到新創建的PDF文檔中。
三、前端生成PDF可複製
前端生成的PDF文件通常不能夠複製其中的文本和內容。這是因為通常生成的PDF是掃描PDF,每一頁上的文本是一個圖片而不是真正的文本。要解決這個問題,我們可以使用一種新的PDF生成方法,即使用HTML/CSS作為源,在客戶端上生成PDF文件。
這種方法生成的PDF是真正的PDF文件,而非掃描文件。這些PDF文件可以完全被選擇、複製和粘貼,此外還可以搜索其中的內容。實現這種PDF生成方案的庫包括:PDFKit、Puppeteer和wkhtmltopdf。
const puppeteer = require('puppeteer'); (async () => { const browser = await puppeteer.launch(); const page = await browser.newPage(); await page.goto('http://example.com'); const pdf = await page.pdf({ format: 'A4' }); await browser.close(); return pdf; })();
以上代碼可以在客戶端上使用Puppeteer來生成一個真正的PDF文件。Puppeteer是一個完全支持Chrome/Chromium API的庫,它可以通過JavaScript來控制瀏覽器,這樣就可以生成非常完美的PDF文件。
四、前端生成PDF文件
雖然前端生成PDF的主要目的是在瀏覽器中生成文件,但是通過使用Node.js、Express或其他web框架,也可以在後台生成PDF文件。例如,通過使用html-pdf庫,如下代碼所示,就可以在後台生成PDF文件:
const pdf = require('html-pdf'); const fs = require('fs'); const html = fs.readFileSync('./template.html', 'utf8'); pdf.create(html).toFile('./output.pdf', (err, res) => { if (err) return console.log(err); console.log(res); });
在上面的示例中,我們首先將HTML模板讀入到內存中,然後將其作為參數傳遞給html-pdf庫的create()方法。最後,我們將PDF文件保存在硬盤上。
五、前端生成PDF方案
生成PDF的方案取決於要求。有些要求是非常簡單的,只需要在瀏覽器中生成一個PDF文件就可以了,而有些方案可能需要在複雜的應用程序中生成PDF文件。下面是一些客戶端和服務端生成PDF的適用場景:
- 對於簡單的網站頁面,可以使用PDFKit或jsPDF。
- 對於複製和粘貼功能,可以使用Puppeteer或wkhtmltopdf。
- 當需要在後台自動化PDF生成過程時,可以使用html-pdf。
- 對於更大規模的應用程序,可以使用pdfmake。
六、前端生成PDF文件瀏覽
有時候,我們不想下載PDF文件,而是想在瀏覽器中直接查看。可以使用PDF.js庫,它是一個基於HTML5技術的PDF查看器。
const pdfUrl = 'example.pdf'; const pdfDoc = null; PDFJS.getDocument(pdfUrl) .then(doc => { pdfDoc = doc; const numPages = doc.numPages; console.log(numPages); });
PDF.js通過HTTP請求獲取PDF文件,並將其作為多頁PDF文檔進行解析。一旦文檔被解析,查看器就可以在HTML5 canvas元素上呈現每一頁。
七、前端生成PDF並下載
Pdfgenerator是一個非常靈活的庫,可以在Node.js中或者瀏覽器中使用。該庫支持多種格式和格式化選項,支持複雜文檔創建和樣式設置。以下是一個在瀏覽器中使用Pdfgenerator生成PDF文件並下載的示例代碼:
const pdfgen = require('pdfgenerator'); const html = 'Hello World
'; pdfgen(html, {}, (err, result) => { if (err) return console.log(err); const a = document.createElement('a'); a.download = "example.pdf"; a.href = 'data:application/pdf;base64,' + result.toString('base64'); document.body.appendChild(a); a.click(); });
在上面的示例中,我們創建了一個HTML模板字符串,並將其傳遞給pdfgenerator庫來從瀏覽器中生成PDF文件。最後,我們將PDF文件轉換為base64 URL,並通過模擬點擊來下載文件到客戶端。
八、前端生成PDF模版
對於使用相同格式輸出的網頁,我們通常需要模板化輸出。如果我們使用的是json文件,可以使用pdfmake。
import pdfMake from "pdfmake/build/pdfmake"; import pdfFonts from "pdfmake/build/vfs_fonts"; pdfMake.vfs = pdfFonts.pdfMake.vfs; const docDefinition = { content: [ { text: 'Example Text', style: 'header' }, { text: 'Another Example', style: 'subheader' } ], styles: { header: { fontSize: 22 }, subheader: { fontSize: 16 } } }; pdfMake.createPdf(docDefinition).download('example.pdf');
在上面的示例中,我們定義了一個docDefinition,它包含了兩個段落及其樣式。使用pdfMake,我們可以將docDefinition轉換為PDF文件,使用download()方法將其下載到客戶端。
九、前端頁面生成PDF
對於大型應用程序,可能需要在前端內部管理PDF生成過程。對於這種情況,可以使用pdfmake庫來實現前端內部多頁PDF的呈現和生成。例如,在一個Vue.js應用程序中,可以使用pdfmake來生成PDF文件:
import pdfMake from 'pdfmake/build/pdfmake'; import pdfFonts from 'pdfmake/build/vfs_fonts'; pdfMake.vfs = pdfFonts.pdfMake.vfs; export default { methods: { downloadPdf() { const docDefinition = { content: [ { text: 'Example Text', style: 'header' }, { text: 'Another Example Text' } ], styles: { header: { fontSize: 22 } } }; pdfMake.createPdf(docDefinition).download('example-pdf.pdf'); } } };
在上面的代碼中,我們首先引入pdfmake庫,然後定義docDefinition,之後我們在downloadPdf()方法中將其轉換為PDF文件,並通過download()方法將其下載到客戶端。
總結
前端生成PDF是一種廣泛使用的技術,可以將網頁內容轉換為PDF格式並下載或在瀏覽器中直接查看。雖然生成PDF的過程看似簡單,但它實際上需要聯繫多種技術,例如HTML、CSS、JavaScript、TypeScript、Puppeteer、html-pdf、pdfmake、PDFKit、wkhtmltopdf等等。通過對這些技術的深入學習,我們可以選擇最適合自己的方案和庫,從而生成最優秀的PDF文件。
原創文章,作者:ZDBMJ,如若轉載,請註明出處:https://www.506064.com/zh-hk/n/331336.html