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

Question

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

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

Answer 1

html 嵌入标签显示带有打印和下载选项的 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”类来自 Twitter引导并帮助响应式格式化。另外，“#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