在iframe中打印整个HTML页面,包括pdf文件

Question

在iframe中打印整个HTML页面,包括pdf文件

alt*_*3en 17 html javascript css pdf iframe

我有一个任务是在html页面中嵌入相对较小的pdf文件并打印整个html pade,包括iframe中的pdf文件.这是我的html页面的结构:

这是我的代码:

@media print{
	body * {display:block;}
    .toPrint{display:block; border:0; width:100%; min-height:500px}

Run Code Online (Sandbox Code Playgroud)

<body>
    <button onclick="window.print()">Print</button>

	<h3>MUST BE PRINTED</h3>
    <p> MUST BE PRINTED</p>
    <iframe class="toPrint" src="https://nett.umich.edu/sites/default/files/docs/pdf_files_scan_create_reducefilesize.pdf" style="width:100%; height:97vh;"></iframe>
	<h3>MUST BE PRINTED</h3>
    <p> MUST BE PRINTED</p>
</body>

Run Code Online (Sandbox Code Playgroud)

目前我正在使用css @media查询打印页面.但遗憾的是,此媒体查询仅打印pdf的第一页.

我该怎么做才能打印整个pdf文件？

Answer 1

avl*_*dov 11

它不打印整个PDF的原因是因为它在iframe中并且高度是固定的.要打印整个PDF,您需要iframe高度以匹配其内容高度(iframe上应该没有滚动条).

另一种选择是仅打印iframe.将ID添加到您的iFrame:

<iframe id="toPrint" class="toPrint"></iframe>

Run Code Online (Sandbox Code Playgroud)

关注iframe并打印其内容:

var pdfFrame = document.getElementById("toPrint").contentWindow;

pdfFrame.focus();
pdfFrame.print();

Run Code Online (Sandbox Code Playgroud)

Answer 2

小智 5

试试这个,它包括一些JS,但总是很好.HTML:

<body>
        <h3>MUST BE PRINTED</h3>
        <p> MUST BE PRINTED</p>
        <div id="pdfRenderer"></div>
        <h3>MUST BE PRINTED</h3>
        <p> MUST BE PRINTED</p>
    </body>

Run Code Online (Sandbox Code Playgroud)

JS:

var pdf = new PDFObject({
  url: "https://nett.umich.edu/sites/default/files/docs/pdf_files_scan_create_reducefilesize.pdf",
  id: "pdfRendered",
  pdfOpenParams: {
    view: "FitH"
  }
}).embed("pdfRenderer");

Run Code Online (Sandbox Code Playgroud)

这应该工作.如果我没有,请现在让我

Answer 3

alt*_*3en 0

我使用 Mozilla 的 pdf.js 来解决我的问题。它将 pdf 文件呈现在 html5 画布上，因此它允许根据需要打印整个 html 页面。

这是代码（信用）：

<html>
<body>

<script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"></script>
<script type="text/javascript">
function renderPDF(url, canvasContainer, options) {
    var options = options || { scale: 1 };
        
    function renderPage(page) {
        var viewport = page.getViewport(options.scale);
        var canvas = document.createElement('canvas');
        var ctx = canvas.getContext('2d');
        var renderContext = {
          canvasContext: ctx,
          viewport: viewport
        };
        
        canvas.height = viewport.height;
        canvas.width = viewport.width;
        canvasContainer.appendChild(canvas);
        
        page.render(renderContext);
    }
    
    function renderPages(pdfDoc) {
        for(var num = 1; num <= pdfDoc.numPages; num++)
            pdfDoc.getPage(num).then(renderPage);
    }
    PDFJS.disableWorker = true;
    PDFJS.getDocument(url).then(renderPages);
}   
</script> 
        <h3>MUST BE PRINTED</h3>
        <p> MUST BE PRINTED</p>
		<div id="holder"></div>
        <h3>MUST BE PRINTED</h3>
        <p> MUST BE PRINTED</p>

<script type="text/javascript">
renderPDF('yourFile.pdf', document.getElementById('holder'));
</script>  

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，6 月前
查看次数：	1930 次
最近记录：	9 年，6 月前