vue-print如何實現(xiàn)打印功能

更新時間：2025年04月24日 10:52:22 作者：小泡泡c

這篇文章主要介紹了vue-print如何實現(xiàn)打印功能問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教

一、安裝

1. Vue2

npm install vue-print-nb --save

import Print from 'vue-print-nb'
// Global instruction 
Vue.use(Print);

//or

// Local instruction
import print from 'vue-print-nb'

directives: {
    print   
}

2. Vue3

npm install vue3-print-nb --save

// Global instruction 
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')

//or

// Local instruction
import print from 'vue3-print-nb'

directives: {
    print   
}

二、基本使用

1. 直接打印頁面HTML

1）方法

① 給要打印的部分設置一個 id
② 在打印按鈕中添加 v-print="'#id名'"

2）代碼（以表格為例）

<template>
  <div>
    <a-button v-print="'#printMe'">打印</a-button>
    <a-table :columns="columns" :data-source="data" bordered id="printMe">
  	</a-table>
  </div>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Cash Assets',
    className: 'column-money',
    dataIndex: 'money',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    money: '￥300,000.00',
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    money: '￥1,256,000.00',
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    money: '￥120,000.00',
    address: 'Sidney No. 1 Lake Park',
  },
];

export default {
  data() {
    return {
      data,
      columns,
    };
  },
};
</script>

2. 個性化設置

1）方法

打印按鈕的 v-print 綁定一個對象

2）代碼

<template>
  <div class="box">
    <a-table :columns="columns" :data-source="data" bordered id="printMe"></a-table>
    <a-button v-print="printContent" class="btn no-print">打印</a-button>
  </div>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Cash Assets',
    className: 'column-money',
    dataIndex: 'money',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    money: '￥300,000.00',
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    money: '￥1,256,000.00',
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    money: '￥120,000.00',
    address: 'Sidney No. 1 Lake Park',
  },
];

export default {
  data() {
    return {
      data,
      columns,
      tableHead: '測試表格',
      printContent: {
        id: "printMe", // 打印的區(qū)域
        preview: false, // 預覽工具是否啟用
        previewTitle: '這是預覽標題', // 預覽頁面的標題
        popTitle: '', // 打印頁面的頁眉
        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"/>',
        previewBeforeOpenCallback() {
          console.log('正在加載預覽窗口')
        },
        previewOpenCallback() {
          console.log('已經(jīng)加載完預覽窗口')
        },
        beforeOpenCallback(vue) {
          vue.printLoading = true
          console.log('打開之前')
        },
        openCallback(vue) {
          vue.printLoading = false
          console.log('執(zhí)行了打印')
        },
        closeCallback() {
          console.log('關閉了打印工具')
        },
        clickMounted(vue){
          console.log('點擊了打印按鈕');
          vue.printContent.popTitle = vue.tableHead // 動態(tài)設置頁眉
        }
      }
    }
  }
};
</script>

3）效果展示

① 預覽工具

3. 打印URL

1）方法

① 給打印按鈕的 v-print 綁定一個對象
② 對象添加 url 屬性

2）代碼

<template>
  <div class="box">
    <a-table :columns="columns" :data-source="data" bordered></a-table>
    <a-button v-print="printContent" class="btn no-print" >打印</a-button>
  </div>
</template>
<script>
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
  },
  {
    title: 'Cash Assets',
    className: 'column-money',
    dataIndex: 'money',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    money: '￥300,000.00',
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    money: '￥1,256,000.00',
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    money: '￥120,000.00',
    address: 'Sidney No. 1 Lake Park',
  },
];

export default {
  data() {
    return {
      data,
      columns,
      tableHead: '測試表格',
      printContent: {
        url: 'http://localhost:8081/', // 打印的url
        preview: false, // 預覽工具是否啟用
        previewTitle: '這是預覽標題',
        popTitle: '', // 打印頁面的頁眉
        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"/>',
      }
    }
  },
};
</script>

三、API

Parame	Explain	Type	OptionalValue	DefaultValue
id	Range print ID, required value	String	–	–
standard	Document type (Print local range only)	String	html5/loose/strict	html5
extraHead	Add DOM nodes in the node, and separate multiple nodes with , (Print local range only)	String	–	–
extraCss	New CSS style sheet , and separate multiple nodes with ,(Print local range only)	String	–	–
popTitle		Content of label (Print local range only)	String	–	–
openCallback	Call the successful callback function of the printing tool	Function	Returns the instance of Vue called at that time	–
closeCallback	Close the callback function of printing tool success	Function	Returns the instance of Vue called at that time	–
beforeOpenCallback	Callback function before calling printing tool	Function	Returns the instance of Vue called at that time	–
url	Print the specified URL. (It is not allowed to set the ID at the same time)	String	–	–
asyncUrl	Return URL through ‘resolve()’ and Vue	Function	–	–
preview	Preview tool	Boolean	–	false
previewTitle	Preview tool Title	String	–	‘打印預覽’
previewPrintBtnLabel	The name of the preview tool button	String	–	‘打印’
zIndex	CSS of preview tool: z-index	String,Number	–	20002
previewBeforeOpenCallback	Callback function before starting preview tool	Function	Returns the instance of Vue	–
previewOpenCallback	Callback function after fully opening preview tool	Function	Returns the instance of Vue	–
clickMounted	Click the callback function of the print button	Function	Returns the instance of Vue	–