<template>
<div ref="printArea" style="font-family: ProximaNova-Regular;background-color: #fff;padding:20px;word-break: break-word;box-sizing: border-box;">
<table>
<tbody>
<tr>
<td style="margin-right: 14px;">
<img :src="comInfo.image" width="320" height="320" v-if="isImgSrc">
<img ref="productImg" width="250" height="250" v-else>
</td>
<td style="vertical-align: top;">
<p style="font-weight: bold;font-size: 22px;padding-bottom: 24px;color:#00213B">
<span style="margin-right: 5px;">{{pageData.product_code}}</span>
<span>{{pageData.product_name}}</span>
</p>
<p style="line-height: 20px;color:#00213B;font-size: 14px;" v-html="comInfo.description"></p>
</td>
</tr>
</tbody>
</table>
<div>
<p style="font-weight: bold;font-size: 17px;margin: 12px 0 8px;color:#00213B">Specifications</p>
<table style="width:100%;border-collapse: collapse;font-size: 14px;table-layout: fixed;text-align:center;">
<tbody>
<tr style="background-color: #F7F8FC;font-weight: bold;">
<td v-for="(item,key) in headerColumns" :key="key" style="padding:10px 0;color:#00213B;width: 25%;font-size: 14px;border:1px solid #EFEFEF">{{item.label}}</td>
</tr>
<tr>
<td v-for="(item,key) in headerColumns" :key="key" style="padding:10px 0 6px;color:#00213B;border:1px solid #EFEFEF">
<div v-if="specificationsObj[item.prop]">
<span v-if="item.prop != 'addonArr' ">{{specificationsObj[item.prop]}}</span>
<div v-else v-for="(opt,idx) in specificationsObj.addonArr" :key="idx" style="padding-bottom:4px;" >{{opt}}</div>
</div>
<span v-else>-</span>
</td>
</tr>
</tbody>
</table>
</div>
<div>
<p style="font-weight: bold;font-size: 17px;margin: 12px 0 8px;color:#00213B">Quote</p>
<table style="width:100%;border-collapse: collapse;font-size: 14px;table-layout: fixed;text-align:center;">
<tbody>
<tr style="background-color: #F7F8FC;font-weight: bold;" v-if="comLocationNum !== 1">
<td style="padding:10px 0;color:#00213B;border:1px solid #EFEFEF" :colspan="tableColumns.length-1">Quote</td>
<td style="padding:10px 0;color:#00213B;border:1px solid #EFEFEF" :style="{width:comWidth}">Total</td>
</tr>
<tr style="background-color: #F7F8FC;font-weight: bold;">
<td v-for="(item,key) in tableColumns" :key="key" style="padding:10px 0;color:#00213B;border:1px solid #EFEFEF" :style="{width:comWidth}">{{item.label}}</td>
</tr>
<tr style="padding:10px 0;" v-for="row in tableData" :key="row.project">
<td v-for="column in tableColumns" :key="column.prop" style="padding:10px 0;color:#00213B;border:1px solid #EFEFEF;white-space: nowrap;" :style="getColumnHeaderStyle(column)">
{{ row[column.prop].includes('.')?'$':'' }} {{ row[column.prop]?row[column.prop]:'0.00' }}
</td>
</tr>
</tbody>
</table>
</div>
<div v-if="emailForm.Comments" style="color:#00213B">
<p style="margin: 20px 0;">{{emailForm.Comments}}</p>
</div>
</div>
</template>
<script>
import html2Canvas from "html2canvas";
export default {
props: {
pageData: {
type: Object,
default: {},
},
specificationsObj: {
type: Object,
default: {},
},
tableData: {
type: Array,
default: [],
},
tableColumns: {
type: Array,
default: [],
},
comLocationNum: {
type: Number,
default: 1,
},
emailForm:{
type: Object,
default: {},
},
loading: {
type: Boolean,
default: false
},
isImgSrc: {
type: Boolean,
default: true
},
width: {
type: String,
default: '100%'
}
},
data(){
return {
headerColumns: [
{
label: "LeadTime",
prop: "time",
type: "pre" //去掉$符号
},
{
label: "Model",
prop: "model",
type: "pre" //去掉$符号
},
{
label: "Decoration",
prop: "decoration",
type: "pre" //去掉$符号
},
{
label: "Add On",
prop: "addonArr",
type: "pre" //去掉$符号
},
],
}
},
computed:{
comInfo(){
return this.pageData?.main
},
comWidth(){
return 100/this.tableColumns.length + '%'
}
},
created(){
if(!this.isImgSrc){
this.getBase64Image(this.comInfo.image,'productImg')
}
},
methods: {
getColumnHeaderStyle(column) {
if (column.prop === 'project') {
return { 'font-weight': 'bold' };
}
return {};
},
//Base64生成产品图片，因为跨域
getBase64Image (url, ref) {
var that = this
var image = new Image()
image.src = url + '?v=' + Math.random() // 处理缓存
image.crossOrigin = '*' // 支持跨域图片
image.onload = function () {
var base64 = that.drawBase64Image(image)
that.$refs[ref].src = base64
}
},
drawBase64Image (img) {
var canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext('2d')
ctx.drawImage(img, 0, 0, img.width, img.height)
var dataURL = canvas.toDataURL('image/png')
return dataURL
},
htmlToPdf(title){
const element = this.$refs.printArea;
const clientWidth = element.offsetWidth;
const clientHeight = element.offsetHeight;
const kh = [clientWidth, clientHeight];
const opts = {
scale: 1.5, // 缩放比例，提高生成图片清晰度
useCORS: true, // 允许加载跨域的图片
// allowTaint: true, // 允许图片跨域，和 useCORS 二者不可共同使用
tainttest: true, // 检测每张图片已经加载完成
logging: true, // 日志开关，发布的时候记得改成 false
};
html2Canvas(element, opts).then((canvas) => {
const dataURL = canvas.toDataURL('image/png');
this.downloadImage(dataURL, kh, title);
this.$emit('update:loading', false)
})
.catch(() => {
this.$emit('update:loading', false)
// Bus.$emit("finishDownload");
});
},
getUrlBase64(url, kh) {
return new Promise((resolve) => {
let canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.crossOrigin = 'Anonymous'; // 允许跨域
img.src = url;
img.onload = () => {
// eslint-disable-next-line prefer-destructuring
canvas.height = kh[1];
// eslint-disable-next-line prefer-destructuring
canvas.width = kh[0];
ctx.drawImage(img, 0, 0, kh[0], kh[1]);
const dataURL = canvas.toDataURL('image/png');
canvas = null;
resolve(dataURL);
};
});
},
downloadImage (imgUrl, kh, title) {
this.getUrlBase64(imgUrl, kh).then((base64) => {
const link = document.createElement('a');
link.href = base64;
link.download = `${title}.png`;
link.click();
});
},
},
};
</script>