<!--
* @Descripttion: (物料单-子/biz_material_son)
* @version: (1.0)
* @Author: (zr)
* @Date: (2022-06-01)
* @LastEditors: (zr)
* @LastEditTime: (2022-06-01)
-->
<template>
<div class="app-container">
<div id="export" style="padding: 20px;">
<div>
<div style="padding: 20px; overflow: hidden; line-height: 20px">
<div class="orderTitle">山东黄金矿业鑫汇有限公司物流管理系统收货通知单</div>
<div class="orderCoding">单据号:{ { orderObj.materialSumInfo.sysDocumentNumber }}</div>
</div>
<div>
<el-row :gutter="20" style="margin: 20px 0">
<el-col :span="14"
><div class="grid-content bg-purple">供应商:{ { orderObj.merchantInfo.corporateName }}</div></el-col
>
<el-col :span="10">
<el-row :gutter="20">
<el-col :span="11"
><div class="grid-content bg-purple">制单日期:{ { orderObj.materialSumInfo.pushDownTime }}</div></el-col
>
<el-col :span="11"
><div class="grid-content bg-purple">税率:{ { orderObj.merchantInfo.taxRate }}</div></el-col
>
</el-row>
</el-col>
</el-row>
</div>
<el-table border :data="orderObj.list" v-loading="loading" ref="table" highlight-current-row>
<el-table-column prop="id" label="序号" align="center">
<template slot-scope="scope">{ { scope.row.index + 1 }}</template>
</el-table-column>
<el-table-column prop="coding" label="物料编号" align="center" />
<el-table-column prop="name" label="物料名称" align="center" />
<el-table-column prop="specification" label="规格型号" align="center" />
<el-table-column prop="allName" label="全名" align="center" />
<el-table-column prop="units" label="计量单位" align="center" />
<el-table-column prop="oneMoney" label="单价" align="center" />
<el-table-column prop="adjustNumber" label="数量" align="center" />
<el-table-column prop="sumMoney" label="金额" align="center" />
<el-table-column prop="remark" label="备注" align="center" />
<el-table-column prop="deliveryTime" label="送货截止时间" width="100px" align="center" />
</el-table>
</div>
<div style="margin: 20px 0">
<el-row :gutter="20">
<el-col :span="16">
<div class="grid-content bg-purple">
<el-row :gutter="20">
<el-col :span="6"><div class="grid-content bg-purple">经理:
<img class="qian" src="../../style/img/qian.png" alt="">
</div></el-col>
<el-col :span="6"><div class="grid-content bg-purple">经办人: <img class="qian" src="../../style/img/qian2.png" alt=""></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple">联系人: <img class="qian" src="../../style/img/qian3.png" alt=""></div></el-col>
<el-col :span="6"><div class="grid-content bg-purple">联系电话:17660632126</div></el-col>
</el-row>
</div>
</el-col>
<el-col :span="8"
><div class="grid-content bg-purple" style="text-align: right">打印日期:{ { orderObj.printingDate }}</div></el-col
>
</el-row>
</div>
</div>
<div id="qrcode"></div>
<div slot="footer" class="dialog-footer" style="position: absolute; bottom: 20px">
<!-- <el-button type="text" @click="cancel">取 消</el-button> -->
<el-button type="primary" @click="downloadResult('expot')">导出图片</el-button>
<!-- <div @click="downloadImg('main')">导出图片</div> -->
</div>
</div>
</template>
<script>
import { qrcanvas } from 'qrcanvas'
//将整个页面转换成canvas
import html2canvas from 'html2canvas'
export default {
name: 'bizmaterialson',
data() {
return {
orderObj: {},
}
},
created() {
this.orderObj = this.$route.query.orderObj
},
methods: {
dataURLToBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {type: mime})
},
//name 为div的id 名称，会把id 下面的所有标签渲染出的页面效果导出
downloadResult(name) {
//通过ID获取要导出的html的父元素
let canvasID = document.getElementById('export')
let a = document.createElement('a');
html2canvas(canvasID).then(canvas => {
let dom = document.body.appendChild(canvas);
dom.style.display = "none";
a.style.display = "none";
document.body.removeChild(dom);
let blob = this.dataURLToBlob(dom.toDataURL("image/png"));
a.setAttribute("href", URL.createObjectURL(blob));
a.setAttribute("download", name + ".png")
document.body.appendChild(a);
a.click();
URL.revokeObjectURL(blob);
document.body.removeChild(a);
});
},
printOut(name) {
// 滚动条置顶，
$(window).scrollTop(0);
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
this.downloadResult(name)
},
},
}
</script>
<style scoped>
.orderTitle {
font-size: 20px;
font-weight: 600;
float: left;
}
.orderCoding {
float: right;
}
.el-table-column {
width: 200px;
}
.qian{width: 100px;height: 40px;}
</style>
重要
npm install html2canvas --save