vue自定义打印页面样式

作者: 轩_7ca0 | 来源:发表于2021-11-24 19:55 被阅读0次

vue自定义打印页面样式
Axure 9.0基础教程：你应该定义一套自己的页面样式
打印
vue html页面打印功能vue-print
打印页面设计
自定义vue组件
select+input,属性+值配合
vue scoped 用法
js实现页面部分内容打印功能
css打印如何处理链接地址

步骤1：全局引入

npm install print-js --save

步骤2：组件内引用

<div>

<el-button

type="primary"

@click="print"

>打印</el-button

</div>

</template>

import printHtml from 'print-js'

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

步骤3：创建实例方法

components: {

Print,

print() {

// 更改页面打印名称

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

printHtml({

printable: 'printMe', // 文档来源：pdf或图像url，html元素ID或json数据对象

type: 'html', // 可打印的类型。可用的打印选项包括：pdf，html，图像，json和raw-html。

// css: 'Print.css', // 这使我们可以传递一个或多个CSS文件URL，这些URL应该应用于要打印的html。值可以是具有单个URL的字符串或具有多个URL的数组。

scanStyles: false, // 设置为false时，库将不处理应用于正在打印的html的样式。使用css参数时很有用。

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

showModal: true

})

}

步骤4：创建print 页面注意：id与print方法内 printable的参数保持一致，因为样式类不起作用只能在元素style属性内写

<div

v-for="unit in printUnit"

:key="unit.code"

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

<div>

<thead style="

text-align: center;

margin:0;padding:0;

<tr>

<th

colspan="8"

style="

text-align: center;

font-size: 18px;

font-weight: bold;

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

战备储备物资调拨通知单（<span style="

font-size: 15px;

font-weight: bold;

font-family: KaiTi_GB2312;

line-height: 24px;

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

</th>

</tr>

</thead>

单    号:<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>

开单日期:<span style="font-family: SimSun">{{ printData.billDate }}</span>

</td>

</tr>

</td>

</tr>

<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"

<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

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

</tr>

</div>

</td>

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

</td>

</tr>

</td>

</tr>

运输方式:<span style="font-family: SimSun">{{ printData.freightModeName }}</span>

</td>

</tr>

</td>

</tr>

<tr>

发物单位:

</td>

<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>

<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>

<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 colspan="1" style="text-align: left"><span style="font-family: SimSun">{{ printData.sendingStation }}</span></td>

</tr>

</td>

</tr>

<tr>

收物单位:

</td>

<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>

<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>

<tr>

联系人:

</td>

<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 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;

序号

</td>

<td

style="

border: 1px solid black;

vertical-align: center;

text-align: center;

width: 340px;

物资名称

</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;

规格型号

</td>

<td

style="

border: 1px solid black;

vertical-align: center;

text-align: center;

width: 50px !important;

计量单位

</td>

<td

style="

border: 1px solid black;

vertical-align: center;

text-align: center;

width: 50px;

储备等级

</td>

<td

style="

border: 1px solid black;

vertical-align: center;

text-align: center;

width: 80px !important;

数量

</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>

<template

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

<td

style="

height: 38px;

border: 1px solid black;

vertical-align: center;

text-align: center;

</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"

</div>

<div style="

height: 38px;

overflow: hidden;

text-overflow: ellipsis;

font-size: 9px;

line-height:38px;

display:block; width:100%;

v-else

</div>

</td>

<td

style="

height: 38px;

border: 1px solid black;

vertical-align: center;

text-align: center;

overflow: hidden;

white-space: nowrap;

</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;

</td>

<td

style="

height: 38px;

border: 1px solid black;

vertical-align: center;

text-align: center;

overflow: hidden;

white-space: nowrap;

</td>

<td

style="

height: 38px;

border: 1px solid black;

vertical-align: center;

text-align: center;

overflow: hidden;

white-space: nowrap;

</td>

<td

style="

height: 38px;

border: 1px solid black;

vertical-align: center;

text-align: right;

overflow: hidden;

white-space: nowrap;

padding-right: 10px;

</td>

<td

style="

height: 38px;

border: 1px solid black;

vertical-align: center;

text-align: right;

overflow: hidden;

white-space: nowrap;

padding-right: 10px;

</td>

<td

style="

height: 38px;

border: 1px solid black;

vertical-align: center;

</td>

</template>

</tr>

<tr>

<td

colspan="2"

style="

height: 38px;

border: 1px solid black;

vertical-align: center;

text-align: center;

本调拨单合计金额(元)

</td>

<td

colspan="2"

style="

height: 38px;

border: 1px solid black;

vertical-align: center;

text-align: center;

font-family: SimSun

</td>

<td

colspan="3"

style="

height: 38px;

border: 1px solid black;

vertical-align: center;

text-align: center;

本页金额小计(元)

</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="width: 400px; line-height:10px;

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

</div> -->

<div

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

<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>

<div

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

<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

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 }}页/共{{ pagenum }}页

</div>

</div>

</template>

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() {//获取页面数据

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>

vue自定义打印页面样式
步骤1：全局引入 npm install print-js --save 步骤2：组件内引用

vue自定义打印页面样式

相关文章

vue自定义打印页面样式

Axure 9.0基础教程：你应该定义一套自己的页面样式

打印

vue html页面打印功能vue-print

打印页面设计

自定义vue组件

select+input,属性+值配合

vue scoped 用法

js实现页面部分内容打印功能

css打印如何处理链接地址

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读