printJS打印问题汇总以及解决办法

目录

• 一、打印预览表格列不全（Element的el-table组件）
• 1、打印设置“打印缩放”
• 2、修改el——table的底层代码（如果页面上有多个表格慎用） 
• 二、如何解决vue printjs 打印侧边页面缺失
• 总结 

一、打印预览表格列不全（Element的el-table组件）

 问题描述：当我在页面中集成了<el-table></el-table>这个组件的时候，由于我的列比较多，所以在打印预览的时候，我的表格列出现了显示不完全的问题，百度了很多方法，最后总结了两个比较简单的解决方案：

1、打印设置“打印缩放”

由于我们是基于printJS来实现的打印功能，在这个打印插件的“缩放”按钮，将页面缩放到合适大小即可。

2、修改el——table的底层代码（如果页面上有多个表格慎用） 

问题原因：table-layout: fixed导致的，出现部分列没有被打印

  分析问题：

        为了让表table布局更加符合预期，普通使用table时，其table-layout 默认值是 auto，导致表格第二行和第一行不一样宽，也就是两行的宽度不对齐。

        而使用：table { table-layout: fixed; }则会让表的布局以第一行为准，设置表格的宽度，然后其他行的表格宽度就按照第一行为准。一般表格第一行是表头标题，第二行以后是数据行，也就是让数据行的每列宽度向第一行列宽度看齐。

        这种样式的表格布局在性能上也快得多，这是因为整个表格的内容不需要花费进行分析，以便知道列的宽度。

        解决方法：在组件中重设el-table的宽度（要注意的是：这种解决方案只适用于页面中表格不是很多的情况，如果表格很多，可以给要修改的表格加一个id）

<style lang="less" scoped>
    /deep/ table{
        table-layout: auto !important;
    }
    /deep/ .el-table__header-wrapper .el-table__header{
        width: 100% !important;
    }
    /deep/ .el-table__body-wrapper .el-table__body{
        width: 100% !important;
    }
</style>

注意点：

/deep/ table{
  table-layout: auto !important;
}

可能会造成样式错乱，比如你页面有table，打印弹出层的table，这样修改样式有可能会导致页面表格行错位，解决办法：在页面的<el-table>标签上加id,比如pagetable，修改less样式如下

<style lang="less" scoped>
    /deep/ table{
        table-layout: auto !important;
    }
    /deep/ .el-table__header-wrapper .el-table__header{
        width: 100% !important;
    }
    /deep/ .el-table__body-wrapper .el-table__body{
        width: 100% !important;
    }
    /deep/ #pagetable table{
        table-layout: fixed !important;
    }
</style>

二、如何解决vue printjs 打印侧边页面缺失

如果使用 Vue.js 和 Print.js 打印页面时出现了侧边页面缺失的情况，可以尝试以下解决方案：

• 设置打印区域大小

在使用 Print.js 打印时，可以通过 options 参数中的 cssStyle 属性来设置打印区域的大小，例如：

this.$printJS({
  printable: 'my-printable-element-id',
  cssStyle: 'width: 1000px; height: 1000px;',
  // ...
});

将打印区域的大小设置得足够大，以便容纳所有内容。

• 隐藏不必要的元素

如果打印区域内包含了一些不必要的元素，可以通过在打印时将它们隐藏来避免打印缺失的问题。例如：

this.$printJS({
  printable: 'my-printable-element-id',
  onPrintDialogClose: function() {
    // 隐藏不必要的元素
    document.getElementById('my-unwanted-element-id').style.display = 'none';
  },
  // ...
});

在打印对话框关闭时，将不必要的元素隐藏即可。

• 使用插件

除了 Print.js 之外，还有一些其他的 Vue.js 打印插件，例如 vue-print-nb、vue-html-to-paper 等，它们能够更好地解决打印页面缺失的问题。可以尝试使用这些插件来解决问题。

总结