javascriptを使用してHTMLページのdivをpdfとしてダウンロードします

Question 1

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

Question 2

あなたは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');
});

Question 3

内のコンテンツは、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キャンバスおよびjspdfからのpdf生成。

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

Question 4

ソリューションでは、html to pdf機能を備えたバックエンドサーバーにhtmlを渡し、生成されたpdf出力をブラウザーに返すためのajaxメソッドが必要です。

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

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

次に、次のようにhtml2pdf生成スクリプトからのデータをインターセプトします。

   $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;

Question 5

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

Question 6

はい、JSでdivをPDFとしてキャプチャすることは可能です。https://grabz.itで提供されているソリューションを確認できます。それらは、divやspanなどの単一のHTML要素のコンテンツをキャプチャできるようにするすてきでクリーンなJavaScriptAPIを備えています。

だから、あなたが必要とするそれを使用し、app + keyと無料のSDKを使用します。使用法は次のとおりです。

HTMLがあるとしましょう：

<div id="features">
    <h4>Acme Camera</h4>
    <label>Price</label>$399<br />
    <label>Rating</label>4.5 out of 5
</div>
<p>Cras ut velit sed purus porttitor aliquam. Nulla tristique magna ac libero tempor, ac vestibulum felisvulput ate. Nam ut velit eget
risus porttitor tristique at ac diam. Sed nisi risus, rutrum a metus suscipit, euismod tristique nulla. Etiam venenatis rutrum risus at
blandit. In hac habitasse platea dictumst. Suspendisse potenti. Phasellus eget vehicula felis.</p>

機能IDの下にあるものをキャプチャするには、次のことを行う必要があります。

//add the sdk
<script type="text/javascript" src="grabzit.min.js"></script>
<script type="text/javascript">
//login with your key and secret. 
GrabzIt("KEY", "SECRET").ConvertURL("http://www.example.com/my-page.html",
{"target": "#features", "format": "pdf"}).Create();
</script>

をhttp://www.example.com/my-page.htmlターゲットURLに置き換え、#featureCSSセレクターごとに置き換える必要があります。

それで全部です。これで、ページが読み込まれると、scriptタグと同じ場所に画像のスクリーンショットが作成されます。このスクリーンショットには、featuresdivのすべてのコンテンツが含まれています。

div-screenshotメカニズムに対して実行できるその他の構成とカスタマイズは、こちらで確認してください。