vue调用打印功能(print)

功能(print)"/>

vue调用打印功能(print)

最近有个需求是调用打印功能，并且打印发货单

<template><div id="print_content" style="color: #000;font-family:'微软雅黑';"><div ref="print" class="printtable" :class="{isPrint: isPrint,noPrint: !isPrint}" :style="{opacity: isHidden ? '0' : '1'}" ><h1>物流发货单</h1><table><tr ><td>揽收公司</td><td>{{collectCompany}}</td><td>客户名称</td><td>深圳市贸易有限公司</td><td>发货仓库</td><td>{{warehouseId}}</td><td>编号：{{loadNo}}</td></tr><tr><td>序号</td><td colspan='2'>交运公司</td><td>袋数</td><td>件数</td><td>重量</td><td>备注</td></tr><tr v-for="(item,index) in listData"><td>{{index + 1}}</td><td colspan='2'>{{item.deliveryCompany}}</td><td>{{item.count}}</td><td>{{item.apvCount}}</td><td>{{item.totalWeight/1000}}</td><td></td></tr><tr><td>合计</td><td colspan='2'>——————</td><td>{{totalCount}}</td><td>{{totalApvCount}}</td><td>{{totalWeight/1000}}</td><td></td></tr><tr><td>说明</td><td colspan='6' style="textAlign: left">1、提货物流公司收货人员须与我公司发货员当面交接清楚后签字确认，后续所有查证以本《物流发货单》记录为准；2、本表一式三份，公司发货员/账务文员/物流公司收货人员各执一份，具有同等法律效力。</td></tr><td>发货人</td><td></td><td>收货人</td><td></td><td>联系方式</td><td></td><td>收货日期：{{loadDate}}</td></table></div></div>
</template><script>import * as shipmanage from '@/api/shipmanage.api'export default {name: 'shipManageSheet',data() {return {isHidden: false,isPrint: false,loadDate: '',collectCompany: '',warehouseId: '',loadNo: '',listData: [],totalCount: 0,totalApvCount: 0,totalWeight: 0,}},created () {this.loadDate = this.$route.query.loadDate;this.collectCompany = this.$route.query.collectCompany;this.warehouseId = this.$route.query.warehouseId;this.loadNo = this.$route.query.loadNo;shipmanage.viewDetails(this.loadNo).then(res => {this.listData = res.data.result;this.listData.forEach((item) => { // 合计信息this.totalCount += item.count;this.totalApvCount += item.apvCount;this.totalWeight += item.totalWeight;})if(this.$route.params.isPrint == 'print'){this.isPrint = true;this.$nextTick(() => {this.doPrint()  //直接调用打印方法this.isHidden = true;})}else{this.isPrint = false;}})},methods:{// 打印doPrint () {window.print()}}}
</script>
<style lang="less">.printtable {text-align: center;margin: 2cm auto;padding: 0 10px;&.isPrint {max-width: 95%;}&.noPrint {width: 200mm;}h1 {color: black;}table,th,td {border: 1px solid black;color: black;}table {width: 100%;border-collapse: collapse;text-align: center;th, td {padding: 2px 5px;font-size: 12px;}tr:nth-child(1) {td:nth-child(1), td:nth-child(3), td:nth-child(5) {width: 9.5%;}td:nth-child(2), td:nth-child(4), td:nth-child(6) {width: 16.5%;}td:nth-child(7) {width: 22%;}}}
}
</style>

如果有样式变化，可以设置打印样式

详情可以查阅相关资料
如果直接调用print()方法去打印网页内容，就会发现，事先调整好的布局和样式都没法实现，以下几种解决方法

1.使用打印样式表

配置一份打印样式表print.css，引入到HTML文档，在 <link> 上加上一个 media=“print” 来标识这是打印机才会应用的样式表，这样打印的时候，就会默认将该样式表应用到文档中

<link href="/path/print.css" media="print" rel="stylesheet" />

2.使用媒介查询

当我们要修改的样式没有很多的时候，其实完全不需要重新写个样式表，只要写上一个媒介查询也可以达到同样的效果，如：

 @media print {h1 {font-size: 20px;color: red;}
}

3.内联样式使用media属性

4.在css中使用@import引入打印样式表

@import url("/path/print.css") print;