前端printjs的使用实战案例

 npm install print-js --save

yarn add print-js

import print from 'print-js'

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

<div id="printContent">
    <!-- 需要打印的内容 -->
    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="年初数" prop="beginBalance1" width=""/>
          <el-table-column label="期末数" prop="closeBalance1" width=""/>
          <el-table-column label="编号" prop="ordNum2" width="80"/>
          <el-table-column label="会计科目" prop="ledgerAcc2" width=""/>
          <el-table-column label="年初数" prop="beginBalance2" width=""/>
          <el-table-column label="期末数" prop="closeBalance2" width=""/>
    </el-table>
</div>

data(){
    return{
        // 打印时的样式，如果分辨率和笔者不同，可以设置打印时的缩放，边距，字体大小等来调整；
        // 还可以通过调整表体列宽来适配；
        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%;">食堂-资产负债表</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>
            `,
        // 表格数据;
        tableData: [
                {
                 beginBalance1 : 'xxx58.32',
                 beginBalance2 : 'xxx242',
                 closeBalance1 : 'xxx655.63',
                 closeBalance2 : 'xxx30',
                 ledgerAcc1 : '一.资产类小计',
                 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')
      // 适配打印时的分辨率, 请读者根据自己的PC,在此设置不同的分辨率
      rootDiv.style.height = '1200px'
      rootDiv.style.width = '1920px'
      /*
        这里做的比较巧妙和不容易想到的是，在打印之前将所有的设备分辨率改变为开发者电脑的分辨率，
        打印完成之后，又恢复为用户默认的分辨率；这样就不用一一去考虑机型了；
      */
      // 定义了分辨率，当前缩放与布局就不需要设置和调整了;
      let userAgent = navigator.userAgent
      //判断是否Chrome浏览器
      if (userAgent.indexOf('Chrome') > -1) {
        console.log('Chrome')
        /*
           这里使用了setTimeout,读者一定要注意给打印设置时间；
           当前笔者设置了50毫秒的延时时间; 将打印放入了延时队列，不然printJS立即执行打印;
           而页面分辨率还未适配成功，导致打印样式适配失败;
           这样做给当前的页面适配分辨率渲染预留了足够的时间;
        */
        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'
          // 使用相对单位，这样不会出现滚动条;
          rootDiv.style.height = 'auto'
          rootDiv.style.width = '100%'
        }, 50) 
      }
    },
}