<template>
<el-row>
<div v-html="contentHtml" id="html2canvas-container" 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-button type="primary" @click="createPdf">{{$t('刷新提单文件')}}</el-button>
</el-row>
</el-row>
</template>
<script>
import lodop from "@/utils/lodop";
import * as _BOX from "@/api/ecw/box";
import FileSaver from "file-saver";
import html2canvas from 'html2canvas';
import { jsPDF } from "jspdf";
import {uploadFile} from '@/api/infra/file'
export default {
name: "previewBill",
props: {
contentHtml: String,
currRow: Object,
type: String,
},
methods: {
download() {
_BOX["downloadBillService"]({ id: this.currRow.id }).then((res) => {
if (res.data && res.data.imgUrl) {
FileSaver.saveAs(res.data.imgUrl + '?' + Math.random(), res.data.imgUrl.split('/').pop());
}
});
},
createPdf(){
let loading = this.$loading()
const doc = new jsPDF('p','pt','a4',true);
html2canvas(document.querySelector("#html2canvas-container"), {dpi:144, useCORS: true}).then(canvas => {
const imgWidth = canvas.width
const imgHeight = canvas.height
let _w = 595.28;
let _h = 595.28/imgWidth*imgHeight;
if(_h>841.89){
_h = 841.89;
_w = _h/imgHeight*imgWidth
}
const _left = (595.28-_w)/2;
doc.addImage(canvas, 'PNG', _left, 0, _w,_h, '', 'FAST');
return _BOX["downloadBillService"]({ id: this.currRow.id })
}).then(res => {
let form = new FormData()
let pathname = (new URL(res.data.imgUrl)).pathname
let fileName = pathname.substring(pathname.lastIndexOf('/')).substring(1)
let selfNo = fileName.split('-')[0]
form.append('file', new File([doc.output('arraybuffer')], fileName, {type: 'application/pdf'}))
form.append('path', `admin/shipment/${selfNo}/pdf/${fileName}`) // 最前面不能有/，否则返回的url会有两个/
return uploadFile(form)
}).then(res => {
_BOX['updateUrl']({id: this.currRow.id, imgUrl: res.data})
}).finally(res => {
loading.close()
})
},
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>