PDMLのPDFへの純粋なクライアントおよび純粋なサーバー実装ソリューション

ユーザーはフォームに記入してクリックして保存し、PDFドキュメントを直接ダウンロードできます。

アイデア

Google Chromeは2017年に独自のChromeヘッドレス機能を開発し、同時に操り人形師を発売しました。インターフェイスがないが、サーバーの機能機能を完了することができるブラウザとして理解できます。

そのため、サーバー上のPuppeteerブラウザを起動し、宛先URLを開き、Chromeブラウザが提供する変換機能を使用してHTMLをPDFに変換できます。

まず、Puppeteerをインストールする必要があります。 NPMインストールにエラーがある場合があります。 CNPM Taobao画像を使用してインストールするのが最善です。

cnpm i puppeteer -Sインストール依存関係を入力します。

JSファイルを作成するには、PuppeteerブラウザでURLを開き、PDFを保存するだけです。

 // html2pdf.jsconst puppeteer = require（ 'puppeteer'）;（async function（）{// service const browser = await pupteteer.launch（）; // tab const page = wait browser.newpage（）; page.goto（ 'https://koa.bootcss.com/#context'）;

次に、コンソールにnode html2pdf.jsを入力して、サービスを開始します。

もちろん、Module.Exportは、ビジネスロジックに従ってモジュールメソッドをエクスポートすることもできます。

欠点

フォームに動的なデータを保存できません

サーバーからのリクエストページであるため、ユーザー入力がリクエストアドレスに保存されていない場合、カットアウトPDFはページが記入されていない初期状態になります。

言い換えれば、ニーズには多くのユーザー入力があるため、静的ページのみを変換できます。

アイデア

• HTML2Canvasを使用して、変換する必要があるDOMノードを入力し、Canvas Canvasに変換して変換します
• Canvas CanvasをBase64画像に変換し、JSPDFを使用してPDFファイルを作成し、写真をPDFに挿入します。

欠点

ねじれ。

画面をページ上のPDFに挿入するのに似ているため、ページの解像度と構成が出力画像の品質に影響する可能性が高いことが明確にわかります。

同時に、スクリーンショットであるため、ページリンクやその他の機能が失われる可能性があります。

テキストカットオフ

Canvas CanvasがPDFの1ページサイズより大きい場合、出力はエラーが発生します。この時点で、キャンバスキャンバスがA4サイズを超えるかどうかを判断する必要があります。キャンバスを超える場合は、キャンバスをセグメント化して別のページに挿入します。

この時点で問題が発生します。写真を分割しているため、キャンバス内部アイテムの構造を分析できないため、画像またはテキストが半分から切り捨てられる可能性があります。

コアコード

私たちのニーズには写真やリンクがないので、歪みの問題は私たちにほとんど影響を与えません。同時に、私たちのフォームは複数の等しい長さのアイテムで構成されており、これらのアイテムは非常に短く、A4ペーパーの1つを超えません（これは厳密ではありませんが、必要に応じて、DOM要素の幅と高さを取得し、DOM要素の高さに応じて切断できます）。

そのため、アイテムに従ってキャンバスを直接分割し、各アイテムをA4ペーパーのページに保存する予定です。

開始する前に、いくつかのコアアプローチを理解する必要があります。

html2canvas

 // DOMは変換されるDOMノードですhtml2canvas（dom、{backgroundcolor：＃ffffff、width：width：height、sacle：2、aopttaint：true、}）。

JSPDF

 //インスタンスを作成しますpdf = new jspdf（ ''、 'pt'、 'a4'）; //画像をPDFファイルに追加する//最初のパラメーターは挿入されるファイル（base64）形式です。2番目はファイル形式です// 3番目と4番目は写真の左上隅の座標です。最後の2つは写真の幅と高さです。 //新しいページを追加pdf.addpage（）// pdfファイルpdf.save（）を保存します

キャンバス

 //キャンバスはカットする画像ですsheight）;

 /*** @description：form to pdf file* @return：pdf*/onsubmit（）{//これは私が変換したいフォームです。 //要素の幅と高さを取得width = form.getBoundingClientRect（）。width; let height = form.getBoundingClientRect（）。高さ; html2canvas（form、{backgroundcolor：#ffffff、width：width、height：height：seal：2、allowtaint：true、}）。キャンバスリストをトラバースしてページごとの画像を追加しますcanvaslist.foreach（（item、index）=> {//画像形式をbase64 let itemimage = item.todataurl（ 'image/jpeg'、1.0）; pdf.addimage（jpeg '、10,10,575.28,575.28/width.height） pdf.save（ 'test.pdf'）;/*** @description：cut canvas* @param {number} num num num num num num num canvas* @return {array} canvas list*/splitcanvas（canvas、num {let height = canvas.heightのchunkheight = height/num; //各スライスの高さは、chunklist = []; //結果キャンバスを（i = 0; i <height; i+= chunkheight）{// rectangle boxの位置を初期化します。 //キャンバスノードを作成するcanvasitem = document.createelement（canvas）; //キャンバスサイズの初期化canvasitem.height = chunkheight; canvasitem.width = width; let cxt = canvasitem.getContext（2d）; //トリミングされた画像を新しいキャンバスノードCXT.DRAWIMAGE（Canvas、SX、SY、Swidth、Sheight、DX、DY、Swidth、Sheight）に配置します。 chunklist.push（canvasitem）; } returnChunkList;}、

フォームの後のページが保存されます

PDFに変換する効果

これは、純粋なクライアントとPDFへのHTMLの純粋なサーバー実装ソリューションに関する記事です。より関連するHTMLからPDFコンテンツについては、wulin.comから以前の記事を検索するか、以下の関連記事を閲覧し続けてください。将来、誰もがwulin.comをサポートすることを願っています！