快捷導(dǎo)航

printJS打印問(wèn)題匯總以及解決辦法

更新時(shí)間：2024年05月07日 09:03:32 作者：小張快跑。

Print.js一個(gè)小的javascript庫(kù),可幫助您從網(wǎng)絡(luò)上打印,這篇文章主要給大家介紹了關(guān)于printJS打印問(wèn)題匯總以及解決辦法的相關(guān)資料,文中介紹的非常詳細(xì),需要的朋友可以參考下

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

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

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

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

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

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

分析問(wèn)題：

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

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

這種樣式的表格布局在性能上也快得多，這是因?yàn)檎麄€(gè)表格的內(nèi)容不需要花費(fèi)進(jìn)行分析，以便知道列的寬度。

解決方法：在組件中重設(shè)el-table的寬度（要注意的是：這種解決方案只適用于頁(yè)面中表格不是很多的情況，如果表格很多，可以給要修改的表格加一個(gè)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>

注意點(diǎn)：

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

可能會(huì)造成樣式錯(cuò)亂，比如你頁(yè)面有table，打印彈出層的table，這樣修改樣式有可能會(huì)導(dǎo)致頁(yè)面表格行錯(cuò)位，解決辦法：在頁(yè)面的<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è)邊頁(yè)面缺失

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

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

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

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

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

隱藏不必要的元素

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

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

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