私はhtml2pdfを使ってpdfを生成していますが、htmlを隠すことができますか？

Question

html2pdfライブラリを使用してバウチャーを生成しています。

これは、ページにHTMLとして表示されているバウチャーでうまくいきます。

私はクリック時にhtml2pdf()機能をトリガーするボタンを持っており、ユーザーにPDFダウンロードの受け入れを促します。

HTMLがページに表示されないようにします。私はposition: absolute;を適用してHTMLをユーザーの視界から離して配置しようとしました。残念ながら、PDFは空白としてレンダリングされます。

これを達成する方法はありますか？

Answer 1

html2pdf呼び出しの前後で 'element-to-print'の表示プロパティを切り替えるだけです。

https://jsfiddle.net/bambang3128/u6o6ne41/10/

function toggleDisplay() { 
 
    var element = document.getElementById('element-to-print'); 
 
    if (element.style.display == 'block') { 
 
    element.style.display = 'none' 
 
    } else { 
 
    element.style.display = 'block' 
 
    } 
 

 
    console.log('toggleDisplay()'); 
 
} 
 

 
function printPDF() { 
 
    var element = document.getElementById('element-to-print'); 
 
    element.style.display = 'block' 
 
    html2pdf(element); 
 
    element.style.display = 'none' 
 
    console.log('printPDF()'); 
 
}

<script src="https://rawgit.com/eKoopmans/html2pdf/master/dist/html2pdf.bundle.min.js"></script> 
 
<div id="element-to-print" hidden> 
 
    <h1>This is a hidden div</h1> 
 
    This one is hidden div contents. 
 
</div> 
 
<p> 
 
    Save the hidden element as PDF. 
 
</p> 
 
<button type="button" onclick="toggleDisplay();">Toggle Display!</button> 
 
<button type="button" onclick="printPDF();">Click Me!</button>

Answer 2

あなたは絶対位置を使用し、トップのような画面のうち、あなたのdiv wayyyyyyを配置することができます：あなたがいるとき10000000000.

はその後のdivを奪いますimage/pdfで完了！

Answer 3

必要なのは、以下に示すように、あなたの要素にdisplay:none;を割り当てることです：

<div id="element-to-print" style="display:none"> 
 

 
</div> 
 

 

 
<button type="button" (click)="html2pdf()">Download as PDF</button>