JavaScript实现
打印功能有多种方法：
### 基本
打印与局部
打印
可以通过`window.print()`方法实现基本的页面
打印，若要实现局部
打印，可设置
打印区域的开始和结束标记。示例代码如下：
```html
<input id="btnPrint" type="button" value="
打印" onclick="javascript:window.print();" />
<input id="btnPrint" type="button" value="
打印预览" onclick="prev
iew(1)" />
<style type="text/css" media=print>
.noprint{display : none }
</style>
<p
class="noprint">不需要
打印的地方</p>
<script>
function prev
iew(oper) {
if (oper < 10) {
bdhtml = window.document.body.innerHTML; // 获取当前页的html代码
sprnstr = "<!--startprint" + oper + "-->"; // 设置
打印开始区域
eprnstr = "<!--endprint" + oper + "-->"; // 设置
打印结束区域
prnhtml = bdhtml.substring(bdhtml.indexOf(sprnstr) + 18); // 从开始代码向后取html
prnhtml = prnhtml.substring(0, prnhtml.indexOf(eprnstr)); // 从结束代码向前取html
window.document.body.innerHTML = prnhtml;
window.print();
window.document.body.innerHTML = bdhtml;
} else {
window.print();
}
}
</script>
<p>XXXXX</p>
<!--startprint1-->要
打印的内容<!--endprint1-->
```
通过以上代码，点击“
打印”按钮会
打印整个页面，点击“
打印预览”按钮会
打印指定区域的内容，不需要
打印的内容可以添加`noprint`类隐藏起来 [^1]。
### 利用样式隐藏不需要
打印的内容
在CSS里添加`@media print`规则，将不需要
打印的元素设置为`display: none`，在HTML里给这些元素添加`
class="noprint"`类，
打印按钮使用`window.print()`触发
打印 [^2]。
```css
@media print {
.noprint{
display: none;
}
}
```
```html
<p
class="noprint">不需要
打印的内容</p>
<button onclick="window.print()">
打印</button>
```
### 使用Print.
js打印PDF文件
Print.
js的主要目的是帮助在应用程序中直接
打印PDF文件，无需离开界面，也不使用嵌入。对于只需
打印而无需用户打开或下载PDF文件的情况很有用，比如
打印服务器端生成的报告 [^3]。
使用步骤：
1. 下载并安装Print.
js。
###
打印表格数据
可以通过创建新窗口，将表格数据写入新窗口并
打印，示例代码如下 [^4]：
```html
<el-button @click="print">
打印</el-button>
<script>
tabData = [{log: '123468461354685'}];
function print() {
//
打印 打开新的标签页 点击取消关闭新页面返回当前页面
var openWin = window.open();
var str = "<table style='color:#333;font-size:12px;' cellspacing='0' cellpadding='5'><tr><th style='font-weight:normal;text-align:left;border:1px solid #333'>时间</th></tr>";
for (let i = 0; i < tabData.length; i++) {
str += '<tr><td style="border:1px solid #333;border-top:0;">' + tabData[i].log + '</td></tr>';
}
str += '</table>';
openWin.document.write(str);
openWin.document.close();
openWin.print();
openWin.close();
}
</script>
```
扫一扫
141
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
