快捷導(dǎo)航

printJS打印問題匯總以及解決辦法

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

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

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

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

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

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

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

問題原因：table-layout: fixed導(dǎo)致的，出現(xià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的寬度（要注意的是：這種解決方案只適用于頁面中表格不是很多的情況，如果表格很多，可以給要修改的表格加一個(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ò)亂，比如你頁面有table，打印彈出層的table，這樣修改樣式有可能會(huì)導(dǎo)致頁面表格行錯(cuò)位，解決辦法：在頁面的<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 打印頁面時(shí)出現(xiàn)了側(cè)邊頁面缺失的情況，可以嘗試以下解決方案：

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

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

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

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

隱藏不必要的元素

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

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

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