使用print-js开发打印功能，解决不同分辨率设备打印时适配的问题。

近期开发了一张报表，功能有打印，是好开发的；可是不同设备分辨率打印时并不适配。

网上查找搜寻未果，经过经理的提点和自己的探索和尝试，最终解决了这一令人头疼的问题。

特此记录，并把这个方法和思维分享给遇到这个问题查找无果的爱学习爱鼓捣辛勤工作的读者们。

问题描述：

笔者在开发时按照本PC机的分辨率进行打印调整；所以在当前电脑上打印是没有任何问题的。

只是换了一台设备后，分辨率不同了，打印样式会被破坏；

在开发环境中引入 print-js 的博文很多，且都很不错，在此就不再赘述了。直接上代码！

需要打印的表体部分如下；注意这里为打印定义了一个id="printTable"；适配时用到id="rootDiv"；

<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>

定义打印顶部模板，打印样式，打印功能；

打印时的样式，如果分辨率和笔者不同，

可以设置打印时 CSS 样式的缩放 zoom， 边距 margin；

或者 printJS 函数中参数的对象属性 font_size 等来调整；

还可以在el-table-column标签中通过调整width大小表体列宽来适配；

请读者仔细耐心浏览阅读handlePrint()函数；笔者在里面做了详细的注释和解释，并进行了排版；

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) 
        
      }

    },

}

如下图，改变本机分辨率之后的打印显示；