时间戳

首页 > 解决方案 > 如何使用 Jquery 在模态中将 html 转换为 pdf？

javascript - 如何使用 Jquery 在模态中将 html 转换为 pdf？

问题描述

我有一项任务要做，我必须在没有下载选项的情况下以引导模式显示 pdf。该 pdf 将具有输入字段，用户可以在其中上传其签名，当用户单击确定时，它将保存相应的 pdf 并填充信息。我尝试这样做，使用 Bootstrap 模态，我可以在模态弹出窗口中显示带有输入选项的表单，但我想要我在模态中写的任何内容，它应该显示为 pdf，并且没有 doanload 选项。

我在 Jquery 中搜索答案，我看到了 jsPDF，但所有教程都显示了如何下载 html2pdf。我只想让用户先阅读它而不是下载。

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div style="text-align: center;" class="test">
            <div>
                <hr><h2>Contract</h2><hr>
                <h3>Hereby,i buy LaLaLa Land in the exchange of 2 cookies.</h3>
            </div>

            <div class="signature">
                <hr><h2>Signature Page</h2><hr>

                    <img class="profile-pic" />
                    <div class="upload-button"></div>
                    <input class="file-upload" type="file" accept="image/*"/>

                <h4>Document ID:dlfkhahdf4565n5jbnjk45h</h4>
                <h4>User Name:Donald Trump</h4>
                <h4>User ID:456jkn45</h4>
            </div>
</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Okay</button>
      </div>
    </div>
  </div>
</div>

标签： javascriptjquerybootstrap-modal

解决方案

只需在 中显示data:创建的 PDF 的 URI iframe，或使用 PDF.js 显示它：

// Set up jsPDF
var pdf = new jsPDF();

// Set up PDF.js
//pdfjsLib.GlobalWorkerOptions.workerSrc =
//  'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.0.943/pdf.worker.min.js';

function render_example() {
  var source = document.getElementById("convert_me_to_pdf");
  pdf.fromHTML(source, function (dispose) {
    var pdf_uri = pdf.output("datauristring");
    document.getElementById("show_pdf_here").src = pdf_uri;

    var pdf_array = pdf.output("arraybuffer");
    // PDF.js here!
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.debug.js" integrity="sha384-THVO/sM0mFD9h7dfSndI6TS0PgAGavwKvB5hAxRRvc0o9cPLohB0wb/PTA7LdUHs" crossorigin="anonymous"></script>
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js" crossorigin="anonymous"></script>

<button onclick="render_example()">Render</button>

<h1>Output</h1>
<h2><code>&lt;iframe&gt;</code></h2>
<iframe id="show_pdf_here" src="//www.example.org"></iframe>
<h2>PDF.js</h2>
Requires CORS to be disabled; cannot write. See <a href="https://stackoverflow.com/a/32634740/5223757">here</a> for an implementation.
<iframe src="https://mozilla.github.io/pdf.js/web/viewer.html"></iframe>

<h1>Input</h1>
<div id="convert_me_to_pdf">
  <p>
    Example...
  </p>
  <textarea></textarea>
</div>

呃...这应该工作......我不知道为什么它没有。无论如何，我都会发布它以防万一。

推荐阅读