快捷導(dǎo)航

在Vue3中使用vue3-print-nb實現(xiàn)前端打印功能

更新時間：2024年06月16日 09:00:38 作者：小白Coding日志

在前端開發(fā)中,經(jīng)常需要打印頁面的特定部分,比如客戶列表或商品詳情頁,要快速實現(xiàn)這些功能,可以使用 vue3-print-nb 插件,本文就給大家介紹了如何在 Vue 3 中使用 vue3-print-nb 實現(xiàn)靈活的前端打印,需要的朋友可以參考下

前言

在前端開發(fā)中，經(jīng)常需要打印頁面的特定部分，比如客戶列表或商品詳情頁。要快速實現(xiàn)這些功能，可以使用 vue3-print-nb 插件。它通過對 DOM 元素的操作和 CSS 樣式的處理，輕松實現(xiàn)頁面內(nèi)容的打印功能。

安裝

當(dāng)前示例以Vue3+ElementPlus為例，如果要使用vue2版本的就安裝npm install vue-print-nb --save。

npm install vue3-print-nb --save

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import print from 'vue3-print-nb'
import './style.css'
import App from './App.vue'
const app = createApp(App)

app.use(ElementPlus)
app.use(print)
app.mount('#app')

使用

<script setup>
import { ref } from 'vue'

defineProps({
  msg: String,
})

const count = ref(0)

const tableData = [
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
]

</script>

<template>
  <h1>{{ msg }}</h1>
  <div class="btn">
    <el-button type="primary" v-print="'#printTable'">打印</el-button>
  </div>
  <el-table id="printTable" :data="tableData" border style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>
</template>

只需要在要打印的元素上通過v-print屬性即可實現(xiàn)打印的效果，可以選擇打印全部或者打印指定頁面，比如我只想要打印el-table表格部分，只需要在el-button按鈕上面綁定v-print="'#printTable'"，我已經(jīng)提前在el-table上定義好了id="printTable"，v-print的屬性值對應(yīng)的就是el-table。打印效果預(yù)覽

以上實現(xiàn)了一個最基本的打印效果，v-print還支持更多的屬性呢!它的屬性值可以是一個對象以此來實現(xiàn)更加定制化的打印效果，一起來看看吧

HTML

  <div class="btn">
    <el-button type="primary" v-print="printObj">打印</el-button>
  </div>
  <el-table id="printTable" :data="tableData" border style="width: 100%">
    <el-table-column prop="date" label="Date" width="180" />
    <el-table-column prop="name" label="Name" width="180" />
    <el-table-column prop="address" label="Address" />
  </el-table>

JavaScript

const printObj = {
  id: 'printTable',
  popTitle: 'print nb',
  extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
  beforeOpenCallback (vue) {
    console.log('打開之前')
  },
  openCallback (vue) {
    console.log('執(zhí)行了打印')
  },
  closeCallback (vue) {
    console.log('關(guān)閉了打印工具')
  }
}

我們可以給要打印的頁面指定額外的樣式、額外的樣式、額外頭，甚至是添加回調(diào)函數(shù)！

打印網(wǎng)址

為printObj對象添加一個url屬性即可實現(xiàn)打印當(dāng)前網(wǎng)址對應(yīng)的整個頁面。但是如何設(shè)置了url數(shù)據(jù)就不能再同時設(shè)置id屬性了。還有一點需要的注意的是設(shè)置url屬性需要確保同源策略相同！

const printObj = {
  url: 'http://localhost:5173/',
  popTitle: 'good print',
  extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
  beforeOpenCallback (vue) {
    console.log('打開之前')
  },
  openCallback (vue) {
    console.log('執(zhí)行了打印')
  },
  closeCallback (vue) {
    console.log('關(guān)閉了打印工具')
  }
}

打印預(yù)覽

設(shè)置了preview屬性將在打印時候顯示打印預(yù)覽。

const printObj = {
  id: 'printTable',
  preview:true, // 打印預(yù)覽
  previewTitle: '打印預(yù)覽',
  popTitle: 'good print',
  extraCss: "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
  extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
  beforeOpenCallback (vue) {
    console.log('打開之前')
  },
  openCallback (vue) {
    console.log('執(zhí)行了打印')
  },
  closeCallback (vue) {
    console.log('關(guān)閉了打印工具')
  }
}

打印預(yù)覽效果

v-print API

參數(shù)	說明	類型	可選項	默認(rèn)值
id	范圍打印ID，必填值	String	—	—
standard	文檔類型（僅打印本地范圍）	String	html5/loose/strict	html5
extraHead	在節(jié)點中添加 DOM 節(jié)點，多個節(jié)點用分隔,（僅打印局部范圍）	String	—	—
extraCss	新的 CSS 樣式表，并使用分隔多個節(jié)點,（僅打印局部范圍）	String	—	-
popTitle	標(biāo)簽內(nèi)容（僅打印本地范圍）	String	—	-
openCallback	調(diào)用打印工具成功回調(diào)函數(shù)	Function	Returns the instance of Vue called at that time	-
closeCallback	關(guān)閉打印工具成功回調(diào)函數(shù)	Function	Returns the instance of Vue called at that time	-
beforeOpenCallback	調(diào)用打印工具前的回調(diào)函數(shù)	Function	Returns the instance of Vue called at that time	-
url	打印指定URL。（不可同時設(shè)置ID）	string	-	-
asyncUrl	通過 'resolve()' 返回 URL	Function	-	-
preview	預(yù)覽工具	Boolean	-	false
previewTitle	預(yù)覽工具標(biāo)題	String	-	'打印預(yù)覽'
previewPrintBtnLabel	預(yù)覽工具按鈕的名稱	String	-	'打印'
zIndex	預(yù)覽工具的 CSS：z-index	String,Number	-	20002
previewBeforeOpenCallback	啟動預(yù)覽工具前的回調(diào)函數(shù)	Function	Returns the instance of Vue	-
previewOpenCallback	預(yù)覽工具完全打開后的回調(diào)函數(shù)	Function	Returns the instance of Vue	-