Question

我在jsPDF（第一次使用它）和Chrome / Firefox死亡（Aw Snap！/停止工作）时遇到困难和问题，我找不到原因，虽然我怀疑它与资源有关。

我正在为特许经营链工作一个菜单工具。该工具将加载商店可用的所有菜单，并允许每个商店选择他们的菜单。完成后，我想创建所有选定菜肴和食谱的PDF。（目前）共有146个，还有更多。

每个菜单都有自己的手风琴（早餐，三明治等......），当商店完成选择菜肴时，他们可以将它们导出为PDF。我的代码完美适用于菜肴的文本组件，但是当我将菜肴图像（jpg / png）添加到文档时，它失败了（没有失败消息！）。

为了测试这个，我有：

将预编码的徽标图像命令（我添加到封面页面确定）添加到菜肴而不是菜肴图像，然后我只运行一个菜。它工作正常，徽标出现在菜肴图像的位置。
当我循环使用早餐手风琴来创建带有徽标的页面时，浏览器停止工作。
如果我注释掉了dish imagedd语句，它可以很好地创建包含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 = "";

Answer 1

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

使用徽标创建第一页时，请使用以下别名：

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

然后在所有后续图像插入中，使用以下语句插入它们：

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

Answer 2

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

关于＆＃34;（Aw Snap！/停止工作）＆＃34;，您可能想尝试添加target =＆＃34; _blank＆＃34;在你的按钮上。

jsPDF浏览器死亡

2 个答案: