Question

我正在使用angular，node，express和html。

我正在尝试实现此处http://codepen.io/SitePoint/pen/rxPNpG中的代码。但是，遗憾的是按钮在点击时不会调用任何功能。没有代码发生变化，所以我对如何使按钮功能有点迷茫。按钮是下面的更新预览按钮和下载按钮。这是HTML按钮部分：

<!DOCTYPE html>
<html lang="en">
<html ng-app="app">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<% include headerpdf %>
<% include navbar %>
                    <hr>
                    <div class="row">
                            <div class="col-sm-6">
                                    <div class="form-group">
                                            <button id="flyer_preview_btn" class="btn btn-primary btn-block" tabindex="9">Update preview</button>
                                    </div>
                            </div>
                            <div class="col-sm-6">
                                    <div class="form-group text-right">
                                            <button id="flyer_download_btn" class="btn btn-default btn-xs btn-block" tabindex="10">Download</button>
                                    </div>
                            </div>
                    </div>

            </div>

这是相关的JS：

            update_preview_button = $('#flyer_preview_btn'),
            download_button = $('#flyer_download_btn');

    // preview can be displayed?
    if (navigator.msSaveBlob) { // older IE
            update_preview_button.prop('disabled', true);
            can_display_preview = false;
            preview_container.replaceWith(
                    '<div class="no_iframe">' +
                    '<div>' +
                    "The preview can't be displayed" +
                    '</div>' +
                    '</div>'
            );
    }
              // restoring buttons
             download_button.prop('disabled', false);
             if (can_display_preview) { update_preview_button.prop('disabled', false);
                                    }
                            };
                            user_img.src = img_data.src;
                    };
            //!pdf builder
            var createPDF = function(update_preview) {
                    /*
            update_preview:
                ==> true: shows pdf online
                ==> false: downloads the pdf
        */
               // ****************************
               // output
               if (update_preview) {
               preview_container.attr('src', pdf.output('datauristring'));
                    } else {
                            pdf.save('flyer ' + flyer_title + '.pdf');
                    }

            }; // end createPDF

            // !buttons
            update_preview_button.click(function() {
                    createPDF(true);
            });

            $('#flyer_download_btn').click(function() {
                    createPDF(false);
            });

    } catch (e) {
            console.log(e);
    }
   })();

Answer 1

在查看您发布的链接上的代码后，我会说javascript没有运行，因为您正在调用jsPDF。你在运行代码之前安装了那个库吗？

使用JS和HTML创建PDF的问题

1 个答案: