vue實現(xiàn)打印功能的示例代碼

更新時間：2023年12月05日 17:04:39 作者：我愛學習yq

這篇文章主要為大家詳細介紹了如何通過vue實現(xiàn)打印功能,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下

安裝 vue3-print-nb

yarn add vue3-print-nb
//或
npm install vue3-print-nb

main.js中引入 vue3-print-nb

import { createApp } from 'vue';
import App from './App.vue';
const app = createApp(App);
// 打印插件
import print from 'vue3-print-nb'
app.use(print)
//

頁面內(nèi)引入

import print from 'vue3-print-nb'
const vPrint = print;

聲明打印時的配置的變量

const printSetting = ref({
    id: 'printMe',
})

為打印按鈕綁定上v-print指令，值為配置變量

<div v-print="printSetting">打印</div>

配置完成了看效果，點擊打印出現(xiàn)打印模態(tài)框

Vue并沒有內(nèi)置的打印功能，但可以使用瀏覽器的API來實現(xiàn)打印。

具體實現(xiàn)步驟如下：

在需要打印的組件中添加一個按鈕，點擊該按鈕觸發(fā)打印事件。
在點擊事件中調(diào)用瀏覽器的打印API，將需要打印的內(nèi)容傳遞給該API。

代碼示例：

<template>
  <div>
    <button @click="print">打印</button>
    <div ref="printContent">
      <!-- 需要打印的內(nèi)容 -->
    </div>
  </div>
</template>
 
<script>
export default {
  methods: {
    print() {
      const printContent = this.$refs.printContent.innerHTML
      const printWindow = window.open('', '', 'height=500,width=500')
 
      printWindow.document.write(`
        <html>
          <head>
            <title>打印頁面</title>
          </head>
          <body>
            ${printContent}
          </body>
        </html>
      `)
 
      printWindow.print()
      printWindow.close()
    }
  }
}
</script>

在上面的例子中，我們先獲取需要打印的內(nèi)容的HTML代碼，然后創(chuàng)建一個新的瀏覽器窗口，并將該HTML代碼寫入到該窗口中。

最后調(diào)用窗口的打印方法進行打印并關閉該窗口。

需要注意的是，上述實現(xiàn)方式只適用于打印靜態(tài)內(nèi)容。如果需要打印動態(tài)生成的內(nèi)容，需要在生成完畢后再調(diào)用打印API。

到此這篇關于vue實現(xiàn)打印功能的示例代碼的文章就介紹到這了,更多相關vue打印內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

vue
打印

解決Antd Table組件表頭不對齊的問題
這篇文章主要介紹了解決Antd Table組件表頭不對齊的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue項目配置vuex并開啟熱更新方式
這篇文章主要介紹了vue項目配置vuex并開啟熱更新方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-01-01
html中創(chuàng)建并調(diào)用vue組件的幾種方法匯總
這篇文章主要介紹了html中創(chuàng)建并調(diào)用vue組件的幾種方法匯總，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下
2020-11-11
vue開發(fā)中數(shù)據(jù)更新但視圖不刷新的解決方法
在開發(fā)中我們處理數(shù)據(jù)時會遇到數(shù)據(jù)更新了,但視圖并沒有更新,這種情況往往是數(shù)據(jù)嵌套層數(shù)過多導致的問題,下面這篇文章主要給大家介紹了關于vue開發(fā)中數(shù)據(jù)更新但視圖不刷新的解決方法,需要的朋友可以參考下
2022-11-11
JS圖片懶加載庫VueLazyLoad詳解
這篇文章主要為大家介紹了JS圖片懶加載庫VueLazyLoad示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-02-02
解決vue做詳情頁跳轉(zhuǎn)的時候使用created方法數(shù)據(jù)不會更新問題
這篇文章主要介紹了解決vue做詳情頁跳轉(zhuǎn)的時候使用created方法數(shù)據(jù)不會更新問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue實現(xiàn)簡單全選和反選功能
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單全選和反選功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-09-09
vue-cli 3.0 引入mint-ui報錯問題及解決
這篇文章主要介紹了vue-cli 3.0 引入mint-ui報錯問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue 項目中常用的 2 個 Ajax 庫及簡單使用示例
Ajax是一種在不重新加載整個頁面的情況下,通過 JavaScript 與服務器進行異步通信的技術,這篇文章主要介紹了vue項目中常用的2 個 Ajax庫,需要的朋友可以參考下
2025-06-06
Vue百度地圖實現(xiàn)定位和marker拖拽監(jiān)聽功能
這篇文章主要介紹了Vue百度地圖實現(xiàn)定位和marker拖拽監(jiān)聽功能,實現(xiàn)思路非常簡單，本文結合實例代碼效果圖給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
2022-11-11