107

IDが「コンテンツ」のコンテンツdivがあります。コンテンツ div には、グラフとテーブルがいくつかあります。ユーザーがダウンロードボタンをクリックしたときに、そのdivをpdfとしてダウンロードしたい。javascriptまたはjQueryを使用してそれを行う方法はありますか?

4

5 に答える 5

124

jsPDFを使用してそれを行うことができます

HTML:

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

    <p>A paragraph</p>
</div>
<div id="editor"></div>
<button id="cmd">generate PDF</button>

JavaScript:

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');
});
于 2013-06-25T09:56:44.497 に答える
40

内のコンテンツは、jspdfとhtml2canvas<div class='html-content'>....</div>を使用してスタイル付きの pdf としてダウンロードできます。

両方の js ライブラリを参照する必要があります。

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>

次に、以下の関数を呼び出し、

//Create PDf from HTML...
function CreatePDFfromHTML() {
    var HTML_Width = $(".html-content").width();
    var HTML_Height = $(".html-content").height();
    var top_left_margin = 15;
    var PDF_Width = HTML_Width + (top_left_margin * 2);
    var PDF_Height = (PDF_Width * 1.5) + (top_left_margin * 2);
    var canvas_image_width = HTML_Width;
    var canvas_image_height = HTML_Height;

    var totalPDFPages = Math.ceil(HTML_Height / PDF_Height) - 1;

    html2canvas($(".html-content")[0]).then(function (canvas) {
        var imgData = canvas.toDataURL("image/jpeg", 1.0);
        var pdf = new jsPDF('p', 'pt', [PDF_Width, PDF_Height]);
        pdf.addImage(imgData, 'JPG', top_left_margin, top_left_margin, canvas_image_width, canvas_image_height);
        for (var i = 1; i <= totalPDFPages; i++) { 
            pdf.addPage(PDF_Width, PDF_Height);
            pdf.addImage(imgData, 'JPG', top_left_margin, -(PDF_Height*i)+(top_left_margin*4),canvas_image_width,canvas_image_height);
        }
        pdf.save("Your_PDF_Name.pdf");
        $(".html-content").hide();
    });
}

参照: html canvas および jspdf からの pdf 生成。

これは誰かを助けるかもしれません。

于 2019-09-26T10:33:53.807 に答える
4

あなたのソリューションでは、htmlからpdfへの機能を持つバックエンドサーバーにhtmlを渡し、生成されたpdf出力をブラウザに返すために、いくつかのajaxメソッドが必要です。

最初にクライアント側のコードを設定します。jquery コードを次のように設定します。

   var options = {
            "url": "/pdf/generate/convert_to_pdf.php",
            "data": "data=" + $("#content").html(),
            "type": "post",
        }
   $.ajax(options)

次に、html2pdf 生成スクリプト (インターネットのどこか) からのデータを傍受します。
convert_to_pdf.php(JQUERY コードで URL として指定) は次のようになります -

<?php
    $html = $_POST['data'];
    $pdf = html2pdf($html);
    
    header("Content-Type: application/pdf"); //check this is the proper header for pdf
    header("Content-Disposition: attachment; filename='some.pdf';");
    echo $pdf;
?>
于 2013-06-25T09:07:08.013 に答える
2

私の知る限り、これを行うネイティブのjquery関数はありません。最適なオプションは、サーバーで変換を処理することです。これを行う方法は、使用している言語 (.net、php など) によって異なります。div のコンテンツを、変換を処理する関数に渡すことができます。これにより、pdf がユーザーに返されます。

于 2013-06-25T09:20:29.867 に答える