便宜做網(wǎng)站灰色行業(yè)推廣平臺網(wǎng)站
前端依賴10-插件"print-js": “^1.6.0”
一：簡介
print-js 是一個 Vue.js 插件，用于在 Vue.js 項目中實現(xiàn)打印功能。它依賴于 print-js 庫，所以需要安裝這個庫。
能實現(xiàn)以下功能：
- PDF打印（默認）
- 網(wǎng)頁打印
- 圖像打印
- JSON打印
| 參數(shù) | 默認值 | 描述 |
|---|---|---|
| printable | null | 文檔來源：pdf 或圖片 url、html 元素 id 或 json 數(shù)據(jù)對象。 |
| type | ‘pdf’ | 可打印類型?？捎玫拇蛴∵x項有：pdf、html、image、json 和 raw-html。 |
| header | null | 用于與 HTML、圖像或 JSON 打印的可選標題。它將被放置在頁面頂部。此屬性將接受文本或原始 HTML。 |
| headerStyle | ‘font-weight: 300;’ | 要應(yīng)用于標題文本的可選標題樣式。 |
| maxWidth | 800 | 最大文檔寬度（以像素為單位）。根據(jù)需要更改此設(shè)置。在打印 HTML、圖像或 JSON 時使用。 |
| css | null | 應(yīng)用于正在打印的 html 的 css 文件 URL。值可以是具有單個 URL 的字符串或具有多個 URL 的數(shù)組。 |
| style | null | 自定義樣式的字符串。應(yīng)用于正在打印的 html。 |
| scanStyles | true | 設(shè)置為 false 時，庫將不會處理應(yīng)用于正在打印的 html 的樣式。在使用 css 參數(shù)時很有用。 |
| targetStyle | null | 默認情況下，庫僅在打印 HTML 元素時處理某些樣式。此選項允許您傳遞要處理的樣式數(shù)組。例如：[‘padding-top’, ‘border-bottom’] |
| targetStyles | null | 與 targetStyle 相同，但是，這將處理任意范圍的樣式。例如：[‘border’, ‘padding’]，將包括’border-bottom’、‘border-top’、‘border-left’、‘border-right’、‘padding-top’等。也可以通過 [’*'] 來處理所有樣式。 |
| ignoreElements | [ ] | 傳入打印父 html 元素時應(yīng)忽略的 html id 數(shù)組。使其不打印。 |
| properties | null | 打印 JSON 時使用。這些是對象屬性名稱。 |
| gridHeaderStyle | ‘font-weight: bold;’ | 打印 JSON 數(shù)據(jù)時網(wǎng)格標題的可選樣式。 |
| gridStyle | ‘border: 1px solid lightgray; margin-bottom: -1px;’ | 打印 JSON 數(shù)據(jù)時網(wǎng)格行的可選樣式。 |
| repeatTableHeader | TRUE | 打印 JSON 數(shù)據(jù)時使用。設(shè)置為 false 時，數(shù)據(jù)表標題將僅顯示在第一頁。 |
| showModal | null | 啟用此選項可在檢索或處理大型 PDF 文件時顯示用戶反饋。 |
| modalMessage | Retrieving Document…’ | 當 showModal 設(shè)置為 true 時向用戶顯示的消息。 |
| onLoadingStart | null | 加載 PDF 時要執(zhí)行的功能 |
| onLoadingEnd | null | 加載 PDF 后要執(zhí)行的功能 |
| documentTitle | Document’ | 打印 html、圖像或 json 時，這將顯示為文檔標題。 |
| fallbackPrintable | null | 打印 pdf 時，如果瀏覽器不兼容（檢查瀏覽器兼容性表），庫將在新選項卡中打開 pdf。這允許您傳遞要打開的不同pdf文檔，而不是在printable中傳遞的原始文檔。如果您在備用pdf文件中注入javascript，這可能很有用。 |
| onPdfOpen | null | 打印 pdf 時，如果瀏覽器不兼容（檢查瀏覽器兼容性表），庫將在新選項卡中打開 pdf?？梢栽诖颂巶鬟f回調(diào)函數(shù)，該函數(shù)將在發(fā)生這種情況時執(zhí)行。在某些情況下，如果要處理打印流、更新用戶界面等，它可能很有用。 |
| onPrintDialogClose | null | 在瀏覽器打印對話框關(guān)閉后執(zhí)行的回調(diào)函數(shù)。 |
| onError | error => throw error | 發(fā)生錯誤時要執(zhí)行的回調(diào)函數(shù)。 |
| base64 | false | 在打印作為 base64 數(shù)據(jù)傳遞的 PDF 文檔時使用。 |
| honorMarginPadding (已棄用) | true | 這用于保留或刪除正在打印的元素中的填充和邊距。有時這些樣式設(shè)置在屏幕上很棒，但在打印時看起來很糟糕。您可以通過將其設(shè)置為 false 來將其刪除。 |
| honorColor (已棄用) | false | 若要以彩色打印文本，請將此屬性設(shè)置為 true。默認情況下，所有文本都將以黑色打印。 |
| font(已棄用) | TimesNewRoman’ | 打印 HTML 或 JSON 時使用的字體。 |
| font_size (已棄用) | 12pt’ | 打印 HTML 或 JSON 時使用的字體大小。 |
| imageStyle(已棄用) | width:100%;’ | 打印圖像時使用。接受具有要應(yīng)用于每個圖像的自定義樣式的字符串。 |
二：官網(wǎng)
https://www.npmjs.com/package/print-js
三：常規(guī)JS使用
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="https://printjs-4de6.kxcdn.com/print.min.js"></script><link rel="stylesheet" type="text/css" href="https://printjs-4de6.kxcdn.com/print.min.css"><script>someJSONdata = [{name: 'John Doe',email: 'john@doe.com',phone: '111-111-1111'},{name: 'Barry Allen',email: 'barry@flash.com',phone: '222-222-2222'},{name: 'Cool Dude',email: 'cool@dude.com',phone: '333-333-3333'}]</script>
</head>
<body>
<button type="button" onclick="printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})">Print JSON Data
</button>
</body>
</html>
四：VUE2使用
npm install print-js
<template><div><button @click="printDocument">Print</button><div id="contentToPrint"><!-- 這里是你想要打印的內(nèi)容 --><h1>Hello, PrintJS!</h1><p>This is the content to be printed.</p></div></div>
</template><script>
export default {methods: {printDocument() {const printJS = require('print-js')printJS({printable:'contentToPrint',type: 'html'})}}
}
</script>
在上述示例中，我們有一個按鈕，點擊按鈕將觸發(fā) printDocument 方法來執(zhí)行打印操作。我們在 div 元素中定義了一個 ID 為 contentToPrint 的容器，其中包含了我們要打印的內(nèi)容。當點擊按鈕時，printDocument 方法將使用 print-js 庫來打印具有 ID 為 contentToPrint 的元素。
在 printDocument 方法中，我們使用 require 函數(shù)來動態(tài)加載 print-js 庫，并調(diào)用 printJS 函數(shù)來執(zhí)行打印操作。第一個參數(shù)傳遞了要打印的內(nèi)容的 DOM 元素的 ID（這里是 contentToPrint），第二個參數(shù)傳遞了打印類型（這里是 ‘html’）。
確保在項目中安裝了 print-js（使用 npm 或 yarn），并將示例代碼放在 Vue 組件中，以便在 Vue 2 中使用 print-js。記得替換 <h1>Hello, PrintJS!</h1> 和 <p>This is the content to be printed.</p> 為你實際想要打印的內(nèi)容。
通過點擊按鈕，你應(yīng)該能夠觸發(fā)打印操作并將指定的內(nèi)容打印出來。
注意： 上邊的參數(shù) ‘html’ 必須有，否則會報錯：
因為默認打印是pdf的，而我們剛才的形式是html的格式
五：VUE3使用
npm install print-js
<template><div><button @click="printDocument">Print</button><div ref="contentToPrint"><!-- 這里是你想要打印的內(nèi)容 --><h1>Hello, PrintJS!</h1><p>This is the content to be printed.</p></div></div>
</template><script>
import printJS from 'print-js'export default {methods: {printDocument() {printJS({printable: this.$refs.contentToPrint,type: 'html'})}}
}
</script>在上述示例中，我們有一個按鈕，點擊按鈕將觸發(fā) printDocument 方法來執(zhí)行打印操作。我們使用 ref 綁定將 contentToPrint 指定為要打印的內(nèi)容的容器。
在 printDocument 方法中，我們使用 print-js 庫的對象參數(shù)形式來進行打印。我們傳遞了一個包含 printable 和 type 屬性的對象作為參數(shù)。printable 屬性指定要打印的內(nèi)容，我們使用 this.$refs.contentToPrint 引用到 Vue 組件中的 contentToPrint 元素。type 屬性指定打印類型為 'html'。
確保在項目中安裝了 print-js（使用 npm 或 yarn），并將示例代碼放在 Vue 組件中，以便在 Vue 3 中使用 print-js。記得替換 <h1>Hello, PrintJS!</h1> 和 <p>This is the content to be printed.</p> 為你實際想要打印的內(nèi)容。
通過點擊按鈕，你應(yīng)該能夠觸發(fā)打印操作并將指定的內(nèi)容打印出來。如果有任何其他問題，請隨時提問。
六、其他Type示例
1.pdf
printJS('docs/printjs.pdf')
// 或
printJS({printable:'docs/printjs.pdf', type:'pdf', showModal:true})2.image單個圖像
printJS('images/print-01-highres.jpg', 'image')
// 或
printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'})3.image多個圖像
printJS({
printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],
type: 'image',
header: 'Multiple Images',
imageStyle: 'width:50%;margin-bottom:20px;'
})4.json
someJSONdata = [{name: 'John Doe',email: 'john@doe.com',phone: '111-111-1111'},{name: 'Barry Allen',email: 'barry@flash.com',phone: '222-222-2222'},{name: 'Cool Dude',email: 'cool@dude.com',phone: '333-333-3333'}]printJS({printable: someJSONdata,properties: ['name', 'email', 'phone'],type: 'json',gridHeaderStyle: 'color: red; border: 2px solid #3971A5;',gridStyle: 'border: 2px solid #3971A5;'
})