Question

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

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

Answer 1

html embed标签显示带有打印和下载选项的PDF。根据页面的设置，您可以在某个元素后面附加一个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标签上的“嵌入响应项目”类来自 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

Answer 2

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

执行此操作的一种方法是将其设置为 iframe 对象并按如下所示进行打印：

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

这将使其发送iFrame的打印菜单，仅打印iFrame中的内容。

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

2 个答案: