ElementUi 使用PrintJs 实现基础打印功能_elementui print.js

打印预览效果：

代码简单实现：

 <el-button size="small" plain type="primary" @click="CreateOneFormPage">打印采购单</el-button>
 
 <el-table
              id="printJS-form"
              ref="table"
              :data="purchase_item"
              show-summary
              :summary-method="getSummaries"
              style="width: 100%"
            >
              <el-table-column type="index" width="50" />
              <el-table-column prop="sku_sn" label="商品编码" width="160">
                <template slot-scope="{ row }">
                  <span v-if="row.sku_sn">{{ row.sku_sn }}</span>
                  <span v-else-if="row.sku_sn">{{ row.item_sn }}</span>
                </template>
              </el-table-column>
            ......略过
</el-table>

   import print from 'print-js'
   /**
     * 打印
     */
    CreateOneFormPage() {
      print({ printable: 'printJS-form',
        type: 'html',
        header: '采购单',
        headerStyle: 'text-align:center;color:#f00;width:100%;border:1px #000 solid;',
        // targetStyles: ['border', 'padding: 15px'],
        scanStyles: false,
        style: 'table tr td,th { border-collapse: collapse;padding: 15px;border:1px #000 solid; }' // 表格样式
      })
    },

详细参考：https://printjs.crabbly.com/