npm install print-js --save

yarn add print-js

import print from 'print-js'

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

<div id="printContent">
    <!-- 需要打印的內(nèi)容 -->
    123
</div>

<script>
import printJS from 'print-js';

const printer = () =>{
    printJS({
        printable: '#printContent',
        type: 'html',
    });
}
</script>

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

<script>
import printJS from 'print-js';

const printer = () =>{
    printJS({
        printable:[
            { date:"2008-08-08", name:"賽麗亞", intensify:"429" },
            { date:"2012-12-12", name:"派蒙", intensify:"648" },
        ], 
        properties: [ //表頭
            {field: 'date', displayName: '日期', },
            {field: 'name', displayName: '姓名', },
            {field: 'intensify', displayName: '變強', },
        ], 
        type: 'json',
        header:"人員名單",
        headerStyle:"text-align: center;font-weight: bold;",
        documentTitle:"",
        gridHeaderStyle: 'border: 1px solid #000;text-align:center',
        gridStyle: 'border: 1px solid #000;text-align:center',
        repeatTableHeader:true
    })
}
</script>

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

<script>
import printJS from 'print-js';

const printer = () =>{
    printJS({
        printable: [
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', 
            'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'    
        ],
        type: 'image',
        header: 'Multiple Images',
        imageStyle: 'width:50%;margin-bottom:20px;'
    })
}
</script>

<div id="rootDiv">
    <el-button type="primary" @click="handlePrint">打印表格</el-button>
    <el-table :data="tabData" border :cell-style="{'text-align':'center'}"
                  :header-cell-style="{'text-align':'center'}" 
                  :row-style="{ height: '84px' }"
                  id="printTable"
        >
          <el-table-column label="編號" prop="ordNum1" width="80"/>
          <el-table-column label="會計科目" prop="ledgerAcc1" width=""/>
          <el-table-column label="年初數(shù)" prop="beginBalance1" width=""/>
          <el-table-column label="期末數(shù)" prop="closeBalance1" width=""/>
          <el-table-column label="編號" prop="ordNum2" width="80"/>
          <el-table-column label="會計科目" prop="ledgerAcc2" width=""/>
          <el-table-column label="年初數(shù)" prop="beginBalance2" width=""/>
          <el-table-column label="期末數(shù)" prop="closeBalance2" width=""/>
    </el-table>
</div>

data(){
    return{
        // 打印時的樣式，如果分辨率和筆者不同，可以設置打印時的縮放，邊距，字體大小等來調(diào)整；
        // 還可以通過調(diào)整表體列寬來適配；
        printStyle: `
          @page {
              /* size:auto; */
              margin-top:90px;
              margin-left:20px; /* 設置打印頁面的左邊距 */
              margin-right:20px;
          }
            thead th {
              border-top: 1px solid #000;
              border-right: 1px solid #000;
              border-left: 1px solid #000;
            }
            tbody td {
              /* height: 32px;
              line-height: 36px; */
              border: 1px solid #000;
            }
            body {
              zoom: 50%; /* 設置打印時的縮放 */
            }
            tbody {
              border: 1px solid #ff0000;
              // border: solid 1px red;
              /* color: green;  *//*設置字體顏色*/
              height: 36px;
              line-height: 26px;
              text-align: center;
              vertical-align: middle;
              // font_size: 100pt;
              /* font-family:'宋體'; */
              /* color: green; */
              // font_size: 28pt;
            }
            table {
              // color: red;
              // line-height: 36px;
              border-collapse: collapse;
            }
            `,
        // 打印時的頂部模板;
        topHtml: `
            <h2 style="text-align: center;width:227%;">食堂-資產(chǎn)負債表</h2>
            <div style="text-align:center;margin: 10px auto;font-size:80%;
                    width:227%;display: flex;flex-direction:row-reverse;">
              <div style="margin-right: 20px;margin-left: 10px;">金額單位:元</div>
              <div style="margin-right: 20px;">日期:2023-11</div>
              <div style="margin-right: 20px;">單位名稱:XXXX幼兒園</div>
            </div>
            `,
        // 表格數(shù)據(jù);
        tableData: [
                {
                 beginBalance1 : 'xxx58.32',
                 beginBalance2 : 'xxx242',
                 closeBalance1 : 'xxx655.63',
                 closeBalance2 : 'xxx30',
                 ledgerAcc1 : '一.資產(chǎn)類小計',
                 ledgerAcc2 : '二.負債類小計',
                 ordNum1 : '-',
                 ordNum2 : '-'
                },
                {
                 beginBalance1 : 'xx716.24',
                 beginBalance2 : 'x80',
                 closeBalance1 : 'xx786.59',
                 closeBalance2 : 'x80',
                 ledgerAcc1 : '銀行存款',
                 ledgerAcc2 : '應付賬款',
                 ordNum1 : '1',
                 ordNum2 : '8',
                }
       ]
    }
},
methods: {
    handlePrint() {
      let rootDiv = document.getElementById('rootDiv')
      // 適配打印時的分辨率, 請讀者根據(jù)自己的PC,在此設置不同的分辨率
      rootDiv.style.height = '1200px'
      rootDiv.style.width = '1920px'
      /*
        這里做的比較巧妙和不容易想到的是，在打印之前將所有的設備分辨率改變?yōu)殚_發(fā)者電腦的分辨率，
        打印完成之后，又恢復為用戶默認的分辨率；這樣就不用一一去考慮機型了；
      */
      // 定義了分辨率，當前縮放與布局就不需要設置和調(diào)整了;
      let userAgent = navigator.userAgent
      //判斷是否Chrome瀏覽器
      if (userAgent.indexOf('Chrome') > -1) {
        console.log('Chrome')
        /*
           這里使用了setTimeout,讀者一定要注意給打印設置時間；
           當前筆者設置了50毫秒的延時時間; 將打印放入了延時隊列，不然printJS立即執(zhí)行打印;
           而頁面分辨率還未適配成功，導致打印樣式適配失敗;
           這樣做給當前的頁面適配分辨率渲染預留了足夠的時間;
        */
        setTimeout(() => {
          printJS({
            printable: 'printTable', // 標簽元素id,表體;
            // maxWidth: 1150, // 最大寬度
            font_size: '26pt', // 設置打印時字體大小
            type: 'html',
            header: this.topHtml, // 打印頂部模板
            documentTitle: '',
            style: this.printStyle // 打印樣式
          })
          // 打印完之后 恢復默認分辨率
          // rootDiv.style.height = window.screen.height + 'px'
          // rootDiv.style.width = window.screen.width + 'px'
          // 使用相對單位，這樣不會出現(xiàn)滾動條;
          rootDiv.style.height = 'auto'
          rootDiv.style.width = '100%'
        }, 50) 
      }
    },
}