vue自定義打印頁(yè)面樣式

步驟1：全局引入

npm install print-js --save

步驟2：組件內(nèi)引用

<template>

? ? <div>

? ? ? <el-button

? ? ? ? ? ? type="primary"

? ? ? ? ? ? @click="print"

? ? ? ? ? ? >打 印</el-button

? ? ? ? ? >

? ? ? <Print />

? ? </div>

</template>

import printHtml from 'print-js'

import Print from './components/Print.vue'

步驟3：創(chuàng)建實(shí)例方法

components: {? ?

? ? Print,

? },

print() {

// 更改頁(yè)面打印名稱(chēng)

? ? document.title = '******'? '.pdf'

? ? printHtml({

? ? ? printable: 'printMe', // 文檔來(lái)源：pdf或圖像url，html元素ID或json數(shù)據(jù)對(duì)象

? ? ? type: 'html', // 可打印的類(lèi)型。可用的打印選項(xiàng)包括：pdf，html，圖像，json和raw-html。

? ? ? // css: 'Print.css', // 這使我們可以傳遞一個(gè)或多個(gè)CSS文件URL，這些URL應(yīng)該應(yīng)用于要打印的html。值可以是具有單個(gè)URL的字符串或具有多個(gè)URL的數(shù)組。

? ? ? scanStyles: false, // 設(shè)置為false時(shí)，庫(kù)將不處理應(yīng)用于正在打印的html的樣式。使用css參數(shù)時(shí)很有用。

? ? ? style: '@media print{@page {size:landscape}}',

? ? ? showModal: true

? ? })

? }

步驟4：創(chuàng)建print 頁(yè)面? 注意：id與print方法內(nèi) printable的參數(shù)保持一致 ，因?yàn)闃邮筋?lèi)不起作用 只能在元素style屬性內(nèi)寫(xiě)

<template>

? <div style="position: fixed; top: 0; left: -9999px" id="pdfDom">

? ? <div id="printMe">

? ? ? <div

? ? ? ? v-for="unit in printUnit"

? ? ? ? :key="unit.code"

? ? ? ? style="padding: 10px; background: #fff !important"

? ? ? >

? ? ? ? <div v-for="(t, i) in pagenum" :key="i">

? ? ? ? ? <div style="display: flex">

? ? ? ? ? ? <div>

? ? ? ? ? ? ? <table style="border-collapse: collapse;width:100%">

? ? ? ? ? ? ? ? <thead style="

? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? margin:0;padding:0;

? ? ? ? ? ? ? ? ? ? ? ">

? ? ? ? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? ? ? <th colspan="1"></th>

? ? ? ? ? ? ? ? ? ? <th

? ? ? ? ? ? ? ? ? ? ? colspan="8"

? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? font-size: 18px;

? ? ? ? ? ? ? ? ? ? ? ? font-weight: bold;

? ? ? ? ? ? ? ? ? ? ? ? font-family: STZhongsong; margin:0;padding:0;

? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? 戰(zhàn)備儲(chǔ)備物資調(diào)撥通知單（<span style="

? ? ? ? ? ? ? ? ? ? ? ? font-size: 15px;

? ? ? ? ? ? ? ? ? ? ? ? font-weight: bold;

? ? ? ? ? ? ? ? ? ? ? ? font-family: KaiTi_GB2312;

? ? ? ? ? ? ? ? ? ? ? ? line-height: 24px;

? ? ? ? ? ? ? ? ? ? ? ">{{ printData.allocationTypeName }}</span>）

? ? ? ? ? ? ? ? ? ? </th>

? ? ? ? ? ? ? ? ? ? <th colspan="1"></th>

? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? </thead>

? ? ? ? ? ? ? ? <tbody style="font-size: 9px;font-family: SimHei">

? ? ? ? ? ? ? ? ? <tr style=" text-align: left">

? ? ? ? ? ? ? ? ? ? <td colspan="2" style="margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? 單&nbsp;&nbsp;&nbsp;&nbsp;號(hào):<span style="font-family: SimSun;margin-left:1px;">{{ printData.allocationNumber }}</span>

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? colspan="3"

? ? ? ? ? ? ? ? ? ? ? rowspan="2"

? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? font-size: 14px;

? ? ? ? ? ? ? ? ? ? ? ? font-weight: bold;

? ? ? ? ? ? ? ? ? ? ? ? font-family: KaiTi_GB2312;

? ? ? ? ? ? ? ? ? ? ? ? line-height: 24px;

? ? ? ? ? ? ? ? ? ? ? ? margin:0;padding:0;

? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? （{{ printData.printSpecialityName?printData.printSpecialityName:printData.reserveSpecialityName }}）

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td colspan="5" style="text-align: right">

? ? ? ? ? ? ? ? ? ? <tr style="font-size: 9px; text-align: right">

? ? ? ? ? ? ? ? ? ? ? <td colspan="4" style="width:191px"></td>

? ? ? ? ? ? ? ? ? ? ? ? <td colspan="2" style="width:140px;text-align: right">

? ? ? ? ? ? ? ? ? ? ? ? ? 開(kāi)單日期:<span style="font-family: SimSun">{{ printData.billDate }}</span>

? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? <tr style="font-size: 9px; text-align: left;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? <td colspan="2" rowspan="2" style="margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? <div style="

? ? ? ? ? ? ? ? ? ? ? ? ? height: 28px;

? ? ? ? ? ? ? ? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? text-overflow: ellipsis;

? ? ? ? ? ? ? ? ? ? ? ? ? font-size: 9px;

? ? ? ? ? ? ? ? ? ? ? ? ? display:block;

? ? ? ? ? ? ? ? ? ? ? ? ? line-height:15px;

? ? ? ? ? ? ? ? ? ? ? ? ? width:350px;

? ? ? ? ? ? ? ? ? ? ? ? ? margin:0;padding:0;

? ? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? ? ? v-if="printData.allocationBasis.length>26"

? ? ? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? ? <tr style="font-size: 9px; text-align: left;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? ? ? <td style="width:54px;margin:0;padding:0;">依據(jù)文號(hào):</td>

? ? ? ? ? ? ? ? ? ? ? ? ? <td ><span style="font-family: SimSun;margin:0;padding:0;">{{ printData.allocationBasis }}</span></td>

? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? ? <div style="

? ? ? ? ? ? ? ? ? ? ? ? ? height: 28px;

? ? ? ? ? ? ? ? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? text-overflow: ellipsis;

? ? ? ? ? ? ? ? ? ? ? ? ? font-size: 9px;

? ? ? ? ? ? ? ? ? ? ? ? ? display:block;

? ? ? ? ? ? ? ? ? ? ? ? ? line-height:28px;

? ? ? ? ? ? ? ? ? ? ? ? ? width:350px;margin:0;padding:0;

? ? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? ? ? v-else

? ? ? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? ? <tr style="font-size: 9px; text-align: left;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? ? ? <td style="width:54px;margin:0;padding:0;">依據(jù)文號(hào):</td>

? ? ? ? ? ? ? ? ? ? ? ? ? <td ><span style="font-family: SimSun;margin:0;padding:0;">{{ printData.allocationBasis }}</span></td>

? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td colspan="5" style="text-align: right">

? ? ? ? ? ? ? ? ? ? <tr style="font-size: 9px; text-align: right">

? ? ? ? ? ? ? ? ? ? ? <td colspan="5" style="width:191px"></td>

? ? ? ? ? ? ? ? ? ? ? ? <td colspan="2" style="width:140px;text-align: right">

? ? ? ? ? ? ? ? ? ? ? ? ? 有效期至:<span style="font-family: SimSun">{{ printData.expDate }}</span>

? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? <tr style="font-size: 9px; text-align: left">

? ? ? ? ? ? ? ? ? ? <td colspan="4" style="text-align: right"></td>

? ? ? ? ? ? ? ? ? ? <td colspan="4" style="text-align: right">

? ? ? ? ? ? ? ? ? ? <tr style="font-size: 9px; text-align: right">

? ? ? ? ? ? ? ? ? ? ? <td colspan="4" style="width:140px"></td>

? ? ? ? ? ? ? ? ? ? ? ? <td? style="text-align: right">

? ? ? ? ? ? ? ? ? ? ? ? ? 運(yùn)輸方式:<span style="font-family: SimSun">{{ printData.freightModeName }}</span>

? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? <tr style="font-size: 9px; text-align: left;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? <td colspan="5" style="width:500px;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <td style="width:54px;margin:0;padding:0;" >

? ? ? ? ? ? ? ? ? ? ? ? ? ? 發(fā)物單位:

? ? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? ? ? <td? style="width:260px;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? ? ? ? <div style="

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? height: 18px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-overflow: ellipsis;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-size: 9px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? display:block;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? line-height:18px;margin:0;padding:0;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span style="font-family: SimSun">{{ printData.supplierOrganization }}</span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? ? ? <td style="width:54px;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? ? ? ? 發(fā)物地址:

? ? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? ? ? <td colspan="3" style="width:280px;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? ? ? ? <div style="

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? height: 18px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-overflow: ellipsis;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-size: 9px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? display:block;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? line-height:18px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? margin:0;padding:0;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span style="font-family: SimSun">{{ printData.sendCompanyAddr?printData.sendCompanyAddr:'' }}</span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td colspan="5" style="width:200px;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? <tr style="margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? ? <td style="width:45px;margin:0;padding:0;">聯(lián)系人:</td>

? ? ? ? ? ? ? ? ? ? ? ? <td? v-if="printData.sendCompanyContacts" style="margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? ? ? <div style=" width:150px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? height: 18px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-overflow: ellipsis;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-size: 9px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? display:block;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? line-height:18px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-family: SimSun;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? margin:0;padding:0;text-align: left;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? "? >{{ printData.sendCompanyContacts }}</div>

? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? ? <td v-else style="width:150px;margin:0;padding:0;"> </td>

? ? ? ? ? ? ? ? ? ? ? ? <td colspan="1" style="text-align: right">發(fā)&nbsp;&nbsp;&nbsp;&nbsp;站:</td>

? ? ? ? ? ? ? ? ? ? ? ? <td colspan="1" style="text-align: left"><span style="font-family: SimSun">{{ printData.sendingStation }}</span></td>

? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? <tr style="font-size: 9px; text-align: left;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? <td colspan="5" style="width:500px;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <td style="width:54px;margin:0;padding:0;" >

? ? ? ? ? ? ? ? ? ? ? ? ? ? 收物單位:

? ? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? ? ? <td? style="width:260px;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? ? ? ? <div style="

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? height: 18px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-overflow: ellipsis;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-size: 9px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? display:block;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? line-height:18px;margin:0;padding:0;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span style="font-family: SimSun" >{{ printData.recieveyOrganization }}</span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? ? ? <td style="width:54px;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? ? ? ? 收物地址:

? ? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? ? ? <td colspan="3" style="width:280px;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? ? ? ? <div style="

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? height: 18px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-overflow: ellipsis;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-size: 9px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? display:block;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? line-height:18px;margin:0;padding:0;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ">

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <td>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <span style="font-family: SimSun" v-if="printData.receivedCompanyAddr">{{ printData.receivedCompanyAddr }}</span>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td colspan="5" style="width:200px;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? ? ? ? ? ? <td style="width:45px;margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? ? ? ? 聯(lián)系人:

? ? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? ? ? <td? v-if="printData.receivedCompanyContacts" style="margin:0;padding:0;">

? ? ? ? ? ? ? ? ? ? ? ? ? <div style=" width:150px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? height: 18px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? text-overflow: ellipsis;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-size: 9px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? display:block;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? line-height:18px;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font-family: SimSun;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? margin:0;padding:0;text-align: left;

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ">{{ printData.receivedCompanyContacts }}</div>

? ? ? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? ? ? <td v-else style="width:150px;margin:0;padding:0;"> </td>

? ? ? ? ? ? ? ? ? ? ? ? ? <td colspan="1" style="text-align: right">到&nbsp;&nbsp;&nbsp;&nbsp;站:</td>

? ? ? ? ? ? ? ? ? ? ? ? ? <td colspan="1" style="text-align: left"><span? style="font-family: SimSun">{{ printData.arrivalStation }}</span></td>

? ? ? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? height: 38px;

? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? width: 30px;

? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? 序號(hào)

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? width: 340px;

? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? 物資名稱(chēng)

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? width: 80px;

? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? 物資編碼

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? width: 120px !important;

? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? 規(guī)格型號(hào)

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? width: 50px !important;

? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? 計(jì)量單位

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? width: 50px;

? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? 儲(chǔ)備等級(jí)

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? width: 80px !important;

? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? 數(shù)量

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? width: 100px;

? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? 金額

? ? ? ? ? ? ? ? ? ? ? (元)

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? width: 100px;

? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? 備注

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? <tr v-for="(item, index) in printData.itemList" :key="index" style="font-size: 9px;font-family: SimSun">

? ? ? ? ? ? ? ? ? ? <template

? ? ? ? ? ? ? ? ? ? ? v-if="index >= pageSize * i && index < pageSize * (i + 1)"

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? ? height: 38px;

? ? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? ? {{ index + 1 }}

? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? <td style="

? ? ? ? ? ? ? ? ? ? ? ? ? height: 38px;

? ? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? <div style="

? ? ? ? ? ? ? ? ? ? ? ? ? height: 38px;

? ? ? ? ? ? ? ? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? text-overflow: ellipsis;

? ? ? ? ? ? ? ? ? ? ? ? ? font-size: 9px;

? ? ? ? ? ? ? ? ? ? ? ? ? line-height:15px;

? ? ? ? ? ? ? ? ? ? ? ? ? display:block; width:100%;

? ? ? ? ? ? ? ? ? ? ? ? ? display: flex;

? ? ? ? ? ? ? ? ? ? ? ? ? align-items: center;

? ? ? ? ? ? ? ? ? ? ? ? ? justify-content: left;

? ? ? ? ? ? ? ? ? ? ? ? ? text-align: justify;

? ? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? ? ? v-if="item && item.reserveItemName.length>26"

? ? ? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? ? {{ item && item.reserveItemName.slice(0,52) }}

? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? ? <div style="

? ? ? ? ? ? ? ? ? ? ? ? ? height: 38px;

? ? ? ? ? ? ? ? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? text-overflow: ellipsis;

? ? ? ? ? ? ? ? ? ? ? ? ? font-size: 9px;

? ? ? ? ? ? ? ? ? ? ? ? ? line-height:38px;

? ? ? ? ? ? ? ? ? ? ? ? ? display:block; width:100%;

? ? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? ? ? v-else

? ? ? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? ? {{ item && item.reserveItemName }}

? ? ? ? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? ? height: 38px;

? ? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? white-space: nowrap;

? ? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? ? {{ item && item.businessReserveItemCode }}

? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? ? height: 38px;

? ? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? ? white-space: nowrap;

? ? ? ? ? ? ? ? ? ? ? ? ? maxWidth: 160px !important;

? ? ? ? ? ? ? ? ? ? ? ? ? white-space:nowrap;

? ? ? ? ? ? ? ? ? ? ? ? ? overflow:hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? text-overflow:ellipsis;

? ? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? ? {{ item && item.itemSam }}

? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? ? height: 38px;

? ? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? white-space: nowrap;

? ? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? ? {{ item && item.itemUnit }}

? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? ? height: 38px;

? ? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? white-space: nowrap;

? ? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? ? {{ item && item.reserveGradeName }}

? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? ? height: 38px;

? ? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? ? text-align: right;

? ? ? ? ? ? ? ? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? white-space: nowrap;

? ? ? ? ? ? ? ? ? ? ? ? ? padding-right: 10px;

? ? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? ? {{ item && item.itemQuantity }}

? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? ? height: 38px;

? ? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? ? text-align: right;

? ? ? ? ? ? ? ? ? ? ? ? ? overflow: hidden;

? ? ? ? ? ? ? ? ? ? ? ? ? white-space: nowrap;

? ? ? ? ? ? ? ? ? ? ? ? ? padding-right: 10px;

? ? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? ? {{ item && Number(item.itemAmount).toFixed(2) }}

? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? ? height: 38px;

? ? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? ? {{ item && item.remk }}

? ? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? ? <div style="page-break-after: always"></div>

? ? ? ? ? ? ? ? ? ? </template>

? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? ? <tr>

? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? colspan="2"

? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? height: 38px;

? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? 本調(diào)撥單合計(jì)金額(元)

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? colspan="2"

? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? height: 38px;

? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? font-family: SimSun

? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? {{ printData.totalAmount | numFormat }}

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? colspan="3"

? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? height: 38px;

? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? 本頁(yè)金額小計(jì)(元)

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? ? <td

? ? ? ? ? ? ? ? ? ? ? colspan="2"

? ? ? ? ? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? ? ? ? ? height: 20px;

? ? ? ? ? ? ? ? ? ? ? ? border: 1px solid black;

? ? ? ? ? ? ? ? ? ? ? ? vertical-align: center;

? ? ? ? ? ? ? ? ? ? ? ? text-align: center;

? ? ? ? ? ? ? ? ? ? ? ? font-family: SimSun

? ? ? ? ? ? ? ? ? ? ? "

? ? ? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? ? ? {{

? ? ? ? ? ? ? ? ? ? ? ? printData.itemList

? ? ? ? ? ? ? ? ? ? ? ? ? .slice(i * pageSize, (i + 1) * pageSize)

? ? ? ? ? ? ? ? ? ? ? ? ? .map((item) => item.itemAmount)

? ? ? ? ? ? ? ? ? ? ? ? ? .reduce((pre, next) => pre + next, 0) | numFormat

? ? ? ? ? ? ? ? ? ? ? }}

? ? ? ? ? ? ? ? ? ? </td>

? ? ? ? ? ? ? ? ? </tr>

? ? ? ? ? ? ? ? </tbody>

? ? ? ? ? ? ? </table>

? ? ? ? ? ? ? <div style="display: flex; height: 38px;font-size: 9px; padding-top: 2px">

? ? ? ? ? ? ? ? <!-- <div style="width: 400px; line-height:10px;

? ? ? ? ? ? ? ? ? ? ? ? ? overflow:hidden; margin:0;padding:0;">簽發(fā)單位(公章):<span? style="font-family: SimSun">{{ printData.managermentOrganizationName?printData.managermentOrganizationName.repeat(40):'' }}</span>

? ? ? ? ? ? ? ? </div> -->

? ? ? ? ? ? ? ? <div

? ? ? ? ? ? ? ? ? style="display: flex;? width: 500px;"

? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? <div style="text-align: right;? min-width: 85px;margin:0;padding:0;">簽發(fā)單位(公章):</div>

? ? ? ? ? ? ? ? ? <div style="text-align: left;min-width:330px;line-height:20px;margin:0;padding:0;

? ? ? ? ? ? ? ? ? ? ? ? ? overflow:hidden;font-family: SimSun">{{ printData.managermentOrganizationName?printData.managermentOrganizationName:'' }}</div>

? ? ? ? ? ? ? ? <div style="text-align: left;min-width: 80px;">局(處)長(zhǎng):</div>

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? ? <div

? ? ? ? ? ? ? ? ? style="display: flex; justify-content: space-around;width: 450px;"

? ? ? ? ? ? ? ? >

? ? ? ? ? ? ? ? ? <div style="text-align: center;min-width: 60px;"></div>

? ? ? ? ? ? ? ? ? <div style="text-align: center;width: 140px;">承辦人:</div>

? ? ? ? ? ? ? ? ? <div style="text-align: center;width: 180px;white-space:nowrap;

? ? ? ? ? ? ? ? ? ? ? ? ? overflow:hidden;">電話:<span? style="font-family: SimSun">{{ printData.phone?printData.phone:'' }}</span></div>

? ? ? ? ? ? ? ? </div>

? ? ? ? ? ? ? </div>

? ? ? ? ? ? </div>

? ? ? ? ? ? <div

? ? ? ? ? ? ? style="

? ? ? ? ? ? ? ? width: 20px;

? ? ? ? ? ? ? ? margin-top: 40vh;

? ? ? ? ? ? ? ? font-size: 9px;

? ? ? ? ? ? ? ? padding-left: 10px;

? ? ? ? ? ? ? ? white-space: pre-wrap;

? ? ? ? ? ? ? "

? ? ? ? ? ? ? v-html="unit.value"

? ? ? ? ? ? ></div>

? ? ? ? ? </div>

? ? ? ? ? <div

? ? ? ? ? ? style="font-size: 9px;text-align: center; margin-top: 10px; font-family: SimSun"

? ? ? ? ? >

? ? ? ? ? ? 第{{ i + 1 }}頁(yè)/共{{ pagenum }}頁(yè)

? ? ? ? ? </div>

? ? ? ? ? <div style="page-break-after: always"></div>

? ? ? ? </div>

? ? ? </div>

? ? </div>

? </div>

</template>

<script lang="ts">

import { printingApi } from '@/api/goodsTransfer/createAllocationSheet/detail'

export default class Print extends Vue {

? created() {

? ? if (this.$route.query.id) {

? ? ? this.getData()

? ? }

? }

? private pageSize = 10;

? private pagenum = 0;

? private printData: any = [];

? private getData() {//獲取頁(yè)面數(shù)據(jù)

? ? printingApi(this.$route.query.id).then((res: any) => {

? ? ? this.printData = JSON.parse(JSON.stringify(res.data))

? ? ? if (this.printData.itemList.length === 0) {

? ? ? ? this.pagenum = 1

? ? ? } else {

? ? ? ? this.pagenum = Math.ceil(

? ? ? ? ? this.printData.itemList.length / this.pageSize

? ? ? ? )

? ? ? }

? ? ? this.printData.itemList.length =

? ? ? ? this.printData.itemList.length +

? ? ? ? (this.pageSize - (this.printData.itemList.length % this.pageSize))

? ? })

? }

}

</script>

<style lang="scss" scoped>

</style>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容