BinaryDevelop
  1. ホーム
  2. Web制作
  3. HTML/Xhtml

html to pdf スクリーンショット保存機能実装

2022-01-21 17:50:46

技術の活用

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

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

ジャバ＋JS

1. リソースの準備

itext.jar
www.baidu.com

html2canvas.js
www.baidu.com

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

// take a screenshot, document.querySelector("body") is the area to be screenshot
     function test() {
            html2canvas(document.querySelector("body"), {
                onrendered: function (canvas) {
                    var dataUrl = canvas.toDataURL('image/png');
                    var formData = new FormData(); // simulate a form object
                    formData.append("imgData", convertBase64UrlToBlob(dataUrl)); //write data
                    var xhr = new XMLHttpRequest(); //Data transfer method
                    xhr.open("POST", "http://localhost:8080/pdf"); //configure the transfer method and address
                    xhr.send(formData);
                    xhr.onreadystatechange = function () { // callback function
                    };
                }
            });
        }

        //format the image base64 encoding into a byte file stream
        function convertBase64UrlToBlob(urlData){
            //Remove the header of the url and convert to byte
            var bytes=window.atob(urlData.split(',')[1]);
            //handle exception, convert ascii code less than 0 to greater than 0
            var ab = new ArrayBuffer(bytes.length);
            var ia = new Uint8Array(ab);
            for (var s = 0;s<bytes.length;s++){
                ia[s] = bytes.charCodeAt(s);
            }
            return new Blob( [ab] , {type : 'image/png'});
        }
        
        <body onclick="test()">//just call the screenshot method

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

@RequestMapping(value = "/pdf",method = RequestMethod.POST)
    public void test(MultipartHttpServletRequest request, HttpServletResponse response) throws IOException {
        String filePath = "D:\\blog\\\exportPdf2.pdf";
        String imagePath = "D:\\\blog\\\exportImg2.png";
        Document document = new Document();
        try{
            Map getMap = request.getFileMap();
            MultipartFile mfile = (MultipartFile) getMap.get("imgData"); //get data
            InputStream file = mfile.getInputStream();
            byte[] fileByte = FileCopyUtils.copyToByteArray(file);

            FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath));//open the input stream
            imageOutput.write(fileByte, 0, fileByte.length);//generate local image file
            imageOutput.close();

            PdfWriter.getInstance(document, new FileOutputStream(filePath)); //itextpdf file
            document.open();
            document.add(new Paragraph("JUST TEST ... "));
            Image image = Image.getInstance(imagePath); //itext-pdf-image
            float heigth = image.getHeight();
            float width = image.getWidth();
            int percent = getPercent2(heigth, width); //proportional to reduce the image
            image.setAlignment(Image.MIDDLE);
            image.scalePercent(percent+3);
            document.add(image);
            document.close();

        }catch (DocumentException de) {
            System.err.println(de.getMessage());
        }
        catch (Exception e) {
            e.printStackTrace();

        }
    }

    private static int getPercent2(float h, float w) {
        int p = 0;
        float p2 = 0.0f;
        p2 = 530 / w * 100;
        p = Math.round(p2);
        return p;
    }

4 パッケージ名 

import com.itextpdf.text;
import com.itextpdf.text.DocumentException;
import com.itextpdf.text.Image;
import com.itextpdf.text;
import com.itextpdf.text.pdf;
import org.springframework.boot;
import org.springframework.boot.autoconfigure;
import org.springframework.stereotype;
import org.springframework.util.FileCopyUtils;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.MultipartHttpServletRequest;

import javax.imageio.stream.FileImageOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.util.Map;

4 フロントエンドでスクリーンショットを撮り、バックエンドのインターフェースにアクセスし、スクリーンショットファイルをpdfなどのフォーマットでローカルに保存します。

 ご興味があれば、バックエンドを変更して、ファイルをローカルにダウンロードすることも可能です

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

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

これはhtmlからpdfへのスクリーンショット保存機能の実装に関する記事の終わりです、より関連するhtmlからpdfへのスクリーンショット保存の内容は、スクリプトハウスの過去の記事を検索するか、次の関連記事を閲覧を続けてください、私はあなたが将来的にもっとスクリプトハウスをサポートして願っています！。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します