window.print() 前端頁面打印與預(yù)覽PDF

hncdman 2023-02-14 發(fā)布于湖南

展開全文

小何開發(fā)

已于 2022-09-06 10:40:30 修改

2374

分類專欄：前端文章標(biāo)簽：前端 html css

版權(quán)

前端

專欄收錄該內(nèi)容

13 篇文章0 訂閱

訂閱專欄

window.print()打印是瀏覽器自帶的打印，實(shí)現(xiàn)原理是將html轉(zhuǎn)換為pdf可以在線預(yù)覽打印或者導(dǎo)出pdf，在任何網(wǎng)頁上可通過Ctil+p快捷鍵調(diào)出瀏覽器打印程序，它可將整個(gè)網(wǎng)頁打印出來，在我們開發(fā)中，其實(shí)并不需要將所有頁面打印出來，或者只需要局部的頁面做打印，那我我們就自己實(shí)現(xiàn)window.print（）打印功能。

瀏覽器自帶的打印窗口（頁眉頁腳屬于自帶的，我們無法去掉，但是可以通過css將邊距調(diào)小，將其覆蓋掉）

實(shí)現(xiàn)代碼：

封面區(qū)域

</div>

</div>

<a-button type="primary" shape="circle" :width="200" size="large" @click="ratingReport">

打印

</a-button>

</div>

</template>

import {

} from '@/api/api'

export default {

data () {

return {

width: document.documentElement.clientWidth - 10,

param: this.$route.query,

}

created () {

this.init()

window.addEventListener('beforeprint', () => {

// 打印開始時(shí)觸發(fā)

this.loading = true

})

window.addEventListener('afterprint', () => {

// 打印結(jié)束是觸發(fā)

this.loading = false

})

methods: {

async init () {

// 初始化數(shù)據(jù)

// 按鈕觸發(fā)打印

ratingReport () {

const printHTML = document.querySelector('#report').innerHTML

// 將打印的區(qū)域賦值，進(jìn)行打印

window.document.body.innerHTML = printHTML

window.print() // 調(diào)用window打印方法

window.location.reload() // 打印完成后重新加載頁面

}

</script>

.fixed-widgets {

position: fixed;

right: 32px;

bottom: 102px;

z-index: 2147483640;

display: flex;

flex-direction: column;

cursor: pointer;

}

.cover{

display: none;

}

#body{

/* padding: 0px 200px 0px 200px; */

margin: 0 auto;

}

@media print {

@page {

margin: 0;

/* size: A4 landscape; size: landscape橫向，size: portrait;縱向，如果不設(shè)置，則頁面有橫向和縱向的選擇框 */

}

#body {

/* margin: 20cm; */

margin: 0 auto;

/* 打印時(shí)縮放，防止頁面溢出 */

/* zoom: 0.6; */

}

.cover{

display: block;

}

</style>

打印常見的功能與問題處理

打印的功能以及布局全由css控制，在加上一些程序處理的業(yè)務(wù)邏輯，則可以實(shí)現(xiàn)封面只在打印的時(shí)候出現(xiàn)

1.打印常用的css樣式控制

場(chǎng)景一：想讓某個(gè)div區(qū)域在打印時(shí)獨(dú)占某一頁，就在該div的style上加入如下屬性

page-break-before:always; 在元素前加入分頁符

page-break-after:always; 在元素后加入分頁符

場(chǎng)景二：建議用html的table做表格，不適合用框架的表格組件，有可能樣式在導(dǎo)出時(shí)不顯示，常見的就是導(dǎo)出時(shí)行的邊線沒有了，vue用v-for，jsp用 c：forEach

<th width="20%" style="word-break: break-word;">{{ item.INDICATOR_NAME }}</th>

<td width="10%" align="center">{{ item.INDICATOR_ATTR + '檔' }}</td>

<td width="70%" style="word-break: break-word">{{ item.INDICATOR_ATTR_NAME }}</td>

</tr>

</table>

場(chǎng)景三：（表格）由于數(shù)據(jù)是動(dòng)態(tài)的，有很多，所以在某種情況下數(shù)據(jù)行有可能會(huì)被截?cái)嗷蛘咝袃?nèi)的文字被橫向截?cái)啵鐖D：

解決：通過css全局對(duì)tr屬性分頁處理

tr {

/* 行被截?cái)鄷r(shí)自動(dòng)換行 */

page-break-before: always;

page-break-after: always;

page-break-inside: avoid;

}

場(chǎng)景四：表格，如果我想要表頭，想在每一頁上都帶上表頭；用table自帶的<thead></thead>將表頭部分包起來，table標(biāo)簽中有如下標(biāo)簽thead、tbody、tfoot

<thead>

<tr>

</tr>

</thead>

<td width="10%" align="center">{{ item.EFFECT_TIME }}</td>

<td width="10%" align="center">{{ item.INVALID_TIME }}</td>

<td width="16%" align="center">{{ item.RATING_INIT_RATING }}</td>

<td width="16%" align="center">{{ item.AUD_RATING }}</td>

<td width="16%" style="word-break: break-word" align="center">{{ item.INITR_NAME }}</td>

</tr>

</table>

效果：

css對(duì)導(dǎo)出PDF全局屬性：所有對(duì)pdf的樣式控制都需要寫在@media print內(nèi)，它只在導(dǎo)出時(shí)顯示，

場(chǎng)景一：去除瀏覽器默認(rèn)頁眉頁腳

@media print {

@page {

margin: 0;

}

body {

margin: 1cm;

}

場(chǎng)景二：定義橫向和縱向在@page內(nèi)加入size屬性（

橫向 size: landscape; 縱向：size: portrait; 如果不設(shè)置.則導(dǎo)出PDF面板可以選擇橫向和縱向，設(shè)置了則不顯示該選擇項(xiàng)，也可以寫成size：A4 landscape;）

@media print {

@page {

/* 縱向 */

size: portrait;

/* 邊距上右下左 */

margin: 1cm 2cm 1cm 2cm;

}

場(chǎng)景三：橫向和縱向?qū)С鰰r(shí)樣式不一樣，如何單獨(dú)設(shè)置（網(wǎng)上的例子，好像沒什么效果）

/* 按條件定義樣式：縱向 */

@media print and (orientation:portrait) {

@page {

margin: 0;

size: portrait;

}

#body {

margin: 0 auto;

}

.cover{

display: block;

}

tr {

page-break-before: always;

page-break-after: always;

page-break-inside: avoid;

}

場(chǎng)景四：橫向?qū)С稣＃v向?qū)С鲰撁鏅M向溢出了

方案一：控制只讓它導(dǎo)出橫向或縱向（看場(chǎng)景二，）然后在@media print內(nèi)的控制整體頁面的css屬性上加上zoom：0.9; 值按照需求調(diào)整，在導(dǎo)出時(shí)將頁面縮放

@media print {

@page {

}

#body {

/* 打印時(shí)縮放，防止頁面溢出 */

zoom: 0.6;

}

</style

方案二：告訴領(lǐng)導(dǎo)導(dǎo)出時(shí)如果橫向或縱向頁面溢出，也調(diào)整縮放值合適位置，在進(jìn)行導(dǎo)出

#擴(kuò)展@page 其他屬性

使用打印媒介查詢可以自定義很多樣式，當(dāng)希望改變頁面大小、邊距等，就需要用到 @page 了。頁面上下文 (Page Context) 中僅支持部分 CSS 屬性，支持的屬性有：margin、size、marks、bleed 以及頁面外邊距盒子等，不支持的屬性將會(huì)被忽略。

1、頁面外邊距盒子 (CSS3)

頁面的外邊距被分成了 16 個(gè)頁面外邊距盒子。每個(gè)外邊距盒子都有自己的外邊距、邊框、內(nèi)邊距和內(nèi)容區(qū)域。頁面外邊距盒子用于創(chuàng)建頁眉和頁腳，頁眉和頁腳是頁面的一部分，用于補(bǔ)充信息，如頁碼或標(biāo)題。

頁面外邊距盒子需要在 @page 下使用，使用起來和偽類類似，也包含 content 屬性。

@page {

/* 頁面內(nèi)容區(qū)域底部添加一條 1px 的灰線 */

@bottom-left, @bottom-center, @bottom-right {

border-top: 1px solid gray;

}

/* 頁腳中間顯示格式如 "第 3 頁" 的頁碼 */

@bottom-center {

content: "第" counter(page) "頁";

}

屬性

（1）margin

margin 系列屬性（margin-top、margin-right、margin-bottom、margin-left 和 margin）用于指定頁面外邊距大小。

在 CSS2.1 中，頁面上下文中只支持 margin 系列屬性。而且因?yàn)?CSS2.1 的頁面上下文中沒有字體的概念，margin 系列屬性的值的單位不支持 em 和 ex

@page {

size: A4 portrait;

margin: 3.7cm 2.6cm 3.5cm; /* 國(guó)家標(biāo)準(zhǔn)公文頁邊距 GB/T 9704-2012 */

}

（2）size

size 屬性支持 auto、landscape、portrait、{1,2} 和。

默認(rèn)值為 auto，表示頁面大小和方向由用戶代理決定

landscape 指定頁面為橫向，如果沒有指定，大小則由用戶代理決定

portrait 指定頁面為縱向，如果沒有指定，大小則由用戶代理決定

{1,2} 表示指定頁面大小，填寫兩個(gè)值則分別指定頁面盒子的寬度和高度，填寫一個(gè)值則同時(shí)指定寬度和高度。在 CSS3 中，值的單位支持 em 和 ex，大小相對(duì)于頁面上下文中字體的大小

也用于指定頁面大小，等價(jià)于使用 {1,2}。常用的值有：A3、A4、A5、B4 和 B5 等，詳細(xì)尺寸請(qǐng)參考 [ISO 216]。可以與 landscape 或 portrait 組合同時(shí)指定頁面方向

3、偽類

頁面上下文也支持使用偽類，其中支持的偽類有：:left、:right、:first 和 :blank。

（1）偽類 :left 和 :right

需要雙面打印時(shí)，通常需要將左頁和右頁設(shè)置不同的樣式（如頁邊距、頁碼位置）。這時(shí)左頁和右頁可以分別用 :left 和 :right 表示。

再次強(qiáng)調(diào)，通過 :left 和 :right 設(shè)置左右頁面不同樣式，并不代表用戶代理會(huì)將頁面雙面

/* 通過分別設(shè)置左頁和右頁不同的左右頁面距，為裝訂邊留出更多的空間 */

@page :left {

margin-left: 2.5cm;

margin-right: 2.7cm;

}

@page :right {

margin-left: 2.7cm;

margin-right: 2.5cm;

}

（2）偽類 :first

偽類 :first 用于匹配到文檔的第一頁。

@page :first {

margin-top: 10cm; /* 首頁上頁邊距設(shè)置為 10cm */

}

（3）偽類 :blank

偽類 :blank 用于匹配文檔的空白頁。

h1 {

page-break-before: left; /* 一級(jí)標(biāo)題強(qiáng)制分配到右頁 */

}

@page :blank {

@top-center {

content: "這是空白頁";

}

注意，空白頁既可能是左頁，又可能是右頁，設(shè)置左頁或右頁的樣式也會(huì)顯示在空白頁上，如果不希望顯示在空白頁上，可以清除這些樣式。

h1 {

break-before: left;

}

@page :left {

@left-center {

content: "這是左頁";

}

@page :right {

@right-center {

content: "這是右頁";

}

@page :blank {

@left-center, @right-center {

content: none; /* 如果是空白頁則不顯示 */

}

分頁

page-break-before，page-break-after，page-break-inside (CSS 2.1)：用于控制元素之前、之后或之中是否分頁，沒有生成盒子的塊元素不會(huì)生效。

page-break-before、page-break-after 屬性支持 auto、always、avoid、left、right、recto 和 verso。

auto 默認(rèn)值，表示既不強(qiáng)制分頁也不禁止分頁

always、avoid 表示在該元素之前（或之后）強(qiáng)制或禁止分頁

left、right 表示在該元素之前（或之后）強(qiáng)制分頁，使得下一頁出現(xiàn)在左頁或右頁

recto、verso 頁面進(jìn)度從左至右時(shí)，分別與 right 和 left 一致；反之與 left 和 right 一致

　　page-break-inside 屬性僅支持 auto 和 avoid，表示在元素內(nèi)允許或禁止分頁。

thead, tfoot {

display: table-row-group;

}

thead, tfoot, tr, th, td {

page-break-inside: avoid;

}

封面

我們可以在頁面的頂部加個(gè)div做封面，默認(rèn)是隱藏的，在@media print 導(dǎo)出時(shí)才顯示

<div>

<div style="font-size: 50px;padding: 10px 0px;">x：{{ ratingResult.MODEL_NAME }}</div>

<div style="font-size: 50px;padding: 10px 0px;">xx：{{ ratingResult.CUST_NAME }}</div>

<div style="font-size: 50px;padding: 10px 0px;">xx：{{ ratingResult.ANLT_DEPT_NAME }}</div>

</div>

</div>

.cover{

display: none;

}

@media print {

.cover{

display: block;

}

</style

添加指定的頁眉頁腳

@page {

size: A4 portrait; /* */

margin: 3.7cm 2.6cm 3.5cm; /* 國(guó)家標(biāo)準(zhǔn)公文頁邊距 GB/T 9704-2012 */

@bottom-left, @bottom-center, @bottom-right { /* 頁面內(nèi)容區(qū)域底部添加一條 1px 的灰線 */

border-top: 1px solid gray;

}

@bottom-center { /* 頁腳中間顯示格式如 "第 3 頁" 的頁碼 */

content: "第" counter(page) "頁";

}

偽類選擇器

/* 通過分別設(shè)置左頁和右頁不同的左右頁面距，為裝訂邊留出更多的空間 */

@page :left {

margin-left: 2.5cm;

margin-right: 2.7cm;

}

@page :right {

margin-left: 2.7cm;

margin-right: 2.5cm;

}

還有以下偽類：

支持的有 :left、:right、:first、:blank

:left、:right：需要雙面打印的時(shí)候，通常會(huì)用到，對(duì)左頁和右頁設(shè)置不同的樣式（如頁碼）；

:first：用于匹配文檔的第一頁；

:blank：用于匹配文檔的空白頁；

注意??：代碼里面設(shè)置了左頁和右頁的不同樣式，不代表用戶代理那里就一定會(huì)進(jìn)行雙面打?。?/p>

注意??：空白頁既可以是左頁也可以是右頁，設(shè)置左頁和右頁的樣式也會(huì)顯示到空白頁面上，如果不需要刻意清楚

整體代碼

<a-spin tip="Loading..." :spinning="loading">

<div>

<div style="font-size: 50px;padding: 10px 0px;">xxx：{{ ratingResult.MODEL_NAME }}</div>

<div style="font-size: 50px;padding: 10px 0px;">xx名稱：{{ ratingResult.CUST_NAME }}</div>

<div style="font-size: 50px;padding: 10px 0px;">xx機(jī)構(gòu)：{{ ratingResult.ANLT_DEPT_NAME }}</div>

</div>

<a-card :bordered="false" :bodyStyle="{'padding': '10px 35px'}">

</template>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xx名稱：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.CUST_NAME }}</p></a-col>

<a-col :span="span.lable"><p class="fontStyle">xx性質(zhì)：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ basicCustInfo.ENT_PROP }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xx代碼：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.ORG_CODE }}</p></a-col>

<a-col :span="span.lable"><p class="fontStyle">xx型：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.MODEL_NAME }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xx行業(yè)：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ basicCustInfo.WIND_INDUSTRY_NAME_LEVEL4 }}</p></a-col>

<a-col :span="span.lable"><p class="fontStyle">xx區(qū)域：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.AREA_CODE }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.RATING_INIT_RATING }}</p></a-col>

<a-col :span="span.lable"><p class="fontStyle">xxx</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.RATING_INIT_PD }}</p></a-col>

</a-row>

</template>

</a-card>

<a-card :bordered="false" :bodyStyle="{'padding': '10px 35px'}">

</template>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.IS_SPCL_ITEMS_NAME }}</p></a-col>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.SPCL_ITEMS_ADJ_RATING }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="20"><p class="fontStyle">{{ ADJ_DIRECTION_STR }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="20"><p class="fontStyle">{{ ratingResult.SPCL_ITEMS_REASON_DESC }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.RATING_INIT_RATING }}</p></a-col>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.SPCL_ITEMS_ADJ_RATING }}</p></a-col>

</a-row>

</template>

</a-card>

<a-card :bordered="false" :bodyStyle="{'padding': '10px 35px'}">

</template>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.IS_OVRD_RATING_NAME }}</p></a-col>

<a-col :span="span.lable"><p class="fontStyle">xxxx：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.RECOMD_RATING }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="20"><p class="fontStyle">{{ ratingResult.RECOMD_REASON }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx</p></a-col>

<a-col :span="20"><p class="fontStyle">{{ ratingResult.RECOMD_RATING }}</p></a-col>

</a-row>

</template>

</a-card>

<a-card :bordered="false" :bodyStyle="{'padding': '10px 35px'}">

<div class="cardTitle">（一）xxx情況表</div>

</template>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xx名稱：</p></a-col>

<a-col :span="20"><p class="fontStyle">{{ ratingResult.CUST_NAME }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.CUST_ID }}</p></a-col>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.ORG_CODE }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xx：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ basicCustInfo.ENT_PROP }}</p></a-col>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ basicCustInfo.FUND_DATE }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ basicCustInfo.IS_LIST_COMP_NAME }}</p></a-col>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ basicCustInfo.CCY_CODE }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ basicCustInfo.WIND_INDUSTRY_NAME_LEVEL4 }}</p></a-col>

<a-col :span="span.lable"><p class="fontStyle">xxx</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ basicCustInfo.REGIST_CAPITAL }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="20"><p class="fontStyle">{{ basicCustInfo.REGIST_PLACE }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="20"><p class="fontStyle">{{ basicCustInfo.REGIST_PLACE }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="20"><p class="fontStyle">{{ basicCustInfo.MAIN_BUSI }}</p></a-col>

</a-row>

</template>

</a-card>

<a-card :bordered="false" :bodyStyle="{'padding': '10px 35px'}">

</template>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx名：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.INITR_NAME }}</p></a-col>

<a-col :span="span.lable"><p class="fontStyle">姓xxx名：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.ANLT_NAME }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.INITR_DEPT_NAME }}</p></a-col>

<a-col :span="span.lable"><p class="fontStyle">xxx</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ ratingResult.ANLT_TEL }}</p></a-col>

</a-row>

<a-row>

<a-col :span="span.lable"><p class="fontStyle">xxx</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ XEUtils.toDateString(ratingResult.INIT_TIME, 'yyyy-MM-dd HH:mm:ss') }}</p></a-col>

<a-col :span="span.lable"><p class="fontStyle">xxx：</p></a-col>

<a-col :span="span.value"><p class="fontStyle">{{ XEUtils.toDateString(ratingResult.RECOMD_TIME, 'yyyy-MM-dd HH:mm:ss') }}</p></a-col>

</a-row>

</template>

</a-card>

<a-card :bordered="false" >

</template>

<th width="20%" style="word-break: break-word;">{{ item.INDICATOR_NAME }}</th>

<td width="10%" align="center">{{ item.INDICATOR_ATTR + '檔' }}</td>

<td width="70%" style="word-break: break-word">{{ item.INDICATOR_ATTR_NAME }}</td>

</tr>

</table>

</template>

</a-card>

<a-card :bordered="false">

</template>

<th width="40%" style="word-break: break-word;">{{ item.MODEL_INDICATOR_NAME }}</th>

<td width="45%" align="right">{{ item.INDICATOR_VALUE }}</td>

<td width="15%" style="word-break: break-word" align="center">{{ item.INDICATOR_UNIT }}</td>

</tr>

</table>

</template>

</a-card>

<a-card :bordered="false">

</template>

<thead>

<tr>

</tr>

</thead>

<td width="10%" align="center">{{ item.EFFECT_TIME }}</td>

<td width="10%" align="center">{{ item.INVALID_TIME }}</td>

<td width="16%" align="center">{{ item.RATING_INIT_RATING }}</td>

<td width="16%" align="center">{{ item.AUD_RATING }}</td>

<td width="16%" style="word-break: break-word" align="center">{{ item.INITR_NAME }}</td>

</tr>

</table>

</template>

</a-card>

</div>

<a-button type="primary" shape="circle" :width="200" size="large" @click="ratingReport">

打印

</a-button>

</div>

</a-spin>

</template>

import { getRatingResultByRatingID,

getBasicCustInfoByCustId,

getIndecatorAttrByRatingID,

getFinancialInfoByRatingId,

getCreditHistoryByCustId,

queryIndecatorList

} from '@/api/api'

import XEUtils from 'xe-utils'

export default {

data () {

return {

XEUtils: XEUtils,

loading: false,

name: 'xxx',

width: document.documentElement.clientWidth - 10,

span: {

lable: 4,

value: 8

param: this.$route.query,

ADJ_DIRECTION_STR: '',

ratingResult: {},

basicCustInfo: {},

indecatorAttr: [],

financialInfo: [],

creditHistory: [

DICT: {}

}

created () {

this.init()

window.addEventListener('beforeprint', () => {

this.loading = true

})

window.addEventListener('afterprint', () => {

this.loading = false

})

methods: {

async init () {

this.loading = true

this.$set(this.DICT, 'YES_NO', await this.$getDictByCode('YES_NO'))

await getRatingResultByRatingID({ RATING_ID: this.param.RATING_ID }).then((res) => {

console.log(this.DICT.YES_NO)

res.IS_SPCL_ITEMS_NAME = this.DICT.YES_NO[res.IS_SPCL_ITEMS] ? this.DICT.YES_NO[res.IS_SPCL_ITEMS].name : res.IS_SPCL_ITEMS

res.IS_OVRD_RATING_NAME = this.DICT.YES_NO[res.IS_OVRD_RATING] ? this.DICT.YES_NO[res.IS_OVRD_RATING].name : res.IS_OVRD_RATING

this.ratingResult = res

})

await getBasicCustInfoByCustId({ CUST_ID: this.param.CUST_ID }).then((res) => {

res.IS_LIST_COMP_NAME = this.DICT.YES_NO[res.IS_LIST_COMP] ? this.DICT.YES_NO[res.IS_LIST_COMP].name : res.IS_LIST_COMP

this.basicCustInfo = res

})

await getIndecatorAttrByRatingID({ RATING_ID: this.param.RATING_ID }).then((res) => {

this.indecatorAttr = res.VALUE_LIST

})

await getFinancialInfoByRatingId({ RATING_ID: this.param.RATING_ID }).then((res) => {

this.financialInfo = res.VALUE_LIST

})

await getCreditHistoryByCustId({ CUST_ID: this.param.CUST_ID }).then((res) => {

this.creditHistory = res.VALUE_LIST

})

await queryIndecatorList({ RATING_ID: this.param.RATING_ID, CUST_ID: this.param.CUST_ID }).then((res) => {

const data = res.VALUE_LIST

let INDICATOR_NAME = ''

let INDICATOR_ADJ_DIRECTION = ''

this.ADJ_DIRECTION_STR = ''

for (var i in data) {

INDICATOR_NAME = data[i].INDICATOR_NAME

INDICATOR_ADJ_DIRECTION = data[i].INDICATOR_ADJ_DIRECTION

if (INDICATOR_ADJ_DIRECTION === '0') {

INDICATOR_ADJ_DIRECTION = '下調(diào)'

} else {

INDICATOR_ADJ_DIRECTION = '上調(diào)'

}

this.ADJ_DIRECTION_STR += INDICATOR_NAME + '(建議' + INDICATOR_ADJ_DIRECTION + ')' + ', '

}

this.ADJ_DIRECTION_STR = this.ADJ_DIRECTION_STR.substring(0, this.ADJ_DIRECTION_STR.length - 1)

})

this.loading = false

ratingReport () {

const printHTML = document.querySelector('#report').innerHTML

// 將打印的區(qū)域賦值，進(jìn)行打印

window.document.body.innerHTML = printHTML

window.print() // 調(diào)用window打印方法

window.location.reload() // 打印完成后重新加載頁面

}

</script>

.fixed-widgets {

position: fixed;

right: 32px;

bottom: 102px;

z-index: 2147483640;

display: flex;

flex-direction: column;

cursor: pointer;

}

.cover{

display: none;

}

.cardTitle {

font-family: MiSans-Medium;

font-size: 20px;

font-weight: 500;

line-height: 22px;

letter-spacing: 0em;

color: #3D3D3D;

}

#body{

/* padding: 0px 200px 0px 200px; */

margin: 0 auto;

}

.fontStyle {

font-family: MiSans-Medium;

font-size: 14px;

font-weight: 500;

line-height: 22px;

color: #272727;

margin-bottom: 13px;

}

#body .title {

text-align: center;

font-size: 35px;

font-family: MiSans-Medium;

font-weight: 500;

color: #3D3D3D;

margin: 0;

padding: 20px;

page-break-before: always;

}

@media print {

@page {

margin: 0;

page-size: A4;

/* size: A4 landscape; size: landscape橫向，size: portrait;縱向，如果不設(shè)置，則頁面有橫向和縱向的選擇框 */

}

#body {

/* margin: 20cm; */

margin: 0 auto;

/* 打印時(shí)縮放，防止頁面溢出 */

/* zoom: 0.6; */

}

.cover{

display: block;

}

tr {

/* 行被截?cái)鄷r(shí)自動(dòng)換行 */

page-break-before: always;

page-break-after: always;

page-break-inside: avoid;

}

</style

————————————————

版權(quán)聲明：本文為CSDN博主「小何開發(fā)」的原創(chuàng)文章，遵循CC 4.0 BY-SA版權(quán)協(xié)議，轉(zhuǎn)載請(qǐng)附上原文出處鏈接及本聲明。

原文鏈接：https://blog.csdn.net/weixin_43865196/article/details/126616516

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自： hncdman > 《打印機(jī)》

舉報(bào)/認(rèn)領(lǐng)