是否可以使用 JavaScript 或 jquery 將 HTML 頁面保存為 PDF？

Question

是否可以使用 JavaScript 或 jquery 將 HTML 頁面保存為 PDF？

詳細地：

我生成了一個包含表格的 HTML 頁面。 它有一個按鈕“另存為 PDF”。 如果用戶單擊該按鈕，則該 HTML 頁面必須轉換為 PDF 文件。

是否可以使用 JavaScript 或 jquery？

Answer 1

這可能是一個遲到的答案，但這是最好的： https ://github.com/eKoopmans/html2pdf

純javascript實現。 允許您通過 ID 僅指定單個元素並對其進行轉換。

Answer 2

是的，使用jspdf來創建一個 pdf 文件。

然后，您可以將其轉換為數據 URI 並將下載鏈接注入 DOM

但是，您需要自己編寫 HTML 到 pdf 的轉換。

只需使用頁面的打印機友好版本，讓用戶選擇他想要打印頁面的方式。

編輯：顯然它的支持很少

所以答案是編寫您自己的 PDF 編寫器或讓現有的 PDF 編寫器為您完成（在服務器上）。

Answer 3

是的，用 javascript 很容易做到。 希望這段代碼對你有用。

您將需要JSpdf 庫。

<div id="content">
     <h3>Hello, this is a H3 tag</h3>

    <p>a pararaph</p>
</div>
<div id="editor"></div>
<button id="cmd">Generate PDF</button>

<script>
    var doc = new jsPDF();
    var specialElementHandlers = {
        '#editor': function (element, renderer) {
            return true;
        }
    };

    $('#cmd').click(function () {
        doc.fromHTML($('#content').html(), 15, 15, {
            'width': 170,
                'elementHandlers': specialElementHandlers
        });
        doc.save('sample-file.pdf');
    });

    // This code is collected but useful, click below to jsfiddle link.
</script>

jsfiddle鏈接在這里

Answer 4

您可以使用 Phantomjs。 在此處下載並使用以下示例測試 html->pdf 轉換功能https://github.com/ariya/phantomjs/blob/master/examples/rasterize.js

示例代碼：

phantomjs.exe examples/rasterize.js http://www.w3.org/Style/CSS/Test/CSS3/Selectors/current/xhtml/index.html sample.pdf

Answer 5

我使用jsPDF和dom-to-image庫將 HTML 導出為 PDF。

我在這里發帖作為參考誰關注。

$('#downloadPDF').click(function () {
    domtoimage.toPng(document.getElementById('content2'))
      .then(function (blob) {
          var pdf = new jsPDF('l', 'pt', [$('#content2').width(), $('#content2').height()]);
          pdf.addImage(blob, 'PNG', 0, 0, $('#content2').width(), $('#content2').height());
          pdf.save("test.pdf");
      });
});

演示： https ://jsfiddle.net/viethien/md03wb21/27/

Answer 6

這是我的做法，它的想法不是防彈設計，你需要修改它

用戶單擊另存為 PDF 按鈕
使用 ajax 向服務器發送調用
服務器響應使用 HTML 生成的 PDF 的 URL，我非常成功地使用了 Apache FOP
處理 ajax 響應的 js 執行 location.href 以指向 JS 發送的 URL，並且一旦該 URL 加載，它使用內容處置標頭作為附件發送文件，強制用戶下載文件。

Answer 7

將 html 轉換為 pdf 服務器端更加容易和可靠。 我們正在使用 Google Puppeteer。 它使用您選擇的任何服務器端語言的包裝器得到很好的維護。 Puppeteer 使用無頭 Chrome 生成屏幕截圖和/或 PDF 文件。 它將為您省去很多麻煩，尤其是當您需要生成包含表格、圖像、圖形、多頁等的復雜 PDF 文件時

https://developers.google.com/web/tools/puppeteer/

Answer 8

還有另一種使用 JavaScript 將 HTML 轉換為 PDf 的非常明顯的方法：為此使用在線 API。 如果您在用戶離線時不需要進行轉換，這將正常工作。

PdfMage是一種具有良好 API 並提供免費帳戶的選項。 我相信您可以找到許多替代方案（例如， here ）

對於 PdfMage API，你會有這樣的東西：

 $.ajax({
    url: "https://pdfmage.org/pdf-api/v1/process",
    type: "POST",
    crossDomain: true,
    data: { Html:"<html><body>Hi there!</body></html>" },
    dataType: "json",
    headers: {
        "X-Api-Key": "your-key-here" // not very secure, but a valid option for non-public domains/intranet
    },
    success: function (response) {
        window.location = response.Data.DownloadUrl;
    },
    error: function (xhr, status) {
        alert("error");
    }
});

Answer 9

有類似的問題，無法使用 jspdf，因為我的舊代碼包含多個表，其中包含多個 colspan。 在 Jspdf 中，thead > th 必須匹配 tbody > tr > td

我最終使用了對我有用的 html2pdf 包

在您的文件上添加庫

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.8.1/html2pdf.bundle.min.js" integrity="sha512-vDKWohFHe2vkVWXHp3tKvIxxXg0pJxeid5eo+UjdjME3DBFBn2F8yWOE0XmiFcFbXxrEOR1JriWEno5Ckpn15A==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

獲取要保存為pdf的內容

var pdf_content = document.getElementById("pdf_body");

將選項或配置添加到您的文件

var options = {
      margin:       1,
      filename:     'isolates.pdf',
      image:        { type: 'jpeg', quality: 0.98 },
      html2canvas:  { scale: 2 },
      jsPDF:        { unit: 'in', format: 'letter', orientation: 'portrait' }
    };

保存文件

html2pdf(pdf_content, options);

Answer 10

我知道這是一個老問題，但根據讀者用例，一種簡單的方法是調用window.print()並告訴用戶選擇save as PDF選項。 在 CSS 中，您可以使用媒體查詢來隱藏或顯示專門用於打印的內容，這樣您就可以控制 PDF 上顯示的內容。 例如，我為此目的使用這些.no-print和.only-print 。

.only-print {
   display: none
}
@media print {
  .no-print {
    display: none
  }
  .only-print {
    display: block
  }
}

在我的用例中，我隱藏了所有導航和按鈕的東西，我還隱藏了一些折疊的塊，而是顯示所有未折疊的塊。

Answer 11

是的。 例如，您可以使用https://grabz.it的解決方案。

它有一個 Javascript API，可以用不同的方式來抓取和操作屏幕截圖。 為了在您的應用程序中使用它，您需要首先獲取應用程序密鑰和秘密並下載免費的 Javascript SDK。

因此，讓我們看一個使用它的簡單示例：

//first include the grabzit.min.js library in the web page
<script src="grabzit.min.js"></script>
//include the code below to add the screenshot to the body tag    
<script>
//use secret key to sign in. replace the url.
GrabzIt("Sign in to view your Application Key").ConvertURL("http://www.google.com").Create();
</script>

然后只需稍等片刻，圖片就會自動出現在頁面底部，無需重新加載頁面。

這是最簡單的一種。 有關圖像處理、將屏幕截圖附加到元素等的更多示例，請查看文檔。

Answer 12

 $('#cmd2').click(function() { var options = { //'width': 800, }; var pdf = new jsPDF('p', 'pt', 'a4'); pdf.addHTML($("#content2"), -1, 220, options, function() { pdf.save('admit_card.pdf'); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script> <div id="content2" style="background: #fff;border-bottom: 1px solid #ffffff;"> <div class="tokenDet" style="padding: 15px;border: 1px solid #000;width: 80%;margin: 0 auto;position: relative;overflow: hidden;"> <div class="title" style="text-align: center;border-bottom: 1px solid #000;margin-bottom: 15px;"> <h2>Entrance Exam Hall Ticket</h2> </div> <div class="parentdiv" style="display: inline-block;width: 100%;position: relative;"> <div class="innerdiv" style="width: 80%;float: left;"> <div class="restDet"> <div class="div"> <div class="label" style="width: 30%;float: left;"> <strong>Name</strong> </div> <div class="data" style="width: 70%;display: inline-block;"> <span>Santanu Patra</span> </div> <div class="label" style="width: 30%;float: left;"> <strong>DOB</strong> </div> <div class="data" style="width: 70%;display: inline-block;"> <span>17th April, 1995</span> </div> <div class="label" style="width: 30%;float: left;"> <strong>Address</strong> </div> <div class="data" style="width: 70%;display: inline-block;"> <span>PS Srijan Corporate Park, Saltlake, Sector 5, Kolkata-91</span> </div> <div class="label" style="width: 30%;float: left;"> <strong>Contact Number</strong> </div> <div class="data" style="width: 70%;display: inline-block;"> <span>9874563210</span> </div> <div class="label" style="width: 30%;float: left;"> <strong>Email Id</strong> </div> <div class="data" style="width: 70%;display: inline-block;"> <span>santanu@macallied.com</span> </div> <div class="label" style="width: 30%;float: left;"> <strong>Parent(s) Name</strong> </div> <div class="data" style="width: 70%;display: inline-block;"> <span>S. Patra</span><br /><span>7896541230</span> </div> <div class="label" style="width: 30%;float: left;"> <strong>Exam Center</strong> </div> <div class="data" style="width: 70%;display: inline-block;"> <span>Institute of Engineering & Management</span> </div> <div class="label" style="width: 30%;float: left;"> <strong>Hall Number</strong> </div> <div class="data" style="width: 70%;display: inline-block;"> <span>COM-32</span> </div> </div> </div> </div> <div class="sideDiv" style="width: 20%;float: left;"> <div class="atts" style="float: left;width: 100%;"> <div class="photo" style="width: 115px;height: 150px;float: right;"> <img src="images/candidateImg.gif" style="width: 100%;"/> </div> <div class="sign" style="position: absolute;bottom: 0;right: 0;border-top: 1px dashed #000;left: 80%;text-align: right;"> <small>Self Attested</small> </div> </div> </div> </div> </div> </div> <button class="btn btn-info" id="cmd2">Download Token</button>

Answer 13

簡而言之：沒有。 第一個問題是對文件系統的訪問，由於安全原因，在大多數瀏覽器中默認設置為 no。 現代瀏覽器有時支持數據庫形式的簡約存儲，或者您可以要求用戶啟用文件訪問。

如果您可以訪問文件系統，那么保存為 HTML 並不難（請參閱 JS 文檔中的文件對象） - 但 PDF 並不那么容易。 PDF 是一種非常高級的文件格式，確實不適合 Javascript。 它要求您以 Javascript 不直接支持的數據類型編寫信息，例如單詞和四邊形。 您還需要預定義必須保存到文件中的字典查找系統。 我相信有人可以讓它工作，但是所涉及的精力和時間最好花在學習 C++ 或 Delphi 上。

但是，如果用戶為您提供不受限制的訪問權限，則 HTML 導出應該是可能的

Answer 14

我想不是因為JavaScript無法寫入磁盤你應該將頁面發送到服務器並生成pdf文件然后客戶端將下載它

是否可以使用 JavaScript 或 jquery 將 HTML 頁面保存為 PDF？

問題描述

13 個解決方案

解決方案1
31 2017-05-27 19:30:12

解決方案2
30 2011-08-01 09:49:28

解決方案3
19 2015-09-17 08:17:05

解決方案4
7 2013-10-10 08:55:30

解決方案5
7 2019-07-02 04:57:22

解決方案6
6 2011-08-01 09:49:03

解決方案7
3 2019-06-20 00:25:45

解決方案8
1 2016-03-28 11:28:19

解決方案9
1 2021-08-11 12:01:34

解決方案10
1 2021-10-07 12:30:57

解決方案11
0 2017-06-15 11:10:29

解決方案12
0 2017-12-07 08:46:09

解決方案13
0 2011-08-01 09:48:19

解決方案14
-6 2011-08-01 09:45:50

是否可以使用 JavaScript 或 jquery 將 HTML 頁面保存為 PDF？

問題描述

13 個解決方案

解決方案1 31 2017-05-27 19:30:12

解決方案2 30 2011-08-01 09:49:28

解決方案3 19 2015-09-17 08:17:05

解決方案4 7 2013-10-10 08:55:30

解決方案5 7 2019-07-02 04:57:22

解決方案6 6 2011-08-01 09:49:03

解決方案7 3 2019-06-20 00:25:45

解決方案8 1 2016-03-28 11:28:19

解決方案9 1 2021-08-11 12:01:34

解決方案10 1 2021-10-07 12:30:57

解決方案11 0 2017-06-15 11:10:29

解決方案12 0 2017-12-07 08:46:09

解決方案13 0 2011-08-01 09:48:19

解決方案14 -6 2011-08-01 09:45:50

解決方案1
31 2017-05-27 19:30:12

解決方案2
30 2011-08-01 09:49:28

解決方案3
19 2015-09-17 08:17:05

解決方案4
7 2013-10-10 08:55:30

解決方案5
7 2019-07-02 04:57:22

解決方案6
6 2011-08-01 09:49:03

解決方案7
3 2019-06-20 00:25:45

解決方案8
1 2016-03-28 11:28:19

解決方案9
1 2021-08-11 12:01:34

解決方案10
1 2021-10-07 12:30:57

解決方案11
0 2017-06-15 11:10:29

解決方案12
0 2017-12-07 08:46:09

解決方案13
0 2011-08-01 09:48:19

解決方案14
-6 2011-08-01 09:45:50