时间戳

首页 > 解决方案 > html2pdf 应该使用车把吗？

javascript - html2pdf 应该使用车把吗？

问题描述

我正在尝试使用 JavaScript 从 HTML 生成 PDF。我正在使用 Handlebars 模板和 html2pdf。我可以选择要转换为 PDF 的数据，但它没有让我选择将数据保存为 PDF。所有模板文件都是 .hbs 文件。但是当我将 html2pdf 与 HTML 文件一起使用时，就没有问题了。我尝试了不同的解决方案，但我不明白问题出在哪里。我唯一的想法是 html2pdf 不适用于 .hbs 文件。这很奇怪，因为 hbs 被渲染为 HTML。我的想法是正确的还是问题出在哪里？或者如何克服这个障碍？详细信息如下。

我有我的主要布局dashboard.hbs，其中加载了所有内容：

<!doctype html>
<html>

<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="wrapper">
        <div class="container-fluid">
            <div class="row">
                {{>sidebar}}
                {{{body}}}
            </div>
        </div>
    </div>
    <script src="../public/js/jquery-3.6.0.min.js"></script>
    <script src=".././public/js/pdf.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js">
</body>
</html>

我还有reports.hbs 文件，其中是我要转换为PDF 的内容。应选择 id="print" 内的所有内容。

<div class="container reportResult reports col text-primary d-none">
    <div class="row">
        <div class="card shadow">
            <h5 id="reportHead" class="card-header bg-primary text-light"></h5>
            <div class="card-body">
                <button class="btn btn-secondary" id="download">PDF</button>
            </div>
        </div>
    </div>
    <div class="row" id="print">
        <div class="accordion" id="reportsAcordion">
            <div class="accordion-item">

    << Data I want to get >>

我的 pdf.js 文件如下：

window.onload = function () {
    document.getElementById("download")
        .addEventListener("click", () => {
            const htmlData = this.document.getElementById("print");
            console.log(htmlData);
            var opt = {
                margin: 1,
                filename: 'result.pdf',
                image: {type: 'jpeg', quality: 0.98},
                html2canvas: {scale: 2},
                jsPDF: {unit: 'in', format: 'letter', orientation: 'portrait'}
            };
            html2pdf().from(htmlData).set(opt).save();
        })
};

如果我单击 reports.hbs 文件中的 PDF 按钮，那么我会在控制台上看到以下信息：

控制台日志 (HBS) 控制台日志 (HBS)

因此，使用 JS，我得到了必要的数据，但我无法将其转换为 PDF，而且我无法选择将这些数据保存为 PDF。但是当我写一个普通的 HTML 页面时就没有问题了：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="public/js/pdf.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2pdf.js/0.9.2/html2pdf.bundle.js"></script>
</head>

<body>
<div class="container d-flex justify-content-center mt-50 mb-50">
    <div class="row">
        <div class="col-md-12 text-right mb-3">
            <button class="btn btn-primary" id="download">PDF</button>
        </div>
        <div class="col-md-12">
            <div class="card" id="print">

       ....

在控制台上我可以看到 html2canvas 信息：

控制台日志 (HTML) 控制台日志 (HTML)

标签： javascripthtmlpdfhandlebars.jshtml2pdf

解决方案

推荐阅读