我在 jsPDF(第一次使用它)和 Chrome / Firefox 死亡(Aw Snap!/停止工作)上遇到问题,我找不到原因,尽管我怀疑它与资源有关。
我正在为特许连锁店开发菜单工具。该工具将加载商店可用的所有菜单菜肴,并允许每个商店选择他们的菜单。完成后,我想创建所有选定菜肴和食谱的 PDF。(目前)总共有 146 个,未来还会有更多。
每个菜单都有自己的手风琴(早餐、三明治等),当商店选择完菜肴后,他们可以将它们导出为 PDF。我的代码非常适用于菜肴的文本组件,但是当我将菜肴图像 (jpg/png) 添加到文档时它会失败(没有失败消息!)。
为了测试这一点,我有:
将预编码的徽标图像命令(我将其添加到封面页 OK)添加到菜而不是菜图像,然后我只运行一个菜。它工作正常,徽标出现在菜肴图像的位置。
当我循环浏览早餐手风琴以创建带有徽标的页面时,浏览器停止工作。
如果我注释掉dish imageAdd 语句,它就可以很好地创建具有45 个奇数页面和文本内容的PDF。
我相信这是 jsPDF 的资源问题。任何想法/想法表示赞赏。
我的测试代码(使用一个徽标图像而不是菜肴图像):
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 = "";