一、安装组件
npm install vue-print-nb --save
二、引入组件
import Print from "vue-print-nb";
import Vue from "vue";
Vue.use(Print);
三、使用
<div id="printMe" >
<p>打印内容</p>
</div>
<button v-print="'#printMe'">打印</button>
四、设置打印样式
在<style>标签里面谢样式
@page {
margin: 0;
}
@media print {
.noprint {
display: none;
}
}
五、完整代码示例
<template>
<el-dialog
:append-to-body="true"
:close-on-click-modal="false"
:before-close="cancel"
:visible.sync="dialog"
:title="isAdd ? '新增' : '订单详情'"
width="990px"
>
<div id="printTest">
<el-card>
<div slot="header">
<span>收货信息</span>
</div>
<div class="text item">用户昵称:{{ form.nickname }}</div>
<div class="text item">收货人: {{ form.realName }}</div>
<div class="text item">联系电话: {{ form.userPhone }}</div>
<div class="text item">收货地址: {{ form.userAddress }}</div>
</el-card>
<el-card>
<div slot="header">
<span>订单信息</span>
</div>
<el-row :gutter="24">
<el-col :span="12">
<div class="text item">订单编号: {{ form.orderId }}</div>
<div class="text item">商品总数: {{ form.totalNum }}</div>
<div class="text item">支付邮费: {{ form.totalPostage }}</div>
<div class="text item">实际支付: {{ form.payPrice }}</div>
<div class="text item">支付方式: {{ form.payTypeName }}</div>
</el-col>
<el-col :span="12">
<div class="text item">订单状态: {{ form.statusName }}</div>
<div class="text item">商品总价: {{ form.totalPrice }}</div>
<div class="text item">优惠券金额: {{ form.couponPrice }}</div>
<div class="text item">创建时间: {{ formatTimeTwo(form.addTime) }}</div>
<div class="text item">支付时间: {{ formatTimeTwo(form.payTime) }}</div>
</el-col>
</el-row>
</el-card>
<el-card>
<div slot="header">
<span>商品信息</span>
</div>
<el-row :gutter="24">
<!--表格渲染-->
<el-table
v-loading="loading"
:data="form.cartInfoList"
size="small"
style="width: 100%;font-size:10px;"
>
<el-table-column prop="cartInfoMap.productInfo.barCode" label="商品编码" />
<el-table-column prop="cartInfoMap.productInfo.storeName" label="商品名称" />
<el-table-column prop="cartInfoMap.productInfo.attrInfo.suk" label="规格" />
<el-table-column prop="cartInfoMap.cartNum" label="销售数量" />
<el-table-column prop="cartInfoMap.productInfo.otPrice" label="市场价格" />
<el-table-column prop="cartInfoMap.productInfo.price" label="呐喊价格" />
<el-table-column label="库存">
<template slot-scope="scope">
<span
v-if="scope.row.cartInfoMap.productInfo.stock != '点击查看'"
>{{scope.row.cartInfoMap.productInfo.stock}}</span>
<span>
<el-button
v-if="scope.row.cartInfoMap.productInfo.stock == '点击查看'"
size="mini"
@click="showStock(scope.row)"
>查库存</el-button>
</span>
</template>
</el-table-column>
</el-table>
</el-row>
</el-card>
<el-card>
<div slot="header">
<span>物流信息</span>
</div>
<div class="text item">快递公司:{{ form.deliveryName }}</div>
<div class="text item">快递单号:{{ form.deliveryId }}</div>
</el-card>
<el-card>
<div slot="header">
<span>备注信息</span>
</div>
<div class="text item">{{ form.remark }}</div>
</el-card>
<el-card>
<div slot="header">
<span>客户备注信息</span>
</div>
<div class="text item">{{ form.mark }}</div>
</el-card>
</div>
<span slot="footer" class="dialog-footer noprint">
<el-button @click="dialog = false">关 闭</el-button>
<el-button type="primary" v-print="'#printTest'">打 印</el-button>
</span>
</el-dialog>
</template>
<script>
import { add, edit, levelPriceList } from "@/api/yxStoreOrder";
import { formatTimeTwo } from "@/utils/index";
import { detail } from "@/api/yxStoreProduct";
import Print from "vue-print-nb";
import Vue from "vue";
Vue.use(Print);
export default {
components: {
Print
},
props: {
isAdd: {
type: Boolean,
required: true
}
},
data() {
return {
loading: false,
dialog: false,
form: {
id: "",
orderId: "",
uid: "",
realName: "",
userPhone: "",
userAddress: "",
cartId: "",
freightPrice: "",
totalNum: "",
totalPrice: "",
totalPostage: "",
payPrice: "",
payPostage: "",
deductionPrice: "",
couponId: "",
couponPrice: "",
paid: "",
payTime: "",
payType: "",
addTime: "",
status: "",
refundStatus: "",
refundReasonWapImg: "",
refundReasonWapExplain: "",
refundReasonTime: "",
refundReasonWap: "",
refundReason: "",
refundPrice: "",
deliveryName: "",
deliveryType: "",
deliveryId: "",
gainIntegral: "",
useIntegral: "",
backIntegral: "",
mark: "",
isDel: "",
unique: "",
remark: "",
merId: "",
isMerCheck: "",
combinationId: "",
pinkId: "",
cost: "",
seckillId: "",
bargainId: "",
verifyCode: "",
storeId: "",
shippingType: "",
isChannel: "",
isRemind: "",
isSystemDel: ""
},
rules: {
unique: [{ required: true, message: "please enter", trigger: "blur" }]
}
};
},
methods: {
formatTimeTwo,
showStock(row) {
detail(row.cartInfoMap.productInfo.id).then(res => {
row.cartInfoMap.productInfo.stock = res.stock;
});
},
cancel() {
this.resetForm();
},
doSubmit() {
this.loading = true;
if (this.isAdd) {
this.doAdd();
} else this.doEdit();
},
doAdd() {
add(this.form)
.then(res => {
this.resetForm();
this.$notify({
title: "添加成功",
type: "success",
duration: 2500
});
this.loading = false;
this.$parent.init();
})
.catch(err => {
this.loading = false;
console.log(err.response.data.message);
});
},
doEdit() {
edit(this.form)
.then(res => {
this.resetForm();
this.$notify({
title: "修改成功",
type: "success",
duration: 2500
});
this.loading = false;
this.$parent.init();
})
.catch(err => {
this.loading = false;
console.log(err.response.data.message);
});
},
resetForm() {
this.dialog = false;
this.form = {
id: "",
orderId: "",
uid: "",
realName: "",
userPhone: "",
userAddress: "",
cartId: "",
freightPrice: "",
totalNum: "",
totalPrice: "",
totalPostage: "",
payPrice: "",
payPostage: "",
deductionPrice: "",
couponId: "",
couponPrice: "",
paid: "",
payTime: "",
payType: "",
addTime: "",
status: "",
refundStatus: "",
refundReasonWapImg: "",
refundReasonWapExplain: "",
refundReasonTime: "",
refundReasonWap: "",
refundReason: "",
refundPrice: "",
deliveryName: "",
deliveryType: "",
deliveryId: "",
gainIntegral: "",
useIntegral: "",
backIntegral: "",
mark: "",
isDel: "",
unique: "",
remark: "",
merId: "",
isMerCheck: "",
combinationId: "",
pinkId: "",
cost: "",
seckillId: "",
bargainId: "",
verifyCode: "",
storeId: "",
shippingType: "",
isChannel: "",
isRemind: "",
isSystemDel: ""
};
}
}
};
</script>
<style scoped>
@page {
margin: 0;
}
@media print {
.noprint {
display: none;
}
}
.text {
font-size: 12px;
}
.item {
padding: 6px 0;
}
</style>
六、遇到的问题
遇到了几个问题 这里列出来
1、无法加载组件
后台报错 : [Vue warn]: Failed to resolve directive: print
解决办法
先引入Vue
再调用 Vue.use(Print);
import Print from "vue-print-nb";
import Vue from "vue";
Vue.use(Print);
2、打印内容不全,显示滚动条
在页面中显示正常,打印预览的时候内容显示不全,显示滚动条,并且不分页
解决办法
使用css控制打印样式
@page {
margin: 0;
}
@media print {
.noprint {
display: none;
}
}
背景色不能打印
在需要背景色的标签上面加上这个样色即可
.value {
-webkit-print-color-adjust: exact;
background-color: #eee;
padding: 8px;
font-size: 12px;
min-width: 80px;
}
打印多一页空白页
检查要打印的标签是不是用margin属性,margin属性会导致多一页空白页面。有的话想办法用padding来实现相同显示效果。