前端vue3打印功能實現(xiàn)(多頁打印、不使用插件)

更新時間：2024年09月27日 10:21:54 作者：實名上網(wǎng)張瀚文

在Vue項目中實現(xiàn)打印功能是前端開發(fā)中常見需求之一,這篇文章主要介紹了前端vue3打印功能實現(xiàn)的全部過程,文中介紹的方法實現(xiàn)了多頁打印并且不使用插件,需要的朋友可以參考下

子組件代碼

@media print 這個我要講一下，這是控制在打印界面，打印的參數(shù)，這是css中的知識，我一開始不曉得，慢慢問ai和網(wǎng)上查資料曉得的。

<template>
  <div id="printable-area">
    <div v-for="(item, index) in printData" :key="index" class="print-item">
      <div class="centered-content" style="font-size: 40px; margin-top: 55px">
        圖號:<span style="border-bottom: 1px solid black; display: inline-block; width: 300px;">{{ item.figureNumber }}</span><br>
        名稱:<span style="border-bottom: 1px solid black; display: inline-block; width: 300px;">{{ item.name }}</span><br>
        編號:<span style="border-bottom: 1px solid black; display: inline-block; width: 300px; ">{{ item.number }}</span><br>
        研制階段:<span style="border-bottom: 1px solid black; display: inline-block; width: 300px; ">{{ item.developmentPhase }}</span><br>
        出廠時間:<span style="border-bottom: 1px solid black; display: inline-block; width: 300px; ">{{ item.factoryTime }}</span><br>
      </div>
      <br>
      <div v-if="index < printData.length - 1" class="page-break"></div>
    </div>
  </div>
</template>

<script>
import {defineComponent} from 'vue';

export default defineComponent({
  props: {
    queryParam: Array
  },
  setup(props) {
    const printData = props.queryParam;
    return { printData };
  }
});
</script>

<style>
@media print {
  body {
    background: none !important;
    text-align: center; /* 讓 body 內(nèi)容居中 */
  }
  @page {
    size: 15cm 12cm; /* 設置紙張大小為A4 */
    margin:0; /* 設置頁邊距 */
  }
  .noprint {
    display: none;
  }
  body {
    background: none !important;
  }
  .page-break {
    page-break-before: always;
  }

}
</style>

父組件

這是element 抽屜，我是為了看參數(shù)有沒有傳入進去，用來測試的。我是通過一個按鈕，來實現(xiàn)對子組件傳參，把參數(shù)傳給子組件。

   <div  id="printArea">
      <el-drawer v-model="drawer" title="I am the title" :with-header="false">
      <Print ref="printComponent" :query-param="printData"></Print>
    </el-drawer>
    </div>

 <el-button type="success" plain  @click="print">打印</el-button>

這里也很關鍵，中間我遇到一個問題，那就是經(jīng)常第一次點擊按鈕，dom元素沒有加載完，就彈出打印框了，所以我加了一個異步事件，還有記得把抽屜關了。

  //這里獲取后端參數(shù)
        state.drawer = true
        // 使用nextTick確保DOM更新后執(zhí)行
        nextTick(() => {
          const printableElement = document.querySelectorAll('.print-item');
          console.log(printableElement);
          func.getPrint()
          // 確保在抽屜隱藏之前獲取到元素
          state.drawer = false;
        });

func.getPrint() 就是我打印功能實際實現(xiàn)，為什么我這里是func，因為公司把所有方法都放在fun里面，節(jié)約了導出，免得一個個導出。我們要用直接點就行了。

中間注釋的，是windo打印的方法，但是不曉得為啥子，關于打印的分頁功能沒有實現(xiàn)，我其實很迷惑。

但是使用這個popupWin就成功了。

講一下大概思路，因為我前端寫了比較少，所以理解這些還是花了一點點時間。

querySelectorAll 因為我們組件有class名字，根據(jù)class名字獲取了nodelist，一個元素數(shù)組。其實每個元素數(shù)組中就是前端的信息。

對了千萬不要使用querySelectorOne，我ai生成的時候，發(fā)現(xiàn)為什么只打印了一個信息，一開始我以為是我分頁沒有生效，其實是我只獲取了一個node。

 const printableHTML = Array.from(printableElement).map(el => {
          return el.outerHTML;
        }).join('');

這是獲取子組件的html元素，因為node節(jié)點，里面要通過outerHTML才能獲取，反正里面也有很多方法，可以看看，我有點記不到了。

后面的思路就簡單，開一個新窗口，然后把你從子節(jié)點獲取的html元素放到這個窗口中，然后打印這個窗口，最后實現(xiàn)。

getPrint:()=>{
        const printableElement = document.querySelectorAll('.print-item');
        console.log(printableElement);
        // 將 NodeList 轉換為字符串，并添加分頁符
        // const printableHTML = Array.from(printableElement).map(el => {
        //   return `<div style="page-break-after: always;">${el.outerHTML}</div>`;
        // }).join('');
        const printableHTML = Array.from(printableElement).map(el => {
          return el.outerHTML;
        }).join('');
        // console.log(printableHTML)
        // let bodyHtml = document.body.innerHTML  //獲取整個頁面內(nèi)容
        // document.body.innerHTML = printableHTML
        // window.print() //打印
        // document.body.innerHTML = bodyHtml//還原頁面內(nèi)容
        // location.reload()
        const popupWin = window.open('', '_blank', 'width=700,height=1000,scrollbars=no,menubar=no,toolbar=no,location=no,status=no,titlebar=no');
        popupWin.document.write(`
        <html>
          <head>
            <title>Print tab</title>
            <style>
             body {
            background: none !important;
            text-align: center; /* 讓 body 內(nèi)容居中 */
        }
              @media print {
              .noprint {
                display: none;
         }
               @page {
              size: 18cm 15cm; /* 設置紙張大小為A4 */
              margin:0; /* 設置頁邊距 */
        }
                .noprint {
                    display: none;
                          }
                 .page-break {
                    page-break-before: always;
              }

        }

            </style>
          </head>
          <body>
            ${printableHTML}
          </body>
        </html>
    `);
        popupWin.document.close();
        popupWin.focus();
        popupWin.print();
        popupWin.close();
      },

最后我給大家放下效果圖，還有多多點贊，我為了完成這個功能，網(wǎng)上看了博客，都沒找到。

雖然最好我是通過ai加上自己人腦慢慢摸索的，哈哈。