HTMLからPDFへのスクリーンショット保存機能の実装

テクノロジーの活用

itext.jar: バイトファイル入力ストリームを画像、PDF などに変換します。

html2canvas.js: HTML ページ領域のスクリーンショットを base64 エンコードされた画像リソースとして保存します

java + js の

1. リソースを準備する

itext.jar
百度

html2canvas.js
百度

2. フロントエンドコード:

//スクリーンショット操作を実行します。document.querySelector("body") はスクリーンショットを撮る領域です。function test() {
            html2canvas(document.querySelector("本文"), {
                onrendered: 関数 (キャンバス) {
                    var dataUrl = canvas.toDataURL('image/png');
                    var formData = new FormData(); //フォームオブジェクトをシミュレート formData.append("imgData", convertBase64UrlToBlob(dataUrl)); //データを書き込む var xhr = new XMLHttpRequest(); //データ送信方法 xhr.open("POST", "http://localhost:8080/pdf"); //送信方法とアドレスを構成する xhr.send(formData);
                    xhr.onreadystatechange = function () { //コールバック関数};
                }
            });
        }

        // イメージの Base64 エンコードをフォーマットし、バイト ファイル ストリームに変換します。関数 convertBase64UrlToBlob(urlData){
            //URLヘッダーを削除してバイトに変換します
            var バイト = window.atob(urlData.split(',')[1]);
            //例外を処理し、0 未満の ASCII コードを 0 より大きい値に変換します
            var ab = 新しいArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            (var s = 0; s < bytes.length; s++) の場合 {
                ia[s] = bytes.charCodeAt(s);
            }
            新しいBlob([ab]、{type:'image/png'})を返します。
        }
        
        <body onclick="test()">//スクリーンショットメソッドを呼び出す

3. バックエンドコード:

@RequestMapping(値 = "/pdf",メソッド = RequestMethod.POST)
    パブリック void テスト (MultipartHttpServletRequest リクエスト、HttpServletResponse レスポンス) は IOException をスローします {
        文字列ファイルパス = "D:\\blog\\exportPdf2.pdf";
        文字列 imagePath = "D:\\blog\\exportImg2.png";
        ドキュメント document = new Document();
        試す{
            マップ getMap = request.getFileMap();
            MultipartFile mfile = (MultipartFile) getMap.get("imgData"); //データを取得 InputStream file = mfile.getInputStream();
            byte[] fileByte = FileCopyUtils.copyToByteArray(ファイル);

            FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath));//入力ストリームを開きます imageOutput.write(fileByte, 0, fileByte.length);//ローカルイメージファイルを生成します imageOutput.close();

            PdfWriter.getInstance(document, new FileOutputStream(filePath)); //itextpdf ファイルdocument.open();
            document.add(新しい段落("JUST TEST ..."));
            画像 image = Image.getInstance(imagePath); //itext-pdf-image
            浮動小数点の高さ = image.getHeight();
            浮動小数点の幅 = image.getWidth();
            int percent = getPercent2(heigth, width); // 画像を縮小します image.setAlignment(Image.MIDDLE);
            image.scalePercent(パーセント+3);
            document.add(画像);
            ドキュメントを閉じる();

        }キャッチ（DocumentException de）{
            System.err.println(de.getMessage());
        }
        キャッチ（例外e）{
            e.printStackTrace();

        }
    }

    プライベート静的int getPercent2(float h, float w) {
        整数p = 0;
        浮動小数点数 p2 = 0.0f;
        p2 = 530 / w * 100;
        p = Math.round(p2);
        p を返します。
    }

4 パッケージ名

com.itextpdf.text.Document をインポートします。
com.itextpdf.text.DocumentException をインポートします。
com.itextpdf.text.Image をインポートします。
com.itextpdf.text.Paragraph をインポートします。
com.itextpdf.text.pdf.PdfWriter をインポートします。
org.springframework.boot.SpringApplication をインポートします。
org.springframework.boot.autoconfigure.SpringBootApplication をインポートします。
org.springframework.stereotype.Controller をインポートします。
org.springframework.util.FileCopyUtils をインポートします。
org.springframework.web.bind.annotation.RequestMapping をインポートします。
org.springframework.web.bind.annotation.RequestMethod をインポートします。
org.springframework.web.multipart.MultipartFile をインポートします。
org.springframework.web.multipart.MultipartHttpServletRequest をインポートします。

javax.imageio.stream.FileImageOutputStream をインポートします。
javax.servlet.http.HttpServletResponse をインポートします。
java.io.File をインポートします。
java.io.FileOutputStream をインポートします。
java.io.IOException をインポートします。
java.io.InputStream をインポートします。
java.util.Map をインポートします。

4 フロントエンドでスクリーンショットを撮り、バックエンドインターフェイスにアクセスし、スクリーンショットファイルを PDF またはその他の形式でローカルに保存します。

興味のある学生はバックエンドを変更してファイルをローカルにダウンロードすることができます

5 プロジェクトソースコードアドレス

https://github.com/zhangjy520/learn_java/tree/master/boot

これで、HTML から PDF へのスクリーンショット保存機能の実装に関するこの記事は終了です。より関連性の高い HTML から PDF へのスクリーンショット保存コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM を応援していただければ幸いです。

<<: CSS 擬似要素::マーカーの詳細な説明

>>: CSSフローティングとフローティング解除について