快捷導(dǎo)航

elementUI+vue+printJs實現(xiàn)頁面表格數(shù)據(jù)打印功能實例

更新時間：2025年06月05日 10:22:37 作者：Asonys

打印功能是一個很普遍的需求,這兩天我又遇到了,這篇文章主要介紹了elementUI+vue+printJs實現(xiàn)頁面表格數(shù)據(jù)打印功能的相關(guān)資料,包括安裝依賴、引用插件、設(shè)置打印區(qū)域div、綁定按鈕事件加載全量數(shù)據(jù)并調(diào)用printJS方法,需要的朋友可以參考下

1、elementUI頁面數(shù)據(jù)已經(jīng)開發(fā)完成，只需要直接引用對應(yīng)printJs即可
2、先安裝printJs依賴
3、在需要打印功能的vue頁面文件內(nèi)引用
4、在vue頁面添加一個按鈕，綁定點擊事件printAll
5、由于打印采用的是html類型，可以打印elementUI渲染的表格數(shù)據(jù)
6、對應(yīng)的JS單機事件方法
總結(jié)

對接的是 print-js 插件

print-JS 官網(wǎng)文檔地址：Print.js - Javascript library for HTML elements, PDF and image files printing.

1、elementUI頁面數(shù)據(jù)已經(jīng)開發(fā)完成，只需要直接引用對應(yīng)printJs即可

可以先開發(fā)頁面，最后實現(xiàn)打印功能即可

2、先安裝printJs依賴

npm install print-js --save

3、在需要打印功能的vue頁面文件內(nèi)引用

import printJS from 'print-js'

4、在vue頁面添加一個按鈕，綁定點擊事件printAll

<button @click="printAll">打印</button>

5、由于打印采用的是html類型，可以打印elementUI渲染的表格數(shù)據(jù)

可以給el-table外部加一個dive,然后給這個對應(yīng)的div上面一個id，就是下面方法中下printable屬性

 <div id="printBox">
        // 這里是<el-table>數(shù)據(jù)
       <el-table>
      </el-table>
</div>

6、對應(yīng)的JS單機事件方法

      // 打印數(shù)據(jù)
      async printAll() {
        // 由于上面表格展示的數(shù)據(jù)分頁了，這個地方可以加載全部數(shù)據(jù)，不分頁
        await this.getList();
        // 打印js
        printJS({
          printable: 'printBox', //打印區(qū)域id
          type: 'html',    // 打印類型是html
          header: '打印表頭標(biāo)題',
          headerStyle: 'text-align:center; font-size:24px;',
          footer: ' ',
          maxWidth: 800, // 最大寬度
          documentTitle: ' ',
          scanStyles: false, // 自定義樣式
          // 直接在 style 中設(shè)置橫向打印
          style: '@media print {@page { size: A4 landscape; margin: 10mm 10mm 10mm 10mm;} body{zoom: 87%; margin:0mm 5mm 0mm 5mm;} tbody {text-align:center;border: 1px solid #000000;} th {border: 1px solid #000; vertical-align: middle; height: 40px;font-size: 14px;} td {border: 1px solid #000; line-height:40px;}}'
        })
      }

css樣式說明：

// 設(shè)置A4，橫向打印，邊距是10mm

@page { size: A4 landscape; margin: 10mm 10mm 10mm 10mm;} 

// 縮放比例87%，內(nèi)容邊距5mm

body{zoom: 87%; margin:0mm 5mm 0mm 5mm;}

//設(shè)置表格內(nèi)容劇中，邊框及顏色，表格高度

tbody {text-align:center;border: 1px solid #000000;} th {border: 1px solid #000; vertical-align: middle; height: 40px;font-size: 14px;} td {border: 1px solid #000; line-height:40px;}}

總結(jié)

到此這篇關(guān)于elementUI+vue+printJs實現(xiàn)頁面表格數(shù)據(jù)打印功能的文章就介紹到這了,更多相關(guān)printJs頁面表格數(shù)據(jù)打印內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: