Печать всей HTML-страницы, включая файл pdf внутри iframe

У меня есть задание по размещению относительно небольшого pdf файла внутри html-страницы и распечатка всего html файла, включая файл pdf внутри iframe. Вот структура моей html-страницы: введите описание изображения здесь

Вот мой код: 

@media print{
	body * {display:block;}
    .toPrint{display:block; border:0; width:100%; min-height:500px}
<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>

Ответы

Ответ 1

Я использовал 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>

Ответ 2

Причина, по которой он не печатает весь PDF, заключается в том, что он фиксируется в iframe и высоте. Чтобы распечатать весь PDF, вам понадобится высота iframe, чтобы соответствовать ее высоте содержимого (в iframe не должно быть полосы прокрутки).

Другой вариант - напечатать только iframe. Добавьте id в iFrame:

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

Сфокусируйте iframe и распечатайте его содержимое:

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

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

Ответ 3

Попробуйте это, он включает некоторые 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>

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");

Это должно сработать. Позвольте мне теперь, если я не