<template>
<el-row>
<div v-html="contentHtml" class="contentHtml"></div>
<el-row v-if="currRow.status === 2 && type === 'previewBill'" style="text-align: center;">
<el-button type="primary" @click="download">{{$t('下载')}}</el-button>
<el-button type="primary" @click="print">{{$t('打印')}}</el-button>
</el-row>
</el-row>
</template>
<script>
import lodop from "@/utils/lodop";
import { downloadFile } from "../shippingSea/utils";
export default {
name: "previewBill",
props: {
contentHtml: String,
currRow: Object,
type: String,
},
methods: {
download() {
downloadFile(
"downloadBillService",
{ id: this.currRow.id },
this.currRow.orderNo + ".pdf",
"pdf"
);
},
print() {
lodop()
.then((LODOP) => {
LODOP.PRINT_INIT();
LODOP.SET_PRINT_STYLE("FontSize", 18);
LODOP.SET_PRINT_STYLE("Bold", 1);
// LODOP.ADD_PRINT_TEXT(50,231,260,39,"打印页面部分内容");
// var stylePrint = "<style>table th,td{padding:0;margin:0;border:1px solid #000000;border-collapse:collapse;}</style>"
var htmlContent =
"<body>" + document.getElementById("print").innerHTML + "</body>";
LODOP.ADD_PRINT_HTM(
"6mm",
"6mm",
"RightMargin:6mm",
"BottomMargin:6mm",
htmlContent
);
LODOP.PRINT();
})
.catch((err) => {
console.error("lodop异常", err);
alert(this.$t("请检查LODOP打印控件是否安装并启动"));
});
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .contentHtml {
word-break: initial;
> table {
width: 96% !important;
margin-left: 2%;
}
}
</style>