整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
開需要的科目課本或資料文章
或者直接復(fù)制粘貼打印。
領(lǐng)取免費課本、資料、同步教學(xué)視頻。
多時候，你想給一個按鈕，在網(wǎng)頁上通過一個實際的打印機打印出網(wǎng)頁的內(nèi)容。
JavaScript可使用window對象的print函數(shù)就可以實現(xiàn)這樣的功能。
當(dāng)執(zhí)行JavaScript的print函數(shù)window.print()將會打印當(dāng)前頁面。可以使用onclick事件如下直接調(diào)用此函數(shù)：
<head>
<script type="text/javascript">
<!--
//-->
</script>
</head>
<body>
<form>
<input type="button" value="Print" onclick="window.print()" />
</form>
</body>1234567891011復(fù)制代碼類型：[javascript]這將產(chǎn)生以下按鈕，打印此頁。
這符合打印出來的頁面，但這個不是一個推薦的方式。打印機友好的頁面實際上只是一個文本，沒有圖像，圖形或廣告頁面。
可以使用以下頁式打印機友好方式：
使頁面的副本，并離開了不需要的文本和圖形，然后從原始鏈接到該打印機友好的頁面。
如果你不想讓頁面的額外副本，那么可以使用像適當(dāng)?shù)淖⑨寴?biāo)記打印文本 <!-- PRINT STARTS HERE -->..... <!-- PRINT ENDS HERE --> 然后你可以使用PERL或其他腳本在后臺清除打印文本和顯示進行最后的打印。網(wǎng)站使用同樣的方法給打印設(shè)備對我們網(wǎng)站的訪客。
如果沒有人在提供上述設(shè)備，那么你可以使用瀏覽器的標(biāo)準(zhǔn)工具欄讓網(wǎng)頁打印出來。按照鏈接如下：
File --> Print --> Click OK button.
開課吧廣場-人才學(xué)習(xí)交流平臺
、官網(wǎng)介紹
Print.js 主要是為了幫助我們直接在應(yīng)用程序中打印 PDF 文件，無需離開界面，也不使用嵌入。對于用戶不需要打開或下載 PDF 文件，而只需要打印它們的獨特情況。
例如，當(dāng)用戶請求打印在服務(wù)器端生成的報表時，這很有用的一種情況。這些報告以 PDF 文件的形式發(fā)回。在打印這些文件之前，無需打開它們。Print.js提供了一種在我們的應(yīng)用程序中打印這些文件的快速方法。
官網(wǎng)地址：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">整改內(nèi)容：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", // 標(biāo)簽元素id
type: "html", // 打印類型
header: "整改通知單", // '表單名稱',
targetStyles: ["*"],
style: "@page {margin:0 10mm};", // 可選-打印時去掉眉頁眉尾
ignoreElements: ["no-print"], // 接受打印父 html 元素時應(yīng)忽略的 html id 數(shù)組。
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>點擊打印按鈕后，出現(xiàn)PDF預(yù)覽。
pdf文件打印預(yù)覽
最后再點擊打印即可實現(xiàn)PDF文件打印。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
