使用 JS 和 HTML 创建 PDF 的问题

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

查看您发布的 link 上的代码后，我会说 javascript 不是运行，因为您调用的是 jsPDF。您是否在运行您的代码之前安装了该库？

使用 JS 和 HTML 创建 PDF 的问题

Problems with Creating PDF Using JS and HTML

javascript

html

angularjs

jspdf