blocks|key|116560|text|试试这个，它包含了一些JS，但这总是不错的。HTML：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|116561|<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>|code-block|syntax|javascript|116562|JS：|116563|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");|116564|这应该是可行的。如果我没有，现在就让我来吧|116565|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|R|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|S|8|@]|9|@]|A|$]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>Try this, it includes some JS but thats always good.
HTML:</p>

<pre><code>&lt;body&gt;
        &lt;h3&gt;MUST BE PRINTED&lt;/h3&gt;
        &lt;p&gt; MUST BE PRINTED&lt;/p&gt;
        &lt;div id="pdfRenderer"&gt;&lt;/div&gt;
        &lt;h3&gt;MUST BE PRINTED&lt;/h3&gt;
        &lt;p&gt; MUST BE PRINTED&lt;/p&gt;
    &lt;/body&gt;
</code></pre>

<p>JS:</p>

<pre><code>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");
</code></pre>

<p>This should work. Let me now if i doesnt</p>


blocks|key|2667420|text|它没有打印整个PDF的原因是因为它在iframe中，并且高度是固定的。为了打印整个PDF，你需要iframe的高度来匹配它的内容高度(iframe上应该没有滚动条)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2667421|另一种选择是仅打印iframe。将id添加到您的iFrame：|2667422|<iframe+id="toPrint"+class="toPrint"></iframe>|code-block|syntax|javascript|2667423|聚焦iframe并打印其内容：|2667424|var+pdfFrame+=+document.getElementById("toPrint").contentWindow;

pdfFrame.focus();
pdfFrame.print();|2667425|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>The reason it's not printing the whole PDF is because it's in an iframe and the height is fixed. In order to print the whole PDF you'll need the iframe height to match its content height (<em>there should be no scrollbar on the iframe</em>).</p>

<p>Another option is to print only the iframe. Add id to your iFrame:</p>

<pre><code>&lt;iframe id="toPrint" class="toPrint"&gt;&lt;/iframe&gt;
</code></pre>

<p>Focus the iframe and print its content:</p>

<pre><code>var pdfFrame = document.getElementById("toPrint").contentWindow;

pdfFrame.focus();
pdfFrame.print();
</code></pre>


blocks|key|118640|text|使用https://github.com/itext/itextsharp+itextsharp或https://github.com/MrRio/jsPDF+jsPDF。它很容易通过插件使用|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|118641|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/itext/itextsharp|1|https://github.com/MrRio/jsPDF^0|2|Z|0|1D|U|1|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@$A|O|B|P|1|Q]|$A|R|B|S|1|T]]|C|$]]|$1|D|3|-4|5|6|7|U|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]|L|$5|G|H|I|C|$J|M]]]]

<p>Use <a href="https://github.com/itext/itextsharp" rel="nofollow">https://github.com/itext/itextsharp</a>  itextsharp or <a href="https://github.com/MrRio/jsPDF" rel="nofollow">https://github.com/MrRio/jsPDF</a>  jsPDF. It is easy to use by plugin </p>


blocks|key|2667445|text|我用Mozilla的pdf.js解决了我的问题。它将pdf文件呈现在html5画布上，因此可以根据需要打印整个html页面。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2667446|下面是代码(credit)：|offset|length|2667447|​|2667448|<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+%7C%7C+{+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%2B%2B)
++++++++++++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>|code-block|syntax|javascript|2667449|2667450|entityMap|0|LINK|mutability|MUTABLE|url|https://gist.github.com/fcingolani/3300351^0|0|6|6|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|11|8|@]|9|@]|A|$K|L]]|$1|M|3|G|5|6|7|12|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|O|$P|$5|Q|R|S|A|$T|U]]]]

<p>I used Mozilla's pdf.js to solve my problem.
It renders the pdf file on html5 canvas thus it allows to print the whole html page as required.</p>

<p>Here is the code (<a href="https://gist.github.com/fcingolani/3300351" rel="nofollow">credit</a>): </p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;html&gt;
&lt;body&gt;

&lt;script type="text/javascript" src="https://raw.github.com/mozilla/pdf.js/gh-pages/build/pdf.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
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 &lt;= pdfDoc.numPages; num++)
            pdfDoc.getPage(num).then(renderPage);
    }
    PDFJS.disableWorker = true;
    PDFJS.getDocument(url).then(renderPages);
}   
&lt;/script&gt; 
        &lt;h3&gt;MUST BE PRINTED&lt;/h3&gt;
        &lt;p&gt; MUST BE PRINTED&lt;/p&gt;
		&lt;div id="holder"&gt;&lt;/div&gt;
        &lt;h3&gt;MUST BE PRINTED&lt;/h3&gt;
        &lt;p&gt; MUST BE PRINTED&lt;/p&gt;

&lt;script type="text/javascript"&gt;
renderPDF('yourFile.pdf', document.getElementById('holder'));
&lt;/script&gt;  

&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2667452|text|这里有一个使用javascript的更简单的解决方案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2667453|<body>
++++++++<h3+id='first_h3'>MUST+BE+PRINTED</h3>
++++++++<p+id+='first_paragraph'>+MUST+BE+PRINTED</p>
++++++++<div+id="pdfRenderer"></div>
++++++++<h3+id='second_h3'>MUST+BE+PRINTED</h3>
++++++++<p+id='second_paragraph'>+MUST+BE+PRINTED</p>

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

</body>

<script>

+pages+=[]+//+initiate+an+empty+list+here

function+printPage()+{

var+first_h3+=+document.getElementById('first_h3');
//+get+the+first+h3+tag+and
//+then+push+its+innerHTML+into+the+list
+++pages.push(first_h3.innerHTML);+

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

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

var+second_h3+=+document.getElementById('second_h3');
//+get+the+second+h3+tag+and
//+then+push+its+innerHTML+into+the+list
+++pages.push(second_h3.innerHTML);+

var+second_paragraph+=+document.getElementById('second_paragraph');
//+get+the+second+paragraph+and
//+then+push+its+innerHTML+into+the+list
+++pages.push(second_paragraph.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+different+parts+in+the+exact+order+we+pushed+them+into+the+list.
window.print();
}+
else+{
//+do+nothing
}


}
</script>|code-block|syntax|javascript|2667454|有了这个解决方案，避免了iframe超过一页就被切断的问题。其次，即使你有多个iframe，你也只能得到一个打印对话框。|2667455|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Here is a simpler solution using javascript.</p>

<pre><code>&lt;body&gt;
        &lt;h3 id='first_h3'&gt;MUST BE PRINTED&lt;/h3&gt;
        &lt;p id ='first_paragraph'&gt; MUST BE PRINTED&lt;/p&gt;
        &lt;div id="pdfRenderer"&gt;&lt;/div&gt;
        &lt;h3 id='second_h3'&gt;MUST BE PRINTED&lt;/h3&gt;
        &lt;p id='second_paragraph'&gt; MUST BE PRINTED&lt;/p&gt;

&lt;input type="submit" value="Print All"
  onclick="javascript:printPage()"
 /&gt;

&lt;/body&gt;

&lt;script&gt;

 pages =[] // initiate an empty list here

function printPage() {

var first_h3 = document.getElementById('first_h3');
// get the first h3 tag and
// then push its innerHTML into the list
   pages.push(first_h3.innerHTML); 

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

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

var second_h3 = document.getElementById('second_h3');
// get the second h3 tag and
// then push its innerHTML into the list
   pages.push(second_h3.innerHTML); 

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

if (pages &amp;&amp; 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 different parts in the exact order we pushed them into the list.
window.print();
} 
else {
// do nothing
}


}
&lt;/script&gt;
</code></pre>

<p>With this solution avoid the problem of the iframe being cut off if it exceeds one page. Secondly, you get only one print dialogue box even if you have multiple iframes.</p>


<p>I've got an assignment to embed relatively small pdf file inside html page and print the entire html pade including the pdf file inside the iframe.
Here is the structure of my html page:
<a href="https://i.stack.imgur.com/1kJZn.png" rel="noreferrer"><img src="https://i.stack.imgur.com/1kJZn.png" alt="enter image description here"></a></p>

<p>Here is my code:
<div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@media print{
	body * {display:block;}
    .toPrint{display:block; border:0; width:100%; min-height:500px}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body&gt;
    &lt;button onclick="window.print()"&gt;Print&lt;/button&gt;

	&lt;h3&gt;MUST BE PRINTED&lt;/h3&gt;
    &lt;p&gt; MUST BE PRINTED&lt;/p&gt;
    &lt;iframe class="toPrint" src="https://nett.umich.edu/sites/default/files/docs/pdf_files_scan_create_reducefilesize.pdf" style="width:100%; height:97vh;"&gt;&lt;/iframe&gt;
	&lt;h3&gt;MUST BE PRINTED&lt;/h3&gt;
    &lt;p&gt; MUST BE PRINTED&lt;/p&gt;
&lt;/body&gt;</code></pre>
</div>
</div>
</p>

<p>Currently I'm printing the page using css @media query. But unfortunately this media query prints the pdf's <strong>first page only</strong>.</p>

<p>What can I do print the entire pdf file? </p>


Print whole HTML page including pdf file inside iframe

我的任务是在html页面中嵌入相对较小的pdf文件，并打印整个html pade，包括iframe中的pdf文件。下面是我的html页面的结构：​下面是我的代码：@media print{body * {display:block;}    .toPrint{display:block; border:0; width...

问打印整个HTML页面，包括iframe内的pdf文件
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问打印整个HTML页面，包括iframe内的pdf文件EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问打印整个HTML页面，包括iframe内的pdf文件
EN