快捷導(dǎo)航

前端實(shí)現(xiàn)pdf導(dǎo)出功能的思路及完整代碼

更新時(shí)間：2025年08月19日 10:07:11 作者：Laruae

在現(xiàn)代的Web應(yīng)用開發(fā)中,常常需要實(shí)現(xiàn)文檔導(dǎo)出功能,例如導(dǎo)出Word文檔或PDF文件,這篇文章主要介紹了前端實(shí)現(xiàn)pdf導(dǎo)出功能的思路及完整代碼,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、實(shí)現(xiàn)效果

能夠?qū)⒅付ǚ秶鷥?nèi)的內(nèi)容導(dǎo)出為pdf文件

點(diǎn)擊導(dǎo)出為pdf按鈕，即將頁面內(nèi)容導(dǎo)出為pdf

導(dǎo)出的文件：

二、實(shí)現(xiàn)思路

為了簡(jiǎn)單起見，使用html來簡(jiǎn)單展示效果

首先需要下載的依賴：

html2canvas：

jsPDF：

1. 獲取元素

使用document.getElementById分別獲取頁面上 ID 為exportButton的按鈕元素以及 ID 為content的目標(biāo)內(nèi)容元素。這兩個(gè)元素分別用于觸發(fā)導(dǎo)出操作和確定要導(dǎo)出的內(nèi)容范圍。

2. 添加點(diǎn)擊事件監(jiān)聽器

為exportButton按鈕添加click點(diǎn)擊事件監(jiān)聽器。當(dāng)按鈕被點(diǎn)擊時(shí)，會(huì)執(zhí)行傳入的回調(diào)函數(shù)。

3. 使用 html2canvas 生成 canvas

在點(diǎn)擊事件的回調(diào)函數(shù)中，調(diào)用html2canvas(content)方法。html2canvas庫能將指定的 DOM 元素（這里是content）渲染成一個(gè)canvas元素。該操作返回一個(gè) Promise，當(dāng)canvas生成成功時(shí)，會(huì)進(jìn)入then回調(diào)。

4. 處理生成的 canvas

在html2canvas的then回調(diào)中，首先通過canvas.toDataURL('image/png')將生成的canvas轉(zhuǎn)換為 PNG 格式的圖片數(shù)據(jù) URL。
接著創(chuàng)建一個(gè)新的jspdf.jsPDF實(shí)例pdf，用于生成 PDF 文件。
使用pdf.getImageProperties(imgData)獲取圖片數(shù)據(jù)的屬性，以便后續(xù)調(diào)整圖片在 PDF 中的尺寸。
計(jì)算 PDF 頁面的寬度pdfWidth，并根據(jù)圖片的寬高比以及 PDF 頁面寬度，計(jì)算出圖片在 PDF 中合適的高度pdfHeight。

5. 將圖片添加到 PDF 并保存

通過pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight)將轉(zhuǎn)換后的圖片數(shù)據(jù)添加到 PDF 中，指定圖片格式為 PNG，位置從 PDF 頁面的左上角（0, 0）開始，寬度和高度為前面計(jì)算好的值。
最后調(diào)用pdf.save('exported_content.pdf')將生成的 PDF 文件保存到本地，文件名為exported_content.pdf 。

三、最終代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Export HTML to PDF</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
</head>

<body>
    <div id="content">
        <h1>測(cè)試標(biāo)題</h1>
        <p>古人云：“學(xué)如逆水行舟，不進(jìn)則退?！?在漫漫人生征途上，學(xué)習(xí)恰似那前行的舟楫，唯有持續(xù)奮進(jìn)，方能抵達(dá)理想的彼岸。學(xué)習(xí)，是貫穿我們一生的課題，是個(gè)人成長(zhǎng)、社會(huì)進(jìn)步的動(dòng)力源泉。?
          學(xué)習(xí)，點(diǎn)亮個(gè)人成長(zhǎng)的燈塔。古往今來，無數(shù)仁人志士因?qū)W習(xí)而鑄就非凡人生?？锖庥讜r(shí)勤奮好學(xué)，卻因家貧無燭，他鑿穿墻壁借鄰舍燭光讀書，終成一代學(xué)問家。車胤囊螢夜讀，孫康映雪苦學(xué)，他們?cè)谄D苦環(huán)境中憑借對(duì)學(xué)習(xí)的執(zhí)著，為自己贏得了改變命運(yùn)的機(jī)會(huì)。在現(xiàn)代社會(huì)，學(xué)習(xí)同樣是實(shí)現(xiàn)個(gè)人價(jià)值的關(guān)鍵。屠呦呦幾十年如一日地鉆研中醫(yī)藥學(xué)，翻閱大量古籍，進(jìn)行無數(shù)次實(shí)驗(yàn)，最終發(fā)現(xiàn)青蒿素，拯救了無數(shù)生命，為人類健康事業(yè)作出巨大貢獻(xiàn)。她的成功，源于對(duì)知識(shí)的不懈追求與刻苦學(xué)習(xí)。通過學(xué)習(xí)，我們不斷豐富知識(shí)儲(chǔ)備，提升自身能力，拓展視野，從而更好地認(rèn)識(shí)自我、發(fā)掘潛力，塑造豐富多彩的人生。?
          學(xué)習(xí)，推動(dòng)社會(huì)發(fā)展的車輪。一個(gè)國家、一個(gè)民族的繁榮昌盛離不開全民學(xué)習(xí)的良好氛圍?；厥坠I(yè)革命時(shí)期，科技的飛速發(fā)展正是源于人們對(duì)科學(xué)知識(shí)的積極探索與學(xué)習(xí)。瓦特改良蒸汽機(jī)，開啟了蒸汽時(shí)代，極大地提高了生產(chǎn)力，推動(dòng)了工業(yè)文明的進(jìn)程。如今，在信息時(shí)代，互聯(lián)網(wǎng)、人工智能等新技術(shù)日新月異，這背后是無數(shù)科研人員持續(xù)學(xué)習(xí)、創(chuàng)新突破的成果。在社會(huì)的各個(gè)領(lǐng)域，從教育到醫(yī)療，從文化到經(jīng)濟(jì)，人們通過學(xué)習(xí)新知識(shí)、掌握新技能，為社會(huì)的發(fā)展注入源源不斷的活力。當(dāng)全民都投身于學(xué)習(xí)之中，整個(gè)社會(huì)便擁有了強(qiáng)大的發(fā)展動(dòng)力，不斷向著更高水平邁進(jìn)。</p>
    </div>
    <button id="exportButton">導(dǎo)出為 PDF</button>

    <script>
        const exportButton = document.getElementById('exportButton');
        const content = document.getElementById('content');

        exportButton.addEventListener('click', () => {
            html2canvas(content).then((canvas) => {
                const imgData = canvas.toDataURL('image/png');
                const pdf = new jspdf.jsPDF();
                const imgProps = pdf.getImageProperties(imgData);
                const pdfWidth = pdf.internal.pageSize.getWidth();
                const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

                pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
                pdf.save('exported_content.pdf');
            });
        });
    </script>
</body>

</html>