141 lines
3.6 KiB
Vue
141 lines
3.6 KiB
Vue
<template>
|
||
<div>
|
||
<div id="pdfDom" class="container" ref="pdfContent">
|
||
<div class="title">
|
||
<span>光芯科技</span>
|
||
<span>交接单</span>
|
||
</div>
|
||
<canvas id="barcode"></canvas>
|
||
<p class="lineStyle">物料：{{ name }}</p>
|
||
<p class="lineStyle">批次号：{{ batch }}</p>
|
||
<p class="lineStyle">数量：{{ count }}</p>
|
||
</div>
|
||
<el-button type="primary" @click="toGetPdf1">打印 </el-button>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import axios from "axios";
|
||
import config from "@/config";
|
||
import http from "@/utils/request";
|
||
import getPdf from "@/utils/htmlToPdf";
|
||
import PdfLoader from "@/utils/html2pdf";
|
||
|
||
import html2canvas from "html2canvas";
|
||
export default {
|
||
data() {
|
||
return {
|
||
material_name: "玻璃片",
|
||
batch: "20240723_001",
|
||
count: "1000",
|
||
date: "2023-01-01",
|
||
sender: "切片-石小静",
|
||
resave: "活化-白海军",
|
||
visible: false,
|
||
};
|
||
},
|
||
mounted() {
|
||
var canvas = document.getElementById("barcode");
|
||
var context = canvas.getContext("2d");
|
||
context.clearRect(0, 0, 210, 270);
|
||
JsBarcode("#barcode", "9780199532179", {
|
||
format: "CODE128",
|
||
displayValue: true,
|
||
fontSize: 24,
|
||
lineColor: "#000000",
|
||
});
|
||
},
|
||
methods: {
|
||
toGetPdf(val = false, download = false) {
|
||
let that = this;
|
||
this.$nextTick(() => {
|
||
setTimeout(() => {
|
||
let title = "交接单";
|
||
getPdf(title, download).then((res) => {
|
||
console.log("res", res);
|
||
|
||
// 创建 FormData 对象
|
||
let formData = new FormData();
|
||
formData.append("file", res, "document.pdf"); // 添加文件到 FormData
|
||
formData.append("printer_name", "GP-3150TN"); // 添加其他字段
|
||
|
||
// 发送 POST 请求
|
||
http.post("http://localhost:8080/prints/", formData)
|
||
.then((response) => {
|
||
console.log("postRes", response);
|
||
})
|
||
.catch((error) => {
|
||
console.error("postError", error);
|
||
});
|
||
});
|
||
}, 1000);
|
||
});
|
||
},
|
||
/* 将base64转换为文件,接收2个参数，第一是base64，第二个是文件名字 最后返回文件对象 */
|
||
dataURLtoFile(dataurl, filename) {
|
||
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 File([u8arr], filename, { type: mime });
|
||
},
|
||
|
||
toGetPdf1() {
|
||
let str = [
|
||
"SIZE 70 mm,90 mm",
|
||
"GAP 2 mm,0 mm",
|
||
"CLS",
|
||
"WINTEXT 100,80,36,0,0,0,Simhei,光芯科技——交接单",
|
||
'BARCODE 100,140,"128",108,0,0,2,4,"' + this.batch + '"',
|
||
"WINTEXT 100,280,36,0,0,0,Simhei,物料：" + this.material_name,
|
||
"WINTEXT 100,340,36,0,0,0,Simhei,批次：" + this.batch,
|
||
"WINTEXT 100,400,36,0,0,0,Simhei,数量：" + this.count,
|
||
"WINTEXT 100,460,36,0,0,0,Simhei,日期：" + this.date,
|
||
"WINTEXT 100,520,36,0,0,0,Simhei,送料：" + this.sender,
|
||
"WINTEXT 100,580,36,0,0,0,Simhei,收料：" + this.resave,
|
||
"PRINT 1",
|
||
];
|
||
// 送料：工段-姓名
|
||
// 收料：工段-姓名
|
||
let obj = {};
|
||
obj.printer_commands = str;
|
||
obj.printer_name = "GP-3150TNS";
|
||
http.post("http://localhost:8080/prints/", obj)
|
||
// http.post("http://192.168.1.242:8080/prints/", obj)
|
||
.then((response) => {
|
||
console.log("postRes", response);
|
||
})
|
||
.catch((error) => {
|
||
console.error("postError", error);
|
||
});
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
<style scoped>
|
||
.container {
|
||
width: 210px;
|
||
height: 270px;
|
||
padding: 10px 5px;
|
||
border: 1px solid #dddddd;
|
||
background-color: #ffffff;
|
||
}
|
||
.title {
|
||
/* display: flex;
|
||
justify-content: space-between; */
|
||
font-size: 18px;
|
||
}
|
||
#barcode {
|
||
/* position: absolute; */
|
||
width: 200px;
|
||
height: 100px;
|
||
}
|
||
.lineStyle {
|
||
font-size: 14px;
|
||
margin-bottom: 5px;
|
||
}
|
||
</style>
|