「hidden div」要素をUIとして表示せずにPDFとしてエクスポートする方法

Question

hidden div要素を考慮してください。私はそれをPDFコンテンツを構築し、PDFとしてダウンロードしようとする隠れ要素として使用しています。

HTML要素は次のように宣言されています。

<div id="griddata" style="display:none;"> 
<div id="reportHeader" style="display:none;"> 
    Consider other elements that I want to show in the PDf here 
</div> 
</div> 

以下、私はLoadPDF機能を通じて呼び出すPDFコードとして剣道輸出チャートです。

function LoadPDF() { 
      try {      
       $("#griddata").show();       
       $("#reportHeader").show(); 

       if ($("#chartDiv").html() != null && $("#griddata").html() != '') { 
        setTimeout(function() { 
        kendo.drawing.drawDOM($("#griddata")) 
        .then(function (group) { 
         // Render the result as a PDF file 
         return kendo.drawing.exportPDF(group, { 
          paperSize: "auto", 
          margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" } 
         }); 
        }) 
        .done(function (data) { 
         // Save the PDF file 
         kendo.saveAs({ 
          dataURI: data, 
          fileName: window.sessionStorage.getItem('XXXName') + ".pdf", 
          proxyURL: "/Account/Export" 
         }); 

         $("#reportHeader").hide();         
         $("#griddata").hide(); 


        }); 
        }, 2000); 
        } 
      } 
      catch (e) { 
       $("#reportHeader").hide();      
       $("#griddata").hide();  
       UMGenerateAlert('Error while exporting data'); 
      } 
      finally { 
      } 
     } 

上記の方法ではうまく動作しますが、問題は、PDFとして「griddata」div要素をエクスポートする前に、私はdiv要素を有効にするために強制しています、です。そうしないと、エクスポートされたPDFはデータを返しません。これにより、PDFが書き出されるまで "griddata" divが画面に表示され、ドキュメントがダウンロードされると非表示になります。

私はこれをUIで表示せずにどのように処理できるか教えてください。

Answer 1

は試してみてくださいCSSを印刷メディアクエリ：

@media print { 
/* All your print styles go here */ 
    #header, #footer, #nav { display: none !important; } 
    #griddata, #reportHeader { display: block !important; } 
} 

または古い方法：

<link href="/print.css" rel="stylesheet" media="print" type="text/css" /> 

グリッド部分については、すでにvisibility: hidden;を使用してみましたが？素子の空間および寸法が保存されるためである。

私があなただったら、グリッド領域をカバーするローディングプログレスバーを表示し、グリッドを隠した後に非表示にするだけです。

とにかく、display: noneはまだDOMの一部ですが、回避策がある場合は、私の回答を更新します。

Answer 2

私はちょうどカップル日前に同様の質問に出くわしました。それはthis答えに基づいて動作しています。これはあなたのpdf divを別のdivにオーバーレイすることです。ここでrender-pdfはあなたの剣道pdfがロードされるdivです。

<div id="pdf-with-overlay" style="position: relative; width: 100%;"> 
    <div id="render-pdf"></div> 
    <div id="pdf-overlay" style="width:100%;height:100%;position: absolute;top:0;left:0;z-index:10;"></div> 
</div> 

PS。シナリオでは、私は隠すのではなくオーバーレイを行うことを言及している。あなたがpdfをキャンバスに描画したい場合、隠されたものは内容を表示しません。