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 等，它们能够更好地解决打印页面缺失的问题。可以尝试使用这些插件来解决问题。

总结 

到此这篇关于printJS打印问题汇总以及解决办法的文章就介绍到这了,更多相关printJS打印问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论