快捷導(dǎo)航

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

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

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

一、實現(xiàn)效果

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

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

導(dǎo)出的文件：

二、實現(xiàn)思路

為了簡單起見，使用html來簡單展示效果

首先需要下載的依賴：

html2canvas：

jsPDF：

1. 獲取元素

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

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

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

3. 使用 html2canvas 生成 canvas

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

4. 處理生成的 canvas

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

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

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