Vue實現打印功能

一、Vue打印功能實現

VUE是一款輕量級的MVVM框架，提供響應式的數據綁定和可組合的視圖組件。Vue 提供一個非常方便的打印功能的方式，使得在 Web 上的打印輸出變得更加簡單，用戶不需要導出文檔或者使用其他第三方插件等。VUE提供的打印功能可以直接在頁面上執行，打印出指定區域的內容，也可以通過模式窗口進行預覽和打印輸出。

以下是一個基本的Vue實現打印功能的示例代碼：

  <html>
  <head>
    <title>Vue實現打印功能</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="print">
        <h3>打印的內容</h3>
        <ul>
            <li v-for="item in items">{{ item }}</li>
        </ul>
        <button v-on:click="print">打印</button>
    </div>
    <script>
      new Vue({
        el: '#print',
        data: {
            items: ['打印一', '打印二', '打印三']
        },
        methods: {
          print: function() {
            window.print()
          },
        },
      })
    </script>
  </body>
  </html>

在上面的代碼里，我們使用Vue.js定義了一個 print組件，然後定義了一些數據項(items)，最後在button標籤里定義了一個v-on:click事件。當用戶單擊按鈕時，會調用print()方法，執行window.print()函數，實現打印操作。

二、前端Vue打印功能實現

前端可以使用VUE實現打印功能的最大優勢就是可以控制整個頁面的結構以及樣式，那麼前端VUE打印的實現方式有哪些呢？

① @media 打印媒體查詢：

<style>
@media print {
    body{
        background:#fff;
    }
    .dontprint,.dontprintdiv{
       display:none;
    }
}
</style>

該方式以CSS樣式的方式對整個頁面進行調整，使其符合打印需要，通過設置 display:none參數可以將一些不必要的元素隱藏，從而簡化頁面結構，減少了打印出現問題的可能性。

② window.print()方式

除了在Vue組件里調用window.print()函數進行打印外，我們也可以封裝一個打印組件，在需要打印的時候調用組件實現打印功能。

以下是一個Vue封裝的打印組件的實現代碼：

<template>
    <div class="printClass">
        <div class="print-content">
            <slot name="printArea"></slot>
        </div>
        <div class="print-btn">
            <el-button type="primary" @click="print">打印</el-button>
        </div>
    </div>
</template>

<script>
export default {
    name: 'Print',
    data(){
        return{
        }
    },
    methods:{
        // 打印
        print(){
            setTimeout(() =>{
                window.print();
            },500)
        }
    }
}
</script>

<style scoped>
.printClass{
    font-size:0;
}
.printClass .print-content{
    display:inline-block;
    width:auto;
    font-size:14px;
    line-height:24px;
    margin-bottom:0!important
}
.printClass .print-btn{
    display:inline-block;
    width:auto;
    line-height:24px;
    margin-left:20px;
}
</style>

在以上代碼中，我們定義了一個Print組件，在組件內部定義了打印按鈕，同時通過slot插槽獲取需要打印的區域，然後在print()方法里實現打印功能，並調用window.print()來完成打印。

三、Vue實現編輯功能選取

在很多業務場景下，需要將某些部分的內容單獨進行打印或者編輯。VUE提供了非常方便的實現方式，能夠幫助開發者輕鬆地實現這一需求。

以下是一個基本的Vue選取內容並實現編輯的示例代碼：

<html>
  <head>
    <title>Vue實現編輯功能選取</title>
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
      <div>試着拖拽下面的文字，然後單擊編輯按鈕</div>
      <div contenteditable="true">This is some content that can be edited</div>
      <div v-if="selection" class="selection-preview">{{ selection }}</div>
      <button v-if="selection" v-on:click="editSelection">編輯所選內容</button>
    </div>
    <script>
      new Vue({
        el: '#app',
        data: {
          selection: null
        },
        methods: {
          editSelection: function() {
            alert('您選擇的內容是：' + this.selection);
            this.selection = null;
          },
          selectionChange: function(event) {
            this.selection = event.target.innerText;
          },
        },
        mounted: function() {
          document.querySelector('[contenteditable]').addEventListener('mouseup', this.selectionChange);
          document.querySelector('[contenteditable]').addEventListener('keyup', this.selectionChange);
        }
      })
    </script>
    </body>
</html>

在以上代碼中，我們首先創建一個App組件，定義了一個<div contenteditable="true">元素，並定義了兩個事件監聽函數，當鼠標選中內容之後會觸發selectionChange()方法，該方法會把選擇的文本組合成一個字符串存儲在selection中，並動態地顯示出來。需要注意的是，在事件監聽函數里，我們使用了<div v-if="selection" class="selection-preview">指令來觀察選擇區域的變化，只有當selection不為null時才會顯示出來。另外，在點擊編輯按鈕之後要將selection設置為null，以便下次重新選擇。這樣，我們就可以通過Vue實現選取所需要的編輯內容了。

原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hk/n/270258.html

Vue實現打印功能

一、Vue打印功能實現

二、前端Vue打印功能實現

三、Vue實現編輯功能選取

相關推薦

發表回復