开需要的科目课本或资料文章
或者直接复制粘贴打印。
领取免费课本、资料、同步教学视频。
多时候,你想给一个按钮,在网页上通过一个实际的打印机打印出网页的内容。
JavaScript可使用window对象的print函数就可以实现这样的功能。
当执行JavaScript的print函数window.print()将会打印当前页面。可以使用onclick事件如下直接调用此函数:
<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Print" onclick="window.print()" />
</form>
</body>1234567891011复制代码类型:[javascript]
这将产生以下按钮,打印此页。
这符合打印出来的页面,但这个不是一个推荐的方式。打印机友好的页面实际上只是一个文本,没有图像,图形或广告页面。
可以使用以下页式打印机友好方式:
使页面的副本,并离开了不需要的文本和图形,然后从原始链接到该打印机友好的页面。
如果你不想让页面的额外副本,那么可以使用像适当的注释标记打印文本 <!-- PRINT STARTS HERE -->..... <!-- PRINT ENDS HERE --> 然后你可以使用PERL或其他脚本在后台清除打印文本和显示进行最后的打印。网站使用同样的方法给打印设备对我们网站的访客。
如果没有人在提供上述设备,那么你可以使用浏览器的标准工具栏让网页打印出来。按照链接如下:
File --> Print --> Click OK button.
开课吧广场-人才学习交流平台
、官网介绍
Print.js 主要是为了帮助我们直接在应用程序中打印 PDF 文件,无需离开界面,也不使用嵌入。对于用户不需要打开或下载 PDF 文件,而只需要打印它们的独特情况。
例如,当用户请求打印在服务器端生成的报表时,这很有用的一种情况。这些报告以 PDF 文件的形式发回。在打印这些文件之前,无需打开它们。Print.js提供了一种在我们的应用程序中打印这些文件的快速方法。
官网地址:https://printjs.crabbly.com/
二、安装使用
使用 npm 进行安装
npm install print-js --save
引用
import printJS from 'print-js'
三、项目示例
vue文件
<template>
<div id="app">
<div id="divPrint" class="mainbox print">
<!-- <div style="font-size: 25px; margin-top: 80px" align="center">
整改通知单
</div> -->
<div align="center" style="margin: 0; padding: 0; width: 100%">
<table>
<tr style="border: none">
<td colspan="2">工程项目:xx</td>
<td style="text-align: right; padding-left: 10px;" colspan="2">编号:xx</td>
</tr>
<tr style="border: none">
<td colspan="2">整改单位:xx</td>
<td style="text-align: right; padding-left: 10px;" colspan="2">编号:xx</td>
</tr>
<tr style="border: none">
<td colspan="2">整改内容:xx</td>
<td style="text-align: right; padding-left: 10px;" colspan="2">编号:xx</td>
</tr>
</table>
</div>
</div>
<div style="margin-top: 20px; text-align: center">
<button @click="print()">pdf打印</button>
</div>
</div>
</template>
<script>
import printJS from "print-js";
export default {
name: "printing",
data() {
return {};
},
methods: {
print() {
printJS({
printable: "divPrint", // 标签元素id
type: "html", // 打印类型
header: "整改通知单", // '表单名称',
targetStyles: ["*"],
style: "@page {margin:0 10mm};", // 可选-打印时去掉眉页眉尾
ignoreElements: ["no-print"], // 接受打印父 html 元素时应忽略的 html id 数组。
properties: null,
});
},
},
};
</script>
<style lang="scss">
#app {
width: 100%;
font-family: "Avenir", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
.mainbox {
width: 100%;
margin: 0 auto;
}
}
</style>
点击打印按钮后,出现PDF预览。
pdf文件打印预览
最后再点击打印即可实现PDF文件打印。
*请认真填写需求信息,我们会在24小时内与您取得联系。