3

私はjsPDF(初めて使用する)とChrome / Firefoxが死にかけている(Aw Snap!/動作を停止する)に固執して問題を抱えており、リソースに関連している疑いがありますが、理由を見つけることができません。

フランチャイズ チェーンのメニュー ツールに取り組んでいます。このツールは、店舗で利用可能なすべてのメニュー料理を読み込み、各店舗がメニューを選択できるようにします。完了したら、選択したすべての料理とレシピの PDF を作成したいと考えています。(現在) 全部で 146 あり、さらに増える予定です。

各メニューは独自のアコーディオン (朝食、サンドイッチなど) に配置され、店が料理の選択を終了すると、それらを PDF にエクスポートできます。私のコードは料理のテキスト コンポーネントに対しては完全に機能しますが、料理の画像 (jpg/png) をドキュメントに追加すると失敗します (失敗メッセージは表示されません)。

これをテストするために、私は持っています:

  1. 料理画像の代わりに事前にエンコードされたロゴ画像コマンド (私はこれをカバー ページに追加します) を料理に追加し、1 つの料理のみを実行しました。料理の画像の代わりにロゴが表示され、問題なく動作します。

  2. 朝食のアコーディオンをループして、料理の画像の代わりにロゴを含むページを作成すると、ブラウザが動作しなくなります。

  3. ディッシュの imageAdd ステートメントをコメント アウトすると、45 ページの奇数ページとテキスト コンテンツを含む PDF を正常に作成できます。

これはjsPDFのリソースの問題だと思います。任意の考え/アイデアをいただければ幸いです。

私のテストコード(皿の画像の代わりに1つのロゴ画像を使用):

function createFiles(accordion, doc, title) {

    var page_num = 0;
    var left_margin = 2;
    var text_start = 9;
    var line_height = 1;
    var next_line_pos = 0;
    var page_width = 17;
    var temp_HTML = "";

    /* COVER PAGE */
    doc.setFontSize(22);
    doc.setFontStyle('bold');
    doc.text(5, 10, 'TCE Menu Recipes: ' + title);
    doc.setFontSize(16);
    doc.text(7, 12, 'TCE Store: ' + sessionStorage.store_name);
    doc.text(8, 24, 'TCE Confidential');

    var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/...';
    doc.addImage(imgData, 'JPG', 5, 1, 10, 6);

    /* LOOP THROUGH BREAKFAST MENU */
    jQuery('#' + accordion + ' > div').each(function() {

        /* NEW PAGE PER DISH */
        page_num = page_num + 1;
        doc.addPage();

        /* BUILD PAGE HEADER & FOOTER */
        doc.setFontStyle('normal');
        doc.setFontSize(8);
        var hdr_menu = 'TCE Menu Recipes: ' + title;
        hdr_menu = hdr_menu.rpad(' ', 70); 
        var hdr_store = 'TCE Store: ' + sessionStorage.store_name;
        hdr_store = hdr_store.rpad(' ', 60); 
        var hdr_confidential = 'TCE Confidential';
        var hdr_page = 'Page: ' + page_num;
        hdr_page = hdr_page.lpad(' ', 40); 
        var hdr_string = hdr_menu + hdr_store + hdr_confidential + hdr_page;
        doc.text(1, 1, hdr_string);
        doc.text(1, 29, hdr_string);
        doc.setFontSize(12);

        /* PRODUCTION CODE, USE DISH IMAGE */
//      var imageUrl = jQuery('#' + this.id + 'i').attr('src');
//      var extn = imageUrl.substring(imageUrl.lastIndexOf(".") + 1, imageUrl.length);
//      if((extn != 'jpeg') && (extn != 'jpg') && (extn != 'png')) {
//          doc.text(5, 2, 'Image Type Not Supported!');
//      } else {
//          convertImgToBase64(imageUrl, function(base64Img){
//              doc.addImage(base64Img, extn, 1, 1, 10, 6);
//          });
//      };

        /* TEST CODE, USING LOGO IMAGE */
        var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/...';
        doc.addImage(imgData, 'JPG', 5, 2, 10, 6);
        imgData = "";

        /* DISH DETAILS BELOW - DESC, NAME & INGRED */
        doc.setFontStyle('bold');
        doc.text(left_margin, text_start, 'Dish Name:');
        doc.setFontStyle('normal');     
        doc.text(left_margin + 5, text_start, jQuery('#' + this.id + 'n').val());

        next_line_pos = text_start + line_height;

        doc.setFontStyle('bold');
        doc.text(left_margin, next_line_pos, 'Dish Description:');
        next_line_pos = next_line_pos + line_height;
        doc.setFontStyle('normal');
        lines = doc.splitTextToSize(jQuery('#' + this.id + 'd').val(), page_width);
        doc.text(left_margin, next_line_pos, lines);        

        next_line_pos = next_line_pos + line_height * lines.length;

        doc.setFontStyle('bold');
        doc.text(left_margin, next_line_pos, 'Ingredients: ');      
        next_line_pos = next_line_pos + line_height;
        doc.setFontStyle('normal');
        lines = doc.splitTextToSize(jQuery('#' + this.id + 'g').val(), page_width);
        doc.text(left_margin, next_line_pos, lines);        

    });
};

次のコードをコメント アウトすると、PDF OK というテキストが作成され、表紙にロゴがあり、45 ページのテキストのみが表示されます。

            /* TEST CODE, USING LOGO IMAGE */
//          var imgData = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAgEASABIAAD/...';
//          doc.addImage(imgData, 'JPG', 5, 2, 10, 6);
//          imgData = "";
4

2 に答える 2

0

domPDFを試しましたか? これは、HTML を静的コンテンツまたは動的コンテンツのいずれかの PDF に変換するためのライブラリでもあります。画像に関しては、PDF ビューの php ファイルにも DATA URI を使用しています。

「(Aw Snap! / 動作停止)」については、ボタンに target="_blank" を追加してみてください。

于 2014-04-28T06:06:35.770 に答える