打印從JavaScript

一個變量我有一個名爲contract變量，具有從服務器接收一些HTML內容。什麼是讓這個變量被打印的最簡單的方法？通過打印我的意思是打我的按鈕會：在Chrome中打印窗口彈出與顯示我的變量的內容（因爲它已經與CSS頁面媒體格式化的HTML，它看起來準備好要打印/保存的PDF）打印從JavaScript

文檔

var contract = <HTML content> 
$('#print').click(function() { 
    <Pops up the print window of chrome with 'contract' opened> 
})

我已通過建議使用I幀（here，here）和答案這表明窗口的彈出窗口（here），但說實話，這是一個有點混亂的答案瀏覽，因爲它實在不應該是很困難的。你能否建議一個簡單的方法來完成這件事？

來源

2015-12-11 Core_Dumped

請看看：http://stackoverflow.com/questions/16894683/how-to-打印的HTML內容的點擊對的一鍵式但並非該頁面 –

該解決方案在這裏：http://stackoverflow.com/questions/468881/print-div-id-printarea-div-只有romaninsh看起來是你想要的。基本上它會打開一個新窗口，添加內容，然後調用打印功能。你不能直接打印變量，因爲它不能這樣工作。 – scrappedcola

CSS打印介質...添加您想要在當前頁面上打印的塊。添加CSS僅在頁面打印時顯示該塊。很容易，不需要彈出窗口。 – epascarello

比方說，在HTML的內容有以下幾點：

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Contract</title> 
    </head> 
    <body> 
    <h1>Contract</h1> 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam eum soluta ullam, in, qui iusto omnis rerum nisi alias, ducimus, dignissimos rem deserunt excepturi illo sint unde harum quas! Id.</p> 
    <p>Signed: <br> Dated:</p> 
    </body> 
</html>

讓他們存儲在一個值，說myHTML。

$("input").click(function() { 
    myHTML = ''; 
    myWin = window.open("about:blank", "_blank"); 
    myWin.document.write(myHTML); 
    myWin.print(); 
});

更新使用CSS

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="UTF-8" /> 
    <title>Print Preview</title> 
    <style> 
     /* Start Praveen's Reset for Fiddle ;) */ 
     * {font-family: 'Segoe UI'; margin: 0; padding: 0; list-style: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} 
     h1, h2, h3, h4, h5, h6, strong, b, th {font-weight: 600;} 
     textarea, tt, pre, pre *, code, code * {font-family: 'Consolas';} 
     /* End Praveen's Reset for Fiddle ;) */ 

     h1 {font-size: 1.2em;} 
     h1, p {margin: 0 0 10px; line-height: 1.5;} 
     .logo img {display: block; max-width: 75%; margin: 0 auto;} 

     #dont-print {padding: 10px;} 
     #dont-print h1 {background-color: #eef; padding: 5px 10px; margin: -10px -10px 10px;} 
     #print-this {display: none;} 

     @media print { 
     #dont-print {display: none;} 
     #print-this {margin: 10px; display: block;} 
     } 
    </style> 
    </head> 
    <body> 
    <div id="dont-print"> 
     <div class="logo"> 
     <img src="https://www.microsoft.com/about/corporatecitizenship/en-us/downloadhandler.ashx?Id=07-03-02" alt="" /> 
     </div> 
     <h1>Contract</h1> 
     <p>Print this. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia dicta id, doloribus perspiciatis nam fugiat consequatur at inventore similique error excepturi praesentium vitae alias voluptatibus modi officiis atque dignissimos debitis.</p> 
     <p>Signed: <br>Dated:</p> 
    </div> 
    <div id="print-this"> 
     <h1>Contract</h1> 
     <p>Print this. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Mollitia dicta id, doloribus perspiciatis nam fugiat consequatur at inventore similique error excepturi praesentium vitae alias voluptatibus modi officiis atque dignissimos debitis.</p> 
     <p>Signed: <br>Dated:</p> 
    </div> 
    </body> 
</html>

現場演示：http://output.jsbin.com/vuzixonajo

來源

2015-12-11 15:02:58

我試過這個同樣的問題。它在打印窗口中提供空白頁面。似乎window.print在Chrome中不起作用，我想。 http://stackoverflow.com/a/473270/1550852說在同一行上的東西，但使用iframes，我不完全知道如何使用它。 :( –

然後@Core_Dumped我猜你是具有CSS的解決方案更好的不錯。我會更新的答案，讓你知道。 –

我已經嘗試CSS的解決方案，並解釋它們如何並不在我對這個問題的意見之一工作。 –

打印從JavaScript

回答

相關問題