快捷導(dǎo)航

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

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

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

子組件代碼

@media print 這個(gè)我要講一下，這是控制在打印界面，打印的參數(shù)，這是css中的知識(shí)，我一開(kāi)始不曉得，慢慢問(wèn)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">
        圖號(hào):<span style="border-bottom: 1px solid black; display: inline-block; width: 300px;">{{ item.figureNumber }}</span><br>
        名稱(chēng):<span style="border-bottom: 1px solid black; display: inline-block; width: 300px;">{{ item.name }}</span><br>
        編號(hào):<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>
        出廠時(shí)間:<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; /* 設(shè)置紙張大小為A4 */
    margin:0; /* 設(shè)置頁(yè)邊距 */
  }
  .noprint {
    display: none;
  }
  body {
    background: none !important;
  }
  .page-break {
    page-break-before: always;
  }

}
</style>

父組件

這是element 抽屜，我是為了看參數(shù)有沒(méi)有傳入進(jìn)去，用來(lái)測(cè)試的。我是通過(guò)一個(gè)按鈕，來(lái)實(shí)現(xiàn)對(duì)子組件傳參，把參數(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>

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

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

func.getPrint() 就是我打印功能實(shí)際實(shí)現(xiàn)，為什么我這里是func，因?yàn)楣景阉蟹椒ǘ挤旁趂un里面，節(jié)約了導(dǎo)出，免得一個(gè)個(gè)導(dǎo)出。我們要用直接點(diǎn)就行了。

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

但是使用這個(gè)popupWin就成功了。

講一下大概思路，因?yàn)槲仪岸藢?xiě)了比較少，所以理解這些還是花了一點(diǎn)點(diǎn)時(shí)間。

querySelectorAll 因?yàn)槲覀兘M件有class名字，根據(jù)class名字獲取了nodelist，一個(gè)元素?cái)?shù)組。其實(shí)每個(gè)元素?cái)?shù)組中就是前端的信息。

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

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

這是獲取子組件的html元素，因?yàn)閚ode節(jié)點(diǎn)，里面要通過(guò)outerHTML才能獲取，反正里面也有很多方法，可以看看，我有點(diǎn)記不到了。

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

getPrint:()=>{
        const printableElement = document.querySelectorAll('.print-item');
        console.log(printableElement);
        // 將 NodeList 轉(zhuǎn)換為字符串，并添加分頁(yè)符
        // 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  //獲取整個(gè)頁(yè)面內(nèi)容
        // document.body.innerHTML = printableHTML
        // window.print() //打印
        // document.body.innerHTML = bodyHtml//還原頁(yè)面內(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; /* 設(shè)置紙張大小為A4 */
              margin:0; /* 設(shè)置頁(yè)邊距 */
        }
                .noprint {
                    display: none;
                          }
                 .page-break {
                    page-break-before: always;
              }

        }

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

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

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