HTMLページを画像に保存し、画像をPDFに書き込む実現方法(推奨)

この機能を実現するために多くの努力をしましたが、多くの曲り道を通ってきました。現在の方法も曲り道である可能性があります。

jsPDFプラグインがあり、フロントエンドで直接PDFを生成できますが、IEには対応していません。

フロントエンド：

まずは　　html2canvas.js

html2canvas(document.body, { //スクリーンショットオブジェクト
     //詳細なパラメータをここで設定できます
     onrendered: function(canvas) { //キャンバスのレンダリング完了コールバック
       canvas.id = "mycanvas"; 
       // baseを生成64画像データ
       var dataUrl = canvas.toDataURL('image/png');  //指定された形式、またはパラメータなしで指定可能
       var formData = new FormData(); //シミュレートされたフォームオブジェクト
       formData.append("imgData", convertBase64UrlToBlob(dataUrl), "123.png"); //データの書き込み
       var xhr = new XMLHttpRequest(); //データ転送方法
       xhr.open("POST", "../bulletin/exportPdf"); //転送方法及びアドレスの設定
       xhr.send(formData);
       xhr.onreadystatechange = function(){ //コールバック関数
         if(xhr.readyState == 4){
            if (xhr.status == 200) {
               var back = JSON.parse(xhr.responseText);
               if(back.success == true){
                 alertBox({content: 'Pdfエクスポート成功！',lock: true,drag: false,ok: true});
               }else{
                 alertBox({content: 'Pdfエクスポート失敗！',lock: true,drag: false,ok: true});
               }
            }
         }
       };
     }
}); 
//をbase64の画像URLデータをBlobに変換
function convertBase64UrlToBlob(urlData){
  //URLのヘッダを取り除き、byteに変換
  var bytes=window.atob(urlData.split(',')[1]);    
  //例外処理を行い、ASCIIコードが0未満のものを0以上に変換
  var ab = new ArrayBuffer(bytes.length);
  var ia = new Uint8Array(ab);
  for (var i = 0; i < bytes.length; i++) {
    ia[i] = bytes.charCodeAt(i);
  }
  return new Blob( [ab] , {type : 'image/png'});
}

互換性：Firefox 3.5+, Chrome, Opera, IE10+

サポートされていません：iframe、ブラウザプラグイン、Flash

クロスドメイン画像はクロスドメインサーバヘッダにクロスドメインリクエストを許可する必要があります

access-control-allow-origin: *　 access-control-allow-credentials: true

SVG画像は直接サポートされていませんが、パッチパッケージがありますが、私が試していないのであります。

IE9FormDataデータ形式をサポートしていません。またBlobもサポートしていません。この場合、canvasで生成された64base文字列をURLのヘッダから削除して直接バックエンドに渡し、バックエンドが受け取った後：

String base64 = Img.split(",")[1];
BASE64Decoder decode = new BASE64Decoder(); 
byte[] imgByte = decode.decodeBuffer(base64);

バックエンド：

iText jarパッケージのインポート

@RequestMapping("/exportPdf())
public @ResponseBody void exportPdf(MultipartHttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {
  ResultData result = new ResultData();  //カスタム結果フォーマット
  String filePath = "c:\\exportPdf2.pdf";
  String imagePath = "c:\\exportImg2.bmp";
  Document document = new Document(); 
  try{
    Map getMap = request.getFileMap();
    MultipartFile mfile = (MultipartFile) getMap.get("imgData"); //データを取得します
    InputStream file = mfile.getInputStream();
    byte[] fileByte = FileCopyUtils.copyToByteArray(file);
    FileImageOutputStream imageOutput = new FileImageOutputStream(new File(imagePath));//入力ストリームを開きます
    imageOutput.write(fileByte, 0, fileByte.length);//ローカルの画像ファイルを生成します
    imageOutput.close();
    PdfWriter.getInstance(document, new FileOutputStream(filePath)); //itextpdfファイル
//    document.setPageSize(PageSize.A2);
    document.open();
    document.add(new Paragraph("JUST TEST ..."));
    Image image = Image.getInstance(imagePath); //itext-pdf-image
    float height = image.getHeight(); 
        float width = image.getWidth(); 
        int percent = getPercent2(高さ, 幅);  //画像を縮小します
        image.setAlignment(Image.MIDDLE); 
        image.scalePercent(percent+3);
    document.add(image);
    document.close();
    result.setSuccess(true);
    operatelogService.addOperateLogInfo(request, "簡報PDFのエクスポート成功：簡報PDFのエクスポートに成功");
  System.err.println(de.getMessage());
    catch (Exception e) {
  }
  e.printStackTrace();
    result.setSuccess(false);
    result.setErrorMessage(e.toString());
    try {
    operatelogService.addOperateLogError(request, "エクスポート失敗：サーバーエラー");
      catch (Exception e
    }1) {
      e1.printStackTrace();
    }
  }
  response.getWriter().print(JSONObject.fromObject(result).toString());
}
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;
}

　iText は、sourceforge オープンソースプロジェクトで有名な一个是、PDF ドキュメントを生成するための Java ライブラリです。

処理速度が速く、多くの PDF「高度」機能をサポートしています。

しかし、iText がエラーが発生した場合、エラーメッセージは表示されず、直接スキップされます。PDF ドキュメントが破損して、エラーの原因を見つけることができず、本当に困り果てます。

最後に、ネット上の関連ブログや投稿、百度検索に感謝します。

以上の記事では、HTML ページを画像に保存し、画像を PDF に書き込む実現方法（おすすめ）を紹介しました。皆様に参考になれば幸いです。また、ナレーション教程へのご支援をよろしくお願いします。

基礎教程