我有一个名为 contract 的变量，其中包含从服务器接收的一些 HTML 内容。打印此变量的最简单方法是什么？通过打印，我的意思是点击我的按钮将:在 Chrome 中弹出打印窗口，其中显示我的变量内容的文档(因为它已经是使用 CSS 分页媒体格式化的 HTML，所以它看起来可以打印/保存 pdf)
var contract = <HTML content>
$('#print').click(function () {
<Pops up the print window of chrome with 'contract' opened>
})
我浏览了建议使用 iframe 的答案( here 、 here )和建议弹出窗口的答案( here )，但说实话，这有点令人困惑，因为它不应该真的会很困难。 您能否建议一种简单的方法来完成此任务？
最佳答案
假设 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>
关于javascript - 从 javascript 打印变量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34226352/