vue使用Print.js打印頁面樣式不出現(xiàn)的解決
vue Print.js打印頁面樣式不出現(xiàn)
解決方案
加上這句就好了！完美！
vue-print-nb打印問題總結
1、表格的列缺失（element-ui table組件）
原因：table-layout: fixed導致的，出現(xiàn)部分列沒有被打印
讓表table布局更加符合預期，普通使用table時，其table-layout 默認值是 auto，導致表格第二行和第一行不一樣寬，也就是兩行的寬度不對齊。而使用：
table { table-layout: fixed; }則會讓表的布局以第一行為準，設置表格的寬度，然后其他行的表格寬度就按照第一行為準。一般表格第一行是表頭標題，第二行以后是數(shù)據(jù)行，也就是讓數(shù)據(jù)行的每列寬度向第一行列寬度看齊。
這種樣式的表格布局在性能上也快得多，這是因為整個表格的內(nèi)容不需要花費進行分析，以便知道列的寬度。
解決方法：
<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>2、打印內(nèi)容缺失（print.js/print-js獨有，固定高度導致）
原因：一般為了好看，會固定高度，然后超出內(nèi)容出現(xiàn)滾動條，但是打印的時候，只會打印固定高度的內(nèi)容，導致打印內(nèi)容缺失
解決方法：
<style scoped>
? ? @media print {
? ? ? ? #box{
? ? ? ? ? ? height: 100%;
? ? ? ? }
? ? }
</style>或者這樣：
找到print.js的getStyle方法，加入一行代碼
str += "<style>html,body,div{height: auto !important;}</style>";
getStyle: function () {
?? ??? ?var str = "",
?? ??? ??? ?styles = document.querySelectorAll('style,link');
?? ??? ?for (var i = 0; i < styles.length; i++) {
?? ??? ??? ?str += styles[i].outerHTML;
?? ??? ?}
?? ??? ?str += "<style>" + (this.options.noPrint ? this.options.noPrint : '.no-print') + "{display:none;}</style>";
?? ??? ?str += "<style>html,body,div{height: auto !important;}</style>";
?
?? ??? ?return str;
?? ?},注意點：
1、box是你固定高度標簽的id，當然你也可以換成class或者其他，使樣式生效即可
2、@media print只影響打印的樣式，不會影響頁面樣式
3、表格內(nèi)容缺失（表格滾動導致，只打印顯示區(qū)域內(nèi)容）
原因：不管是print.js還是vue-print-nb插件，都有這個問題，因為表格滾動導致
解決方法：
用一個隱藏div包裹你要打印的表格或者還有其他內(nèi)容，總體包裹
<div id="boxbox" style="display:none;"> ? ? ? ? <el-table :data="formList" style="width: 100%" border ?width="100%"> ? ? ? ? ? ? <el-table-column align="center" ?width="200" prop="prop" ?label="列名"></el-table-column> ? ? ? ? ? ? <el-table-column label="是否啟用" width="100"> ? ? ? ? ? ? ? ? <template slot-scope="scope"> ? ? ? ? ? ? ? ? ? ? <el-switch v-model="scope.row.show" :active-value="1" :inactive-value="2" active-color="#409eff" inactive-color="#B9B9B9" ? ? ? ? ? ? ? ? ? ? @change="changeSwitch(scope.row)"/> ? ? ? ? ? ? ? ? </template> ? ? ? ? ? ? </el-table-column> ? ? ? ? ? ? <el-table-column label="是否必填" width="100"> ? ? ? ? ? ? ? ? <template slot-scope="scope"> ? ? ? ? ? ? ? ? ? ? <el-switch v-model="scope.row.required" :active-value="1" :inactive-value="2" active-color="#409eff" inactive-color="#B9B9B9" ? ? ? ? ? ? ? ? ? ? @change="changeSwitch(scope.row)"/> ? ? ? ? ? ? ? ? </template> ? ? ? ? ? ? </el-table-column> ? ? ? ? ? ? <el-table-column align="center" ?prop="sort" width="150" ?label="排序"></el-table-column> ? ? ? ? ? ? <el-table-column label="操作" ?align="center" ?width="200"> ? ? ? ? ? ? ? ? <template slot-scope="scope"> ? ? ? ? ? ? ? ? ? ? <span v-if="scope.row.sort!=0" class="editrow" @click="up(scope.row)" style="margin-right:10px">上升</span> ? ? ? ? ? ? ? ? ? ? <span v-if="scope.row.sort!=formList.length-1" class="editrow" style="margin-right:10px" @click="down(scope.row)">下降</span> ? ? ? ? ? ? ? ? ? ? <span v-if="scope.row.sort!=0" class="editrow" @click="upToZero(scope.row)" style="margin-right:10px">置頂</span> ? ? ? ? ? ? ? ? ? ?? ? ? ? ? ? ? ? ? </template> ? ? ? ? ? ? </el-table-column> ? ? ? ? </el-table> ? ? ? </div>
注意點:
1、經(jīng)過測試，A4紙大小寬度大致在650px，所以你隱藏的table列，要自己設置寬度，整體寬度在750左右，大于750，列會超出，不打印，小于750，右邊會留有空白
2、<el-table>不能固定高度，所以不要設置高度
4、不能分頁
原因：不管你是下載print.js保存到本地，還是npm下載print-js，只能打印一頁，可能太菜了
解決方法：
使用插件：vue-print-nb，使用方法：vue-print-nb
此插件會根據(jù)打印內(nèi)容的高度，自己分頁，如果想自定義分頁的話，方法如下：
1、在末尾的最后一個標簽，加入樣式 style="page-break-after: always;"
<div style="page-break-after: always;">我是本頁的末尾哦</div>
2、定義打印樣式，原理同上，但是方便需要，只需要統(tǒng)一定義class即可
@media print {
? ? ? ? @page{
? ? ? ? ? ? size: ?auto;
? ? ? ? ? ? margin: 3mm;
? ? ? ? }
? ? ? ? .footer {page-break-after: always;}
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
基于Vite2.x的Vue 3.x項目的搭建實現(xiàn)
這篇文章主要介紹了基于Vite2.x的Vue 3.x項目的搭建實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-04-04
使用Vue3和ApexCharts實現(xiàn)3D徑向條形圖的代碼
徑向條形圖是一種用于可視化單一數(shù)據(jù)點及其與目標或理想值的關系的圖表類型,它在顯示進度、完成率或其他類似度量時非常有用,本文給大家介紹了使用Vue3和ApexCharts實現(xiàn)3D徑向條形圖,感興趣的小伙伴可以參考閱讀下2024-06-06
vue中v-for和v-if一起使用之使用compute的示例代碼
這篇文章主要介紹了vue中v-for和v-if一起使用之使用compute的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-05-05
這篇文章主要為大家詳細介紹了Vue分頁插件的前后端配置與使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-10-10
vue-router判斷頁面未登錄自動跳轉(zhuǎn)到登錄頁的方法示例
這篇文章主要介紹了vue-router判斷頁面未登錄自動跳轉(zhuǎn)到登錄頁的方法示例,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-11-11
vite+vue3項目集成ESLint與prettier的過程詳解
這篇文章主要介紹了vite+vue3項目中集成ESLint與prettier的相關知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
在本篇文章里我們給大家整理的是關于vue指令v-html使用過濾器filters功能的實例內(nèi)容，需要的朋友們學習下。2019-10-10
本文主要介紹了vue請求接口并且攜帶token的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-07-07
vue中el-date-picker選擇日期的限制的項目實踐
ElementUI的el-date-picker使用時,有時候想要限制用戶選擇的時間范圍,本文就來介紹了vue中el-date-picker選擇日期的限制的項目實踐,感興趣的可以了解一下2023-10-10
element?ui?el-calendar日歷組件使用方法總結
這篇文章主要給大家介紹了關于element?ui?el-calendar日歷組件使用方法的相關資料,elementui是一款基于Vue.js的UI框架,其中的日歷組件calendar是elementui中非常常用的組件之一,需要的朋友可以參考下2023-07-07