ブログの様々な首長を表示した後、我々は次のソリューションに来ます。
<！DOCTYPE HTML>
<HTML LANG = "EN">
<ヘッド>
<メタ文字セット= "UTF-8">
<メタ名=「ビューポート」コンテンツ=「幅=装置幅、初期の規模= 1.0」>
<タイトル>ドキュメント</ TITLE>
<スクリプトSRC = "https://cdn.bootcss.com/jquery/3.4.1/jquery.js"> </ SCRIPT>
ます。<script type = "text / javascriptの" SRC = "../ html2Canvas /レンダリングHTMLからPDFへのマスタ/ドキュメント/ JS / html2canvas.js"> </ SCRIPT>
ます。<script type = "text / javascriptの" SRC = "../ html2Canvas /レンダリングHTMLからPDFへのマスタ/ドキュメント/ JS / jsPdf.debug.js"> </ SCRIPT>
</ head>の
<身体>
<スタイル>
.export_content {
幅：600PX。
高さ：100pxに。
オーバーフロー：自動;
}
＃コンテンツ{
幅：600PX。
高さ：自動;
パディング：30px;
位置：絶対;
Zインデックス：0。
}
</スタイル>
<ボタンのid = "exportToPdf"> PDFにエクスポート</ボタン>
<のdivクラス= "export_content">
<div>
私は何かをエクスポートします
</ div>
</ div>
ます。<script type = "text / javascriptの">
VAR downPdf =のdocument.getElementById（ "exportToPdf"）;
downPdf.onclick =関数（）{
VAR targetDom = $（ "export_content。"）;
。VAR copyDom = targetDom.clone（）ATTR（ 'ID'、 'コンテンツ'）。
copyDom.width（targetDom.width（）+ "PX"）;
$（ '体'）APPEND（copyDom）。
html2canvas（
copyDom、
{
解像度：172、//輸出PDFの透明度
onrendered：機能（キャンバス）{
VAR contentWidth = canvas.width。
VAR contentHeight = canvas.height。
//は、PDF、HTMLページ生成されたキャンバスの高さを表示します。
* 841.89 VARのpageHeight = contentWidth / 592.28;
//ません生成されたPDF HTMLページの高さ
VAR leftHeight = contentHeight;
// PDFページオフセット
各位置= 0。
// HTMLページキャンバスは、PDFファイルの画像の幅と高さ（A4用紙サイズ[595.28,841.89]）で生成され
imgWidth = 595.28でした。
VAR imgHeight = 592.28 / contentWidth * contentHeight。
VAR InboundのPageDate = canvas.toDataURL（ '画像/ JPEG'、1.0）。
PDF =新しいjsPDF（ ''、 'PT'、 'A4'）でした。
、2つの高度、高度に実用的なHTMLページの間のページの高さを区別し、PDF（841.89）を生成する//必要
//表示範囲の内容は、改ページせずにPDFを超えていない場合には
IF（leftHeight <のpageHeight）{
pdf.addImage（InboundのPageDate、 'JPEG'、0、0、imgWidth、imgHeight）。
} そうしないと {
一方、（leftHeight> 0）{
pdf.addImage（InboundのPageDate、 'JPEG'、0、位置、imgWidth、imgHeight）
leftHeight - =のpageHeight。
位置 - = 841.89。
//空白のページを追加することは避けてください
IF（leftHeight> 0）{
pdf.addPage（）;
}
}
}
pdf.save（ 'content.pdf'）;
copyDom.remove（）
}、
}）
}
</ SCRIPT>
</ BODY>
</ HTML>
さて問題は、コンテンツが長すぎるスプラッシュ画面になるときに撮影した場合、そこにあります。
しかし、解決策を考えます。プロジェクトはVUEを使用しているため、生成されたキーをバインドすることができ、この問題を解決することができ一見。遅すぎるので。我々はテストを行いませんので。このブログはhttps://www.cnblogs.com/77yf/p/12452379.htmlキーを使用することですがある（ただアイデアを。練習しませんでした）