|
|
@@ -6,18 +6,20 @@
|
|
|
</el-radio-group>
|
|
|
</div> -->
|
|
|
|
|
|
- <div id="printMe">
|
|
|
+ <div id="printMe" ref="printDom">
|
|
|
<template v-for="(item, i) in detailArr">
|
|
|
<PrintCommon v-if="currentType === 0" :key="i" :detail-data="item" :company="company" />
|
|
|
- <PrintFoshan v-if="currentType === 1" :key="i" :detail-data="item" :company="company" />
|
|
|
+ <!-- <PrintFoshan v-if="currentType === 1" :key="i" :detail-data="item" :company="company" />
|
|
|
<PrintGuangzhou v-if="currentType === 2" :key="i" :detail-data="item" :company="company" />
|
|
|
- <PrintShaoguan v-if="currentType === 3" :key="i" :detail-data="item" :company="company" />
|
|
|
+ <PrintShaoguan v-if="currentType === 3" :key="i" :detail-data="item" :company="company" /> -->
|
|
|
</template>
|
|
|
</div>
|
|
|
|
|
|
<div class="page-footer">
|
|
|
<div class="footer">
|
|
|
- <el-button v-print="printObj" type="primary" icon="el-icon-printer">打 印</el-button>
|
|
|
+ <!-- <el-button v-print="printObj" type="primary" icon="el-icon-printer">打 印</el-button> -->
|
|
|
+ <el-button @click="handleExport" type="primary" icon="el-icon-printer">打 印</el-button>
|
|
|
+
|
|
|
<el-button @click="goBack">关 闭</el-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -27,6 +29,8 @@
|
|
|
|
|
|
<script>
|
|
|
import print from 'vue-print-nb'
|
|
|
+import html2canvas from "html2canvas"
|
|
|
+import {downloadPDF} from '@/utils/pdf'
|
|
|
import { getDeliverDetail } from '@/api/supply/deliver'
|
|
|
import { addPrints } from '@/api/supply/pickup'
|
|
|
import { getCompanyList } from '@/api/user'
|
|
|
@@ -79,12 +83,50 @@ export default {
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
+ handleExport() {
|
|
|
+ downloadPDF(this.$refs.printDom);
|
|
|
+
|
|
|
+ },
|
|
|
+ toImg() {
|
|
|
+ window.pageYoffset = 0;
|
|
|
+ document.documentElement.scrollTop = 0;
|
|
|
+ document.body.scrollTop = 0;
|
|
|
+ // 先获取你要转换为img的dom节点
|
|
|
+ var node =this.$refs.printDom //传入的id名称
|
|
|
+ var width = node.offsetWidth; //dom宽
|
|
|
+ var height = node.offsetHeight; //dom高
|
|
|
+ var scale = 3; //放大倍数 这个相当于清晰度 调大一点更清晰一点
|
|
|
+ html2canvas(node, {
|
|
|
+ width: width,
|
|
|
+ heigth: height,
|
|
|
+ backgroundColor: "#ffffff", //背景颜色 为null是透明
|
|
|
+ dpi: window.devicePixelRatio * 3, //按屏幕像素比增加像素
|
|
|
+ scale: scale,
|
|
|
+ X: 0,
|
|
|
+ Y: 0,
|
|
|
+ scrollX: -3, //如果左边多个白边 设置该偏移-3 或者更多
|
|
|
+ scrollY: -10,
|
|
|
+ useCORS: true, //是否使用CORS从服务器加载图像 !!!
|
|
|
+ allowTaint: true, //是否允许跨域图像污染画布 !!!
|
|
|
+ }).then((canvas) => {
|
|
|
+ // console.log("canvas", canvas);
|
|
|
+ var url = canvas.toDataURL(); //这里上面不设值cors会报错
|
|
|
+ var a = document.createElement("a"); //创建一个a标签 用来下载
|
|
|
+ a.download = "名"; //设置下载的图片名称
|
|
|
+ var event = new MouseEvent("click"); //增加一个点击事件
|
|
|
+ this.dataURL = url;
|
|
|
+ //如果需要下载的话就加上这两句
|
|
|
+ a.href = url;//此处的url为base64格式的图片资源
|
|
|
+ a.dispatchEvent(event); //触发a的单击事件 即可完成下载
|
|
|
+
|
|
|
+ });
|
|
|
+ },
|
|
|
// 返回列表
|
|
|
goBack() {
|
|
|
this.$emit('backListFormDetail')
|
|
|
},
|
|
|
changeType() {
|
|
|
-
|
|
|
+ window.print
|
|
|
},
|
|
|
|
|
|
// 获取详情
|
|
|
@@ -100,7 +142,186 @@ export default {
|
|
|
this.company = res.data ? res.data[0].companyName : ''
|
|
|
})
|
|
|
},
|
|
|
+ toPrint(){
|
|
|
+ // console.log();
|
|
|
+ // window.onload = function(){
|
|
|
+ // console.log(8888);
|
|
|
+ // this.$print(this.$refs.printDom)
|
|
|
+ // }
|
|
|
+
|
|
|
+
|
|
|
+// var iframe = document.createElement('Iframe');
|
|
|
+// iframe.style.display = 'none';
|
|
|
+// document.body.appendChild(iframe);
|
|
|
+// var doc = iframe.contentWindow.document;
|
|
|
+// doc.write(`<style>
|
|
|
+// @media print {
|
|
|
+
|
|
|
+// // 1 毫米 [mm] = 3,779 527 559 055 1 像素 [px]
|
|
|
+// // 241mm = ~911px
|
|
|
+// // 140mm = ~529px
|
|
|
+// .detail-container {
|
|
|
+// width: 911px !important;
|
|
|
+// height: 529px !important;
|
|
|
+// margin: auto;
|
|
|
+// font-size: 16px !important;
|
|
|
+
|
|
|
+// font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif !important;
|
|
|
+// // font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif !important;
|
|
|
+// color: #000 !important;
|
|
|
+
|
|
|
+// .top-container {
|
|
|
+// margin: 20px;
|
|
|
+// }
|
|
|
+
|
|
|
+// }
|
|
|
+// .detail-container {
|
|
|
+// width: 100%;
|
|
|
+// height: 100%;
|
|
|
+
|
|
|
+// }
|
|
|
+// .print-page {
|
|
|
+// margin: 20px 0;
|
|
|
+// // min-height: 1020px;
|
|
|
+// page-break-after: always;
|
|
|
+// }
|
|
|
+// .print-title {
|
|
|
+// text-align: center;
|
|
|
+// .title1 {
|
|
|
+// font-size: 22px;
|
|
|
+// margin-bottom: 15px;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// .print-form-1 {
|
|
|
+// padding-left: 10px;
|
|
|
+
|
|
|
+// }
|
|
|
+// .el-row{
|
|
|
+// display: flex;
|
|
|
+// }
|
|
|
+// .print-form-1 .item {
|
|
|
+// display: flex;
|
|
|
+// padding-right: 10px;
|
|
|
+// .label {
|
|
|
+// height: 32px;
|
|
|
+// display: flex;
|
|
|
+// align-items: center;
|
|
|
+// box-sizing: border-box;
|
|
|
+// font-size: 14.5px;
|
|
|
+// color: #333333;
|
|
|
+// flex-shrink: 0;
|
|
|
+// }
|
|
|
+
|
|
|
+// }
|
|
|
+// .print-form-1 .value {
|
|
|
+// flex: 1;
|
|
|
+// height: 32px;
|
|
|
+// display: flex;
|
|
|
+// align-items: center;
|
|
|
+// box-sizing: border-box;
|
|
|
+// font-size: 14.5px;
|
|
|
+// color: #333333;
|
|
|
+
|
|
|
+// }
|
|
|
+// .print-form-1 input {
|
|
|
+// border: none;
|
|
|
+// padding: 0;
|
|
|
+// font-size: 14.5px;
|
|
|
+// }
|
|
|
+// .print-table-1 .el-row {
|
|
|
+// font-size: 14.5px;
|
|
|
+// margin-left: 0 !important;
|
|
|
+// margin-right: 0 !important;
|
|
|
+// border: 1px solid #EBEEF5;
|
|
|
+// border-right: none;
|
|
|
+// }
|
|
|
+
|
|
|
+
|
|
|
+// .head .el-col {
|
|
|
+// padding-right: 0 !important;
|
|
|
+// display: flex;
|
|
|
+// height: 32px;
|
|
|
+// align-items: center;
|
|
|
+// font-size: 14.5px;
|
|
|
+// }
|
|
|
+// .body .el-col {
|
|
|
+// font-size: 14.5px;
|
|
|
+// padding-right: 0 !important;
|
|
|
+// display: flex;
|
|
|
+// height: 32px;
|
|
|
+// align-items: center;
|
|
|
+// word-break: break-all;
|
|
|
+// }
|
|
|
+// .foot {
|
|
|
+// color: #333333;
|
|
|
+
|
|
|
+// }
|
|
|
+// .el-row {
|
|
|
+// font-size: 14.5px;
|
|
|
+// border-top: none;
|
|
|
+// }
|
|
|
+
|
|
|
+// .el-col {
|
|
|
+// padding: 0;
|
|
|
+// display: flex;
|
|
|
+// height: 32px;
|
|
|
+// align-items: center;
|
|
|
+// word-break: break-all;
|
|
|
+// }
|
|
|
+// .print-form-2 {
|
|
|
+// font-size: 14.5px;
|
|
|
+// padding-left: 10px;
|
|
|
+
|
|
|
+// }
|
|
|
+// .item {
|
|
|
+// font-size: 14.5px;
|
|
|
+// display: flex;
|
|
|
+// padding-right: 10px;
|
|
|
+
|
|
|
+
|
|
|
+// }
|
|
|
+// .label {
|
|
|
+// font-size: 14.5px;
|
|
|
+// height: 32px;
|
|
|
+// display: flex;
|
|
|
+// align-items: center;
|
|
|
+// box-sizing: border-box;
|
|
|
+// font-size: 14.5px;
|
|
|
+// color: #333333;
|
|
|
+// flex-shrink: 0;
|
|
|
+// }
|
|
|
+// .value {
|
|
|
+// font-size: 14.5px;
|
|
|
+// flex: 1;
|
|
|
+// height: 32px;
|
|
|
+// display: flex;
|
|
|
+// align-items: center;
|
|
|
+// box-sizing: border-box;
|
|
|
+// font-size: 14.5px;
|
|
|
+// color: #333333;
|
|
|
+
|
|
|
+// }
|
|
|
+// .el-input input {
|
|
|
+// height: 30px;
|
|
|
+// border: none;
|
|
|
+// border-bottom: 1px solid #EBEEF5;
|
|
|
+// padding: 0 10px;
|
|
|
+// font-size: 14.5px;
|
|
|
+// }
|
|
|
+// }
|
|
|
|
|
|
+// </style>
|
|
|
+// `)
|
|
|
+// doc.write(this.$refs.printDom.innerHTML);
|
|
|
+// doc.close();
|
|
|
+// iframe.contentWindow.print();
|
|
|
+
|
|
|
+
|
|
|
+ // this.$Print.toPrint()
|
|
|
+
|
|
|
+ // this.$print(this.$refs.printDom, {});
|
|
|
+ console.log();
|
|
|
+ },
|
|
|
// 添加次数
|
|
|
addPrint() {
|
|
|
const ids = this.detailArr.map(item => {
|
|
|
@@ -114,7 +335,7 @@ export default {
|
|
|
}
|
|
|
|
|
|
})
|
|
|
-
|
|
|
+
|
|
|
// console.log(document.execCommand('print'),'4545');
|
|
|
addPrints({ ids: ids.join(',') }).then(res => {
|
|
|
// this.$successMsg('提交成功');
|
|
|
@@ -134,13 +355,18 @@ body {
|
|
|
<style scoped lang="scss">
|
|
|
@media print {
|
|
|
|
|
|
+ @page {
|
|
|
+ size:portrait !important;
|
|
|
+ }
|
|
|
+
|
|
|
// 1 毫米 [mm] = 3,779 527 559 055 1 像素 [px]
|
|
|
// 241mm = ~911px
|
|
|
// 140mm = ~529px
|
|
|
.detail-container {
|
|
|
- width: 911px !important;
|
|
|
- height: 529px !important;
|
|
|
+ width: 241mm !important;
|
|
|
+ height: 140mm !important;
|
|
|
margin: auto;
|
|
|
+ font-size: 14.5px !important;
|
|
|
// position: fixed;
|
|
|
// top: 0;
|
|
|
// left: 0;
|
|
|
@@ -151,6 +377,152 @@ body {
|
|
|
color: #000 !important;
|
|
|
}
|
|
|
|
|
|
+ ::v-deep .detail-container {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+
|
|
|
+
|
|
|
+ font-weight: 300;
|
|
|
+ }
|
|
|
+ .print-page {
|
|
|
+ margin: 20px 0;
|
|
|
+ font-family: '微软黑雅';
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 15px !important;
|
|
|
+ // min-height: 1020px;
|
|
|
+ page-break-after: always;
|
|
|
+ }
|
|
|
+ .print-title {
|
|
|
+ text-align: center;
|
|
|
+ .title1 {
|
|
|
+ font-size: 22px;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .print-form-1 {
|
|
|
+ padding-left: 10px;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ padding-right: 10px;
|
|
|
+ .label {
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #333333;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ flex: 1;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #333333;
|
|
|
+ input {
|
|
|
+ border: none;
|
|
|
+ padding: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .print-table-1 {
|
|
|
+ font-size: 12px;
|
|
|
+ margin-top: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ border-right: 1px solid #EBEEF5;
|
|
|
+ .el-row {
|
|
|
+ margin-left: 0 !important;
|
|
|
+ margin-right: 0 !important;
|
|
|
+ border: 1px solid #EBEEF5;
|
|
|
+ border-right: none;
|
|
|
+ }
|
|
|
+ .div {
|
|
|
+ padding-top: 14px;
|
|
|
+ padding-bottom: 14px;
|
|
|
+ // border-right: 1px solid #EBEEF5;
|
|
|
+ }
|
|
|
+ .head {
|
|
|
+ color: #000;
|
|
|
+ // font-weight: bold;
|
|
|
+ display: flex;
|
|
|
+ div{
|
|
|
+ margin: 20px;
|
|
|
+ }
|
|
|
+ .div {
|
|
|
+ padding-right: 0 !important;
|
|
|
+ display: flex;
|
|
|
+ height: 32px;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .body {
|
|
|
+ display: flex;
|
|
|
+ color: #333333;
|
|
|
+ div{
|
|
|
+ margin: 20px;
|
|
|
+ }
|
|
|
+ .el-row {
|
|
|
+ border-top: none;
|
|
|
+ }
|
|
|
+ .div {
|
|
|
+ padding-right: 0 !important;
|
|
|
+ display: flex;
|
|
|
+ height: 32px;
|
|
|
+ align-items: center;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .foot {
|
|
|
+ color: #333333;
|
|
|
+ .el-row {
|
|
|
+ border-top: none;
|
|
|
+ }
|
|
|
+ .div {
|
|
|
+ padding: 0;
|
|
|
+ display: flex;
|
|
|
+ height: 32px;
|
|
|
+ align-items: center;
|
|
|
+ word-break: break-all;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .print-form-2 {
|
|
|
+ padding-left: 10px;
|
|
|
+ .item {
|
|
|
+ display: flex;
|
|
|
+ padding-right: 10px;
|
|
|
+ .label {
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #333333;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .value {
|
|
|
+ flex: 1;
|
|
|
+ height: 32px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ font-size: 13px;
|
|
|
+ color: #333333;
|
|
|
+ ::v-deep .el-input input {
|
|
|
+ height: 30px;
|
|
|
+ border: none;
|
|
|
+ border-bottom: 1px solid #EBEEF5;
|
|
|
+ padding: 0 10px;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
.top-container {
|
|
|
margin: 20px;
|
|
|
}
|
Howie