私はjsPDF(初めて使用する)とChrome / Firefoxが死にかけている(Aw Snap!/動作を停止する)に固執して問題を抱えており、リソースに関連している疑いがありますが、理由を見つけることができません。
フランチャイズ チェーンのメニュー ツールに取り組んでいます。このツールは、店舗で利用可能なすべてのメニュー料理を読み込み、各店舗がメニューを選択できるようにします。完了したら、選択したすべての料理とレシピの PDF を作成したいと考えています。(現在) 全部で 146 あり、さらに増える予定です。
各メニューは独自のアコーディオン (朝食、サンドイッチなど) に配置され、店が料理の選択を終了すると、それらを PDF にエクスポートできます。私のコードは料理のテキスト コンポーネントに対しては完全に機能しますが、料理の画像 (jpg/png) をドキュメントに追加すると失敗します (失敗メッセージは表示されません)。
これをテストするために、私は持っています:
料理画像の代わりに事前にエンコードされたロゴ画像コマンド (私はこれをカバー ページに追加します) を料理に追加し、1 つの料理のみを実行しました。料理の画像の代わりにロゴが表示され、問題なく動作します。
朝食のアコーディオンをループして、料理の画像の代わりにロゴを含むページを作成すると、ブラウザが動作しなくなります。
ディッシュの 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 = "";