一、打印預(yù)覽表格列不全（Element的el-table組件）

 問題描述：當(dāng)我在頁面中集成了<el-table></el-table>這個組件的時候，由于我的列比較多，所以在打印預(yù)覽的時候，我的表格列出現(xiàn)了顯示不完全的問題，百度了很多方法，最后總結(jié)了兩個比較簡單的解決方案：

1、打印設(shè)置“打印縮放”

由于我們是基于printJS來實現(xiàn)的打印功能，在這個打印插件的“縮放”按鈕，將頁面縮放到合適大小即可。

2、修改el——table的底層代碼（如果頁面上有多個表格慎用） 

問題原因：table-layout: fixed導(dǎo)致的，出現(xiàn)部分列沒有被打印

  分析問題：

        為了讓表table布局更加符合預(yù)期，普通使用table時，其table-layout 默認(rèn)值是 auto，導(dǎo)致表格第二行和第一行不一樣寬，也就是兩行的寬度不對齊。

        而使用：table { table-layout: fixed; }則會讓表的布局以第一行為準(zhǔn)，設(shè)置表格的寬度，然后其他行的表格寬度就按照第一行為準(zhǔn)。一般表格第一行是表頭標(biāo)題，第二行以后是數(shù)據(jù)行，也就是讓數(shù)據(jù)行的每列寬度向第一行列寬度看齊。

        這種樣式的表格布局在性能上也快得多，這是因為整個表格的內(nèi)容不需要花費進行分析，以便知道列的寬度。

        解決方法：在組件中重設(shè)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，這樣修改樣式有可能會導(dǎo)致頁面表格行錯位，解決辦法：在頁面的<el-table>標(biāo)簽上加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 打印側(cè)邊頁面缺失

如果使用 Vue.js 和 Print.js 打印頁面時出現(xiàn)了側(cè)邊頁面缺失的情況，可以嘗試以下解決方案：

• 設(shè)置打印區(qū)域大小

在使用 Print.js 打印時，可以通過 options 參數(shù)中的 cssStyle 屬性來設(shè)置打印區(qū)域的大小，例如：

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

將打印區(qū)域的大小設(shè)置得足夠大，以便容納所有內(nèi)容。

• 隱藏不必要的元素

如果打印區(qū)域內(nèi)包含了一些不必要的元素，可以通過在打印時將它們隱藏來避免打印缺失的問題。例如：

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

在打印對話框關(guān)閉時，將不必要的元素隱藏即可。

• 使用插件

除了 Print.js 之外，還有一些其他的 Vue.js 打印插件，例如 vue-print-nb、vue-html-to-paper 等，它們能夠更好地解決打印頁面缺失的問題?？梢試L試使用這些插件來解決問題。

總結(jié) 

到此這篇關(guān)于printJS打印問題匯總以及解決辦法的文章就介紹到這了,更多相關(guān)printJS打印問題內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論