打印多个 PDF 和呈现的 HTML答案

【问题标题】：Print multiple PDF and rendered HTML打印多个 PDF 和呈现的 HTML
【发布时间】：2018-05-23 12:09:49
【问题描述】：

我需要从我的 Web 应用程序打印多个 PDF 和呈现的 html。是否可以向用户显示打印预览，然后一次性打印，还是我需要一个接一个地打印？

这是我要打印的内容的简短示例，我想在第一段中打印内容，然后是 pdf，然后是下一段。

<html>
<body>
<p> 
This is my paragraph<br />
This is my paragraph<br />
This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />
</p>
<iframe  src="http://www.africau.edu/images/default/sample.pdf" style="width:718px; height:700px;" frameborder="0"></iframe>
<p> 
This is my paragraph<br />
This is my paragraph<br />
This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />
</p>
</body>

【问题讨论】：

标签： javascript css reactjs printing

【解决方案1】：

如果我理解，我认为你应该使用 object 而不是 iframe 它是这样的：

<body>
    <p>This is my paragraph</p>    
      <object data="http://www.africau.edu/images/default/sample.pdf" type="application/pdf" style="height: 500px;">
          <embed src="http://www.africau.edu/images/default/sample.pdf" type="application/pdf" style="width: 500px;height: 500px;">
      </object>  
  <p>This is my paragraph</p>
  </body>

通过这种方式，您可以预览和打印包含 pdf 的 html。您可以嵌入多个 pdf 文件并一次打印，但只是可见部分。

另一种方法可能是使用一些服务器端代码，例如 wkhtmltopdf 并尝试合并 pdf，看看这个：wkhtmltopdf: Is it possible to merge PDF files?

【讨论】：

这不起作用。在打印预览 pdf 空间即将空白，我也想打印 pdf。

【解决方案2】：

是的，这是可能的，但您必须稍微调整我的代码以满足您的需求。

我将通过添加一些 id 属性来修改您的 HTML 页面，以方便 javascript 选择它们：

<html>
<body>
<p id ='first_paragraph'> 
This is my paragraph<br />
This is my paragraph<br />
This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />
</p>
<iframe id='first_ifame' src="http://www.africau.edu/images/default/sample.pdf" style="width:718px; height:700px;" frameborder="0"></iframe>

<p id= "second_paragraph"> 
This is my paragraph<br />
This is my paragraph<br />
This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />This is my paragraph<br />
</p>
</body>
</html>

现在我将使用 javascript 通过操作 DOM 来重新排序父窗口的内容。

<script>

 pages =[] // initiate an empty list here

function printPage() {

var p1 = document.getElementById('first_paragraph');
// get the first_paragraph and
// then push its innerHTML into the list
   pages.push(p1.innerHTML); 

var frame1 = document.getElementById('first_ifame');
// get the first_iframe and
// then push its innerHTML into the list
   pages.push(frame1.contentWindow.document.body.innerHTML); 

var p2 = document.getElementById('second_paragraph');
// get the second_paragraph and
// then push its innerHTML into the list
   pages.push(p2.innerHTML); 

if (pages && pages.length) {

// this if statement, just checks to ensure our list is not empty before running the code.

// here is the magic, we now set the parent window to be equal to all the concatenated innerHTML
window.content.document.body.innerHTML = pages;
// then we print this new window that contains all the iframes
window.print();
} 
else {
// do nothing
}


}
</script>

使用此解决方案，您甚至可以避免 iframe 超过一页时被切断的问题。其次，即使您有多个 iframe，您也只会得到一个打印对话框。

请记住，在您的父页面 HTML 中，您将有以下代码来调用 printPage 函数。

<input type="submit" value="Print All"
  onclick="javascript:printPage()"
 />

【讨论】：