頁面區域打印vue3-print-nb

Web 實現頁面打印

安裝

官網地址：https://github.com/Power-kxLee/vue3-print-nb

// 安裝 打印組件

npm install vue-print-nb --save

引用

vue2引用

import Print from 'vue-print-nb'
// 全局引用
Vue.use(Print);

// 或者

// 單組件引用
import print from 'vue-print-nb'
// 在自定義指令中注冊
directives: {
    print   
}

vue3引用

// 全局引用
import { createApp } from 'vue'
import App from './App.vue'
import print from 'vue3-print-nb'
const app = createApp(App)
app.use(print)
app.mount('#app')

// 或者

// 單組件引用
import print from 'vue3-print-nb'
// 在自定義指令中注冊
directives: {
    print   
}

API

屬性	類型	默認值	必要	可選值	描述
id	String	-	是	-	范圍打印 ID（如果設置url則可以不設置id）
url	String	-	否	-	打印指定的 URL。（不允許同時設置ID
popTitle	String	-	否	-	默認使用瀏覽器標簽名，為空時為undefined
standard	String	HTML5	否	html5，loose，strict	打印的文檔類型
extraHead	String	-	否	-	在節點中添加 DOM 節點，并用,(Print local range only)分隔多個節點
extraCss	String	-	否	-	新的 CSS 樣式表，并使用,（僅打印本地范圍）分隔多個節點
openCallback	Function	-	否	-	調用打印工具成功回調函數
closeCallback	Function	-	否	-	關閉打印工具成功回調函數
beforeOpenCallback	Function	-	否	-	調用打印工具前的回調函數
preview	Boolean	false	否	true,false	預覽工具
previewTitle	String	-	否	-	‘打印預覽’
previewPrintBtnLabel	String	打印	否	-	打印按鈕名稱
previewBeforeOpenCallback	Function	-	否	-	預覽打開前回調函數
previewOpenCallback	Function	-	否	-	預覽打開回調函數
clickMounted	Function	-	否	-	點擊打印按鈕回調函數

示例代碼

全頁面打印

<button v-print>打印整個頁面</button>

局部打印（Tip：被打印的區域需要被渲染出來并且不能被隱藏才可以打印）

<template>
    <div>
        <button v-print="printOption">NB打印</button>
        <div id="nbprint">
            <table>
                <tr>
                    <th>序號</th>
                    <th>姓名</th>
                    <th>年齡</th>
                    <th>性別</th>
                    <th>手機</th>
                    <th>郵箱</th>
                    <th>地址</th>
                    <th>工齡</th>
                    <th>崗位</th>
                    <th>薪資</th>
                </tr>
                <tr v-for="(item, index) in list" key="index">
                    <td>{{ index + 1}}</td>
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.sex }}</td>
                    <td>{{ item.phone }}</td>
                    <td>{{ item.mail }}</td>
                    <td>{{ item.address }}</td>
                    <td>{{ item.workAge }}</td>
                    <td>{{ item.jobs }}</td>
                    <td>{{ item.salary }}</td>
                </tr>
            </table>
        </div>
    </div>
</template>

<script>
    export default {
        name: "nb-print",
        data() {
            return {
                printOption: {
                    id: 'nbprint', // 打印元素的id 不需要攜帶#號
                    popTitle: '員工信息' // 頁眉標題 默認瀏覽器標題 空字符串時顯示undefined 使用html語言
                },
                list: [{
                        name: "阿噠",
                        age: 26,
                        sex: "男",
                        phone: "12345678901",
                        mail: "mmm@mmm.com",
                        address: "藍星星國馬爾哈哈海島",
                        workAge: 2,
                        jobs: "研發",
                        salary: "1.8k"
                    },
                    {
                        name: "阿榮",
                        age: 24,
                        sex: "男",
                        phone: "12345678901",
                        mail: "mmm@mmm.com",
                        address: "藍星星國馬爾哈哈海島",
                        workAge: 1,
                        jobs: "研發",
                        salary: "1.8k"
                    },
                    {
                        name: "阿豪",
                        age: 26,
                        sex: "男",
                        phone: "12345678901",
                        mail: "mmm@mmm.com",
                        address: "藍星星國馬爾哈哈海島",
                        workAge: 5,
                        jobs: "產品",
                        salary: "1.8k"
                    },
                    {
                        name: "阿晨",
                        age: 29,
                        sex: "男",
                        phone: "12345678901",
                        mail: "mmm@mmm.com",
                        address: "藍星星國馬爾哈哈海島",
                        workAge: 9,
                        jobs: "設計",
                        salary: "1.8k"
                    },
                    {
                        name: "阿震",
                        age: 30,
                        sex: "男",
                        phone: "12345678901",
                        mail: "mmm@mmm.com",
                        address: "藍星星國馬爾哈哈海島",
                        workAge: 7,
                        jobs: "銷售",
                        salary: "1.8k"
                    },
                    {
                        name: "阿鋒",
                        age: 21,
                        sex: "男",
                        phone: "12345678901",
                        mail: "mmm@mmm.com",
                        address: "藍星星國馬爾哈哈海島",
                        workAge: 0.1,
                        jobs: "售后",
                        salary: "1.8k"
                    }
                ]
            }
        }
    }
</script>

打印預覽

<script>
	export default {
		name: "nb-print",
		data() {
			return {
				printOption: {
					id: 'nbprint', // 打印元素的id 不需要攜帶#號
					preview: true, // 開啟打印預覽
					previewTitle: '打印預覽', // 打印預覽標題
					popTitle: '員工信息', // 頁眉標題 默認瀏覽器標題 空字符串時顯示undefined 使用html語言
                      // 頭部文字 默認空 在節點中添加 DOM 節點， 并用,(Print local range only)分隔多個節點
					extraHead:'https://***/***.css, https://***/***.css', 
                      // 新的 CSS 樣式表， 并使用,（僅打印本地范圍）分隔多個節點
					extraCss: '<meta http-equiv="Content-Language"content="zh-cn"/>',
					previewBeforeOpenCallback: () => {
						console.log("觸發打印預覽打開前回調");
					},
					previewOpenCallback: () => {
						console.log("觸發打開打印預覽回調");
					},
					beforeOpenCallback: () => {
						console.log("觸發打印工具打開前回調");
					},
					openCallback: () => {
						console.log("觸發打開打印工具回調");
					},
					closeCallback: () => {
						console.log("觸發關閉打印工具回調");
					},
					clickMounted: () => {
						console.log("觸發點擊打印回調");
					}
				}
             }
		}
	}
</script>

分頁打印

<template>
	<div>
		<button v-print="'#nbprint'">NB打印</button>
		<div id="nbprint">
             // 方法一
             // 使用div包裹需要分頁的塊 使用 css屬性 page-break-after:always進行分頁
			<div style="page-break-after:always">這是第二頁</div>
			<div style="page-break-after:always">這是第二頁</div>
		</div>
	</div>
</template>

<style>
     // 方法二
     // 使用媒體查詢 在打印時設置 body 和 html 的高度為auto
     @media print {
        @page {
          size:  auto;
        }
        body, html {
          height: auto !important;
        }
      }
</style>

補充：vue-print-nb插件的一些優化

1.去掉頁眉頁腳

<style>
@page {
    size: auto;
    margin: 0mm;
  }
</style>

2.打印內容不自動換行問題

只需要給不自動換行的標簽加上 word-wrap:break-word; 即可。

<style>
  .procedure{
      word-wrap:break-word;
   }
</style>

posted @ 2025-03-31 09:40 愛吃貓的魚9527 閱讀(1720) 評論(0) 收藏舉報

刷新頁面返回頂部

頁面區域打印vue3-print-nb

安裝

引用

API

示例代碼

補充：vue-print-nb插件的一些優化

公告