在 Chrome 中使用 JS 将页面打印为 PDF 并打开答案

【问题标题】：Using JS to print page as PDF in Chrome and open it在 Chrome 中使用 JS 将页面打印为 PDF 并打开
【发布时间】：2017-07-08 13:03:46
【问题描述】：

我有一个包含许多不同页面的内部站点，它们都有一个仅由 CSS 控制的可打印版本。我的用户使用 Chrome 的打印/另存为 PDF 菜单命令创建 PDF。我想知道是否可以使用 JavaScript 从按钮启动 Save As PDF 并自动打开保存的 PDF（实际上保存并不重要，只需在新选项卡上查看即可）。

仅限 Chrome 的解决方案是可以的。如果需要安装 Chrome 扩展程序，这也不是问题。只要我不必为每个页面布局编写额外的 PDF 渲染代码，一切都很好。

【问题讨论】：

你找到解决办法了吗？
没有。我教我的用户如何从 Chrome 的菜单中打印。
@OzgurSar，为了使用这个，你可以使用html2canvas和jsPDF。 Here 是一个类似的答案。
@myjobistobehappy 是的，我知道 pdf 库，但在这种特定情况下，我只想了解是否可以触发 chrome 的另存为 pdf 选项。
@OzgurSar，您无法触发另存为 pdf，但您可以使用 window.print() 来显示打印对话框。

标签： javascript google-chrome pdf

【解决方案1】：

html embed 标签显示带有打印和下载选项的 PDF。根据页面的设置，您可以在某处附加一个元素，其中 pdf 源从用户在 PDF 名称旁边看到的按钮动态填充。比如……

HTML：

    <div class="parent-container">
    <h3 class="pdf-name">Some PDF Name</h3><button type="button" class="open-pdf" 
    data-pdf="source">Open</button>
    </div>

Javascript：

    function displayEmbeddedPdf (event){
      event.preventDefault();
      let pdfSource = $(this).data("pdf");

      let pdfDisplay=`<embed class="embed-responsive-item embedded-pdf" 
      src="https://via.placeholder.com/150#view=FitH">`

      $(this).parent().append(pdfDisplay);
    }

    $( document ).ready(function() {
      $(".open-pdf").click(displayEmbeddedPdf) 
    });

我在下面的空间中使用了图像占位符，但您可以改为插入 pdfSource 变量以访问您目录中的源...另外请注意，嵌入标签上的“embed-responsive-item”类来自 with Twitter Bootstrap 并帮助响应式格式化。此外，“#view=FitH”是一个开放参数。以下是有关开放参数的更多信息：https://www.adobe.com/content/dam/acom/en/devnet/acrobat/pdfs/PDFOpenParams.pdf

查看此 CodePen 上的代码：https://codepen.io/gemiller/pen/qvyaGZ

以下是嵌入式 pdf 的示例：https://msu.edu/~urban/sme865/resources/embedded_pdf.html

【讨论】：

我很惊讶你得到了这个复选标记。我觉得你没有回答用户的问题。您的回答意味着 PDF 已经生成并且正在某处提供。我认为 OP 正在询问他如何制作一个基本上复制“CMD + P”的按钮，然后选择“另存为 PDF”，然后单击保存，触发新创建的 PDF 作为文件下载或在新选项卡中打开。

【解决方案2】：

没有办法强制浏览器以 PDF 格式打印，甚至向打印机发送请求，最好的方法是使用 JavaScript 中的 print() 函数。

您可以这样做的一种方法是使其成为 iframe 对象并像这样打印它：

document.getElementById('content-frame').contentWindow.window.print();

这将使它为 iFrame 发送一个打印菜单，只打印 iFrame 中的内容。

【讨论】：

感谢您的回复，但这不是问题的答案。提问者 Arthur 询问是否可以使用 javascript 触发 Chrome 的 Save as PDF 函数。您已经可以通过从“打印”菜单中选择它来手动进行。
明白，据我所知，未经用户同意，无法让 Chrome、Firefox 等保存 PDF。