：この記事はで再現された猿2048ウェブサイト]➤[ https://www.mk2048.com/blog/blog.php?id=k0ich02jb
背景
老人ホーム情報システムプロジェクト管理、所有者が簡単に印刷用PDF文書としてエクスポート金融モジュールのさまざまなレポートを要求しました。
解決策は、HTMLページを印刷する専門的なレポートを生成することである前に、押しCtrlキー+ Pは、印刷するには、ブラウザの印刷機能自体を呼び出します。この質問に問題が方法です異なる解像度の表示、ページが混在結果を持っていた、特殊な印刷サイズを設定する必要があり、使用するのは簡単、機能へのライン上に、それはTucao党されています...
ホイールツール選択
目標は、PDFにエクスポートHTMLコンテンツをクリアをクリアです。時間は最初のホイールを見つけ、フロントエンドツールが歌の後に谷jspdfによって選択され、制限されています。具体的な使用が比較的簡単で、以下の二つのリンクを参照してください。
https://github.com/linwalker/render-html-to-pdf
https://github.com/MrRio/jsPDF
解決方法解決方法
コードの最初に：
html2canvas(document.body, {
onrendered:function(canvas) {
// 要输出的 PDF 每页的宽高尺寸，单位是 pt
let pageWidth = 841.89
let pageHeight = 592.28
// 要打印内容，转换成 canvas 图片后的宽高尺寸
let contentWidth = canvas.width*3/4
let contentHeight = canvas.height*3/4
// 将要打印内容的图片，等比例缩放至宽度等于输出时 PDF 每页的宽度，此时的图片宽
let imgWidth = pageWidth
// 将要打印内容的图片，等比例缩放至宽度等于输出时 PDF 每页的宽度，此时的图片高
let imgHeight = pageWidth / contentWidth * contentHeight
// 起始内容截取位置
let position = 0
// 剩余未打印内容的高度
let leftHeight = imgHeight
// 获取打印内容 canvas 图片元素
let pageData = canvas.toDataURL('image/jpeg', 1.0)
// 初始化 pdf 容器，三个参数分别是：纸张方向(填'',则是横向)、打印单位、纸张尺寸
let PDF = new JsPDF('landscape', 'pt', 'a4')
// 循环截取打印内容并添加进容器
if (leftHeight < pageHeight) {
PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
} else {
while (leftHeight > 0) {
PDF.addImage(pageData, 'JPEG', 0, position, imgWidth, imgHeight)
leftHeight -= pageHeight
position -= pageHeight
if (leftHeight > 0) {
PDF.addPage()
}
}
}
// 将容器中的内容输出为 PDF 文档
pdf.save('content.pdf');
}
})
PDFエクスポート機能、私は参照作られたこのgithubのリンクを、いくつかの変更を行いました。関数のロジックは比較的簡単ですが、あまりにも多くの説明をしません。メイン言及二つのこと：
- 本来の機能単位変換の問題（PTをオンにするPX）を無視して、小さなバグを修正し、エクスポートされたPDFの存在は、空白のページが続きます。
- あなたがスケーリングされていない変換したいの高いキャンバス絵でcontentHeightを使用して、元の関数をLeftHeight。これは、のpageHeightにつながる論理関数の複雑さを増す再変換し、取得する必要があります。実際にleftHeight、すなわち、変換後の高いスケーリング、imgHeightを設定することができ、かつコードロジックが明確になるようにのpageHeightは、単一ページのPDFに高く設定してください。
この三つのステップ上のコアロジック機能：
- スケーリングされた印刷画像の幅と高さ（imgWidth、imageHeight）を得るために、PDF出力のページの幅と同じ幅に印刷幅とコンテンツ領域の高さ、および幾何学的スケーリングを得るために
- 幅と高さによって、単一ページのPDF（ページ幅、のpageHeight）、サイクリング傍受がスケーリング画像を印刷し、PDFオブジェクトコンテナへのコンテンツの各傍受を追加します。（一度、すべての傍受はPDFファイルです）
- PDFオブジェクトコンテナ、PDF文書への出力の内容。
問題と対処方法のアイデア
示されているような問題は、ランダムに画像を切り捨てられ、垂直方向に実際に遭遇します。
このプロジェクトのビジネスシーンのために、私は救済策がすることです取る「印刷コンテンツの高さを設定します。」次のように具体的なアイデアがあります：
- 比例した出力サイズの単一シート
の例：A4用紙の縦横比= 841.89 / 592.28（横）。- 比は、一定のままで簡単な変換により、単一の印刷のページの幅と高さを決定する
例：ページ幅1920px、高1360px。- CSSにより、印刷ページの各要素の高精度な制御がそう単一ページ、合理的過剰のコンテンツの高さを超えています。
例えば：私はせいぜい34行、単一行の高さは1360から1334 = 40ピクセルに設定する必要があり、各ページテーブルを印刷する;
最初のためこれだけ30行、タイトル、ヘッダの全体の高さを再生するタイトルページ、テーブルトップ要素の160ピクセル（この実際の要件に応じて、単にタイトル、ヘッダの高さが高い整数倍に一方向であることを保証するため）であります
不規則な縦切り捨て問題の最終的な成功解像度。
概要
優れた三点の操作を行います。
- ホイール、思考が正しいすばやく見つけます
- 深い思考の態度がソリューションを最適化することが可能で、原則の実現を促進するための理由を知っているので、より良い品質の最終的な配送の結果
- 本当に考えることはできません...
2つの未満のポイント：
- 完成されたタスク全体では効率が低すぎる、営業日を過ごしました。プロジェクトのリンクではローカル展開は多くの時間を無駄に（プロジェクト選択の技術スタック自体が良くないので、主に、該当する展開ドキュメントはありません）。また、冒頭で私は機能が多くの時間を無駄に、ブラインド変わり始めた理解していませんでした。
- 多くの時間を無駄に、すべてのページに手動で合理的なパッケージ、最終コピーペースト機能しません。
さらなる研究と反射：
- 研究jspdfのソースコードは、エクスポートPDFの原則の理解を達成するために
- 研究ユニバーサルページを印刷するプログラム、あなたがコンポーネントVUE（ファーストプリントの目次など）としてパッケージ化されたPDF文書の機能をエクスポートすることができるかどうかを確認
より専門的なフロントエンドの知識、作る [2048] APE www.mk2048.comを