3

我在 jsPDF(第一次使用它)和 Chrome / Firefox 死亡(Aw Snap!/停止工作)上遇到问题,我找不到原因,尽管我怀疑它与资源有关。

我正在为特许连锁店开发菜单工具。该工具将加载商店可用的所有菜单菜肴,并允许每个商店选择他们的菜单。完成后,我想创建所有选定菜肴和食谱的 PDF。(目前)总共有 146 个,未来还会有更多。

每个菜单都有自己的手风琴(早餐、三明治等),当商店选择完菜肴后,他们可以将它们导出为 PDF。我的代码非常适用于菜肴的文本组件,但是当我将菜肴图像 (jpg/png) 添加到文档时它会失败(没有失败消息!)。

为了测试这一点,我有:

  1. 将预编码的徽标图像命令(我将其添加到封面页 OK)添加到菜而不是菜图像,然后我只运行一个菜。它工作正常,徽标出现在菜肴图像的位置。

  2. 当我循环浏览早餐手风琴以创建带有徽标的页面时,浏览器停止工作。

  3. 如果我注释掉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 = "";
4

2 回答 2

1

我遇到了这个问题,确实最终缺乏资源。看来您可能在所有页面上都使用了相同的图像。如果是这种情况,那么您可以使用 jsPDF 中的内置别名。它将允许您一次将图像作为单个元素加载到文档中。一旦它作为一个元素加载,您就可以在文档中多次渲染它,而不会占用资源。

在创建带有徽标的第一页时,请使用如下别名:

doc.addImage(imgData, 'JPG', 5, 2, 10, 6,'myImageAlias');

然后在所有后续的图像插入中,使用以下语句插入它们:

doc.addImage('myImageAlias','JPG', 5, 2, 10, 6);
于 2014-05-27T15:11:59.663 回答
0

你试过domPDF吗?它也是一个用于将 html 转换为 PDF 静态或动态内容的库。关于图像,我只对 PDF 视图 php 文件使用 DATA URI。

关于“(Aw Snap!/停止工作)”,您可能想尝试在按钮上添加 target="_blank" 。

于 2014-04-28T06:06:35.770 回答