This commit is contained in:
linfso 2024-05-31 18:12:59 +08:00
parent cfbc6fb633
commit 95ba216425
6 changed files with 327 additions and 119 deletions

View File

@ -1,26 +1,52 @@
<template>
<div id="container">
<div class="tools">
<!-- <div class="tools">
<div style="width:100%;text-align: right;">
<el-button title="下载" type="primary" icon="el-icon-download" @click="downPDF">下载</el-button>
<el-button title="打印" type="primary" icon="el-icon-printer" @click="printPDF">打印</el-button>
</div>
</div> -->
<div class="leftSiderBar" style="display:none">
<!-- <el-select
style="width:100%"
filterable
clearable
v-model="pdfUrl"
no-data-text=""
:placeholder="placeholder"
@change="onChange"
>
<el-option v-for="item in optionItems" :key="item.billCode" :label="item.billCode" :value="item.pdfUrl" />
</el-select> -->
</div>
<div class="main">
<iframe style="width: 100%; height: 100%;" :src="pdfLoadUrl" frameborder="0"></iframe>
<!-- <iframe ref="pdfViewer" style="width: 100%; height: 100%;" :src="pdfUrl" frameborder="0"></iframe> -->
<pdf-viewer
:src="pdfUrl"
:startPage="currentPage"
:style="{ height: '100%', width: '100%' }"
></pdf-viewer>
</div>
</div>
</template>
<script>
import pdfViewer from './viewer'
export default {
name: "PdfViewer",
components: {
pdfViewer
},
props: {
pdfUrl: {
type: [String],
pdfList: {
type: [Array],
required: false
},
placeholder:{
type: [String],
}
},
created () {
},
@ -30,25 +56,44 @@ export default {
return {
isExit: false,
value: 1,
pdfLoadUrl:null,
currentPage: 0,
svalue:null,
optionItems:[],
pdfUrl:null,
currentPage: 1,
pageCount: 0,
scale: 100,
pageRotate: 0
pageRotate: 0,
height: '500px'
}
},
watch: {
pdfUrl(newVal) {
this.showPdfViewer();
},
pdfList(){
this.optionItems=this.pdfList;
this.pdfUrl =this.optionItems[0].pdfUrl;
console.log(this.pdfUrl);
// if(this.optionItems&&this.optionItems.length>0){
// this.pdfUrl =this.optionItems[0].pdfUrl;
// }
}
},
mounted () {
this.showPdfViewer();
},
methods: {
handlePageChange(){
},
onChange(){
this.showPdfViewer();
},
showPdfViewer(){
this.pdfLoadUrl='/static/pdfjs/4.2.67/web/viewer.html?file=' + encodeURIComponent(this.pdfUrl)+"&t="+new Date().getTime()
console.log(this.pdfLoadUrl)
this.pdfUrl =this.pdfList[0].pdfUrl;
console.log(this.pdfUrl)
// this.$refs.pdfViewer.src=this.pdfUrl;
// this.pdfLoadUrl=this.pdfUrl;
// this.pdfLoadUrl='/static/pdfjs/4.2.67/web/viewer.html?file=' + encodeURIComponent(this.pdfUrl)+"&t="+new Date().getTime()
},
// 下载
downPDF() {
@ -79,15 +124,14 @@ export default {
#container {
overflow: auto;
height: 100%;
font-family: PingFang SC;
width: 100%;
position: relative;
background: #e9e9e9;
background: #eeeeee;
}
.main {
border: 2px solid #dcdfe6;
// border: 2px solid #dcdfe6;
height: 100%;
width:100%;
overflow: auto;
@ -100,11 +144,22 @@ export default {
margin: 0 auto;
}
.tools {
.leftSiderBar{
display: flex;
z-index: 9999;
position: absolute;
top: 20px;
left: 50px;
width:300px;
background: white;
// height:100%
}
.tools {
display: flex;
z-index: 9999;
position: absolute;
top: 5px;
right: 30px;
}

View File

@ -45,8 +45,8 @@ class TanexPrinterSdk {
onGetPrinterCallback =[];
onGetPrintTplCallback =[];
onBatchGetPDFCallback = [];
onBatchGetPDFCompleteCallback = [];
onBatchGetPDFCallback = null;
// 自定义 回调函数
callbacks ={}
@ -139,13 +139,8 @@ class TanexPrinterSdk {
}
// 只支持一个事件响应
setOnBatchGetPDF(callback,completeCallback){
// this.onBatchGetPDFCallback.push(callback);
this.onBatchGetPDFCallback=[];
this.onBatchGetPDFCallback.push(callback);
this.onBatchGetPDFCompleteCallback=[];
this.onBatchGetPDFCompleteCallback.push(completeCallback);
setOnBatchGetPDF(callback){
this.onBatchGetPDFCallback = callback;
}
// 获取打印机列表
@ -168,20 +163,15 @@ class TanexPrinterSdk {
if(tplCode&&printerName&&orderList&&orderList.length>0){
this.setOnBatchGetPDF(callback);
// 超时计算
let that = this;
this.sendBatchGetPDFCMD(tplCode,printerName,orderList);
this.recievePdfFileTimer = setTimeout(function(){
if(this.onBatchGetPDFCallback){
if(this.onBatchGetPDFCallback.length>0){
this.onBatchGetPDFCallback.forEach(callback=>{
if(callback!=null){
callback([],false,"打印超时");
}
})
}
if(that.onBatchGetPDFCallback!=null){
that.onBatchGetPDFCallback([],false,"打印超时");
}
clearTimeout(this.recievePdfFileTimer);
clearTimeout(that.recievePdfFileTimer);
}, 6000)
}
@ -192,21 +182,16 @@ class TanexPrinterSdk {
if(callback){
this.setOnBatchGetPDF(callback);
}
// 超时计算
this.sendBatchGetPDFAdvCMD(printDataList,billCount);
this.recievePdfFileTimer = setTimeout(function(){
if(this.onBatchGetPDFCallback){
if(this.onBatchGetPDFCallback.length>0){
this.onBatchGetPDFCallback.forEach(callback=>{
if(callback!=null){
callback([],false,"打印超时");
}
})
}
if(that.onBatchGetPDFCallback!=null){
that.onBatchGetPDFCallback(500,"打印超时");
}
clearTimeout(this.recievePdfFileTimer);
clearTimeout(that.recievePdfFileTimer);
}, 6000)
}
@ -298,8 +283,6 @@ class TanexPrinterSdk {
}
sendBatchPrintCMD(tplCode,printerName,orderList){
// {"CMD":"batchPrint","status":"1","Data":["DT20210901001","DT20210901002"]}
var printCmd={};
@ -552,12 +535,8 @@ class TanexPrinterSdk {
if(msg.Status!='2'){
clearTimeout(this.recievePdfFileTimer);
if(this.onBatchGetPDFCallback.length>0){
this.onBatchGetPDFCallback.forEach(callback=>{
if(callback!=null){
callback([],false,msg.Data);
}
})
if(this.onBatchGetPDFCallback){
this.onBatchGetPDFCallback(500,msg.Data)
}
return;
@ -572,27 +551,26 @@ class TanexPrinterSdk {
console.log(ydSn+"-PDF文件已存在");
return;
}
this.recievePdfFileList.push(msg.Data.file);
this.recievePdfFileList.push(msg.Data);
this.pdfFileReceiveMap[ydSn]=1;
if(this.onBatchGetPDFCallback!=null){
this.onBatchGetPDFCallback(200,"获取成功",msg.Data);
}
}
}
// 如果已相等则表示文件已接收完成
if(this.recievePdfFileList.length >= this.sendPdfFileListCount){
if(this.onBatchGetPDFCallback.length>0){
this.onBatchGetPDFCallback.forEach(callback=>{
if(callback!=null){
clearTimeout(this.recievePdfFileTimer);
// 把PDF文件传给终端处理
callback(this.recievePdfFileList,true,"获取成功");
if(this.onBatchGetPDFCallback!=null){
clearTimeout(this.recievePdfFileTimer);
// 把PDF文件传给终端处理
this.onBatchGetPDFCallback(800,"获取成功",this.recievePdfFileList);
// 发送完成后数据清空
this.recievePdfFileList=[];
this.pdfFileReceiveMap=new Map()
// 发送完成后数据清空
this.recievePdfFileList=[];
this.pdfFileReceiveMap=new Map();
}
})
}
// console.log("文件已接收完成");

View File

@ -168,6 +168,26 @@ export default class PdfUtils {
// console.log(+new Date() - startTime)
}
async getBlobUrl(base64Str) {
let dateArray=this.base64ToBuffer(base64Str);
const newPdf = await PDFDocument.create();
const pdfDocument = await PDFDocument.load(Buffer.from(dateArray));
const contentPages = await newPdf.copyPages(
pdfDocument,
pdfDocument.getPageIndices()
);
for (let page of contentPages) {
newPdf.addPage(page);
}
const uint8Array = await newPdf.save();
let mergeBuffer = Buffer.from(uint8Array);
const mergedPdfBlob = new Blob([mergeBuffer], {
type: "application/pdf",
});
return URL.createObjectURL(mergedPdfBlob);
}
async mergePdf3(pdfFileList, fileName,isNeedDown=false) {
let pdfBuffers = [];
pdfFileList.map((item) => {
@ -205,7 +225,7 @@ export default class PdfUtils {
const mergedPdfBlob = new Blob([mergeBuffer], {
type: "application/pdf",
});
return URL.createObjectURL(mergedPdfBlob);;
return URL.createObjectURL(mergedPdfBlob);
}
}
downloadBase64(base64Str,fileName) {

View File

@ -50,16 +50,16 @@
<span style="color: #b12e29;font-size:23px;" class="icon iconfont icon-printer" title="Printer Online"></span>
</div>
<div v-if="printerStatus==0" style="display: inline-flex;">
<a :href="printerDownUrl" style="color: blue;font-weight: 600;font-size:13px;text-decoration: underline">下载打印组件</a>
<a :href="printerDownUrl" style="color: blue;font-weight: 600;font-size:13px;text-decoration: underline">下载打印组件</a>
</div>
</div>
</div>
<el-dialog class="printPreDialog" title="预览" :visible.sync="openPdfView" width="95%" :close-on-click-modal="false" v-dialogDrag append-to-body>
<div style="height: 1600px;width:100%;overflow: auto;">
<PdfViewer :pdfUrl="pdfUrl" style="width:100%" @onPrint="onPdfViewPrint" ></PdfViewer>
<el-dialog class="printPreDialog" title="预览" :visible.sync="openPdfView" width="95%" height="100%" :close-on-click-modal="false" v-dialogDrag append-to-body>
<div style="height:100%;width:100%;overflow: auto;">
<PdfViewer ref="pdfViewer" :pdfList="pdfList" @onPrint="onPdfViewPrint" ></PdfViewer>
</div>
</el-dialog>
@ -69,7 +69,7 @@
</template>
<script>
import emitter from 'element-ui/src/mixins/emitter';
import PdfViewer from '@/components/PdfViewer/index.vue';
import PdfViewer from '@/components/PdfViewer/viewer.vue';
import PdfUtils from '@/utils/pdfUtils'
export default {
@ -109,7 +109,7 @@
subBillStart:1,
subBillEnd:1,
openPdfView:false,
pdfUrl:null,
pdfList:[],
tanexPrinter:null,
printerDownUrl:null,
@ -216,10 +216,21 @@
*/
batchPrintAdv(printDataList){
if(this.printerStatus !=1){
this.$modal.msgError("打印机未连接");
return;
}
this.tanexPrinter.batchPrintAdv(printDataList);
},
batchPrint(orderList,tplCode){
if(this.printerStatus !=1){
this.$modal.msgError("打印机未连接");
return;
}
let that = this;
let newOrderList=[];
if(orderList){
@ -234,38 +245,87 @@
that.tanexPrinter.batchPrint(that.selTplCode,that.selPrinterName,newOrderList)
},
printPreviewAdv(printDataList,billCount){
if(this.printerStatus !=1){
this.$modal.msgError("打印机未连接");
return;
}
let that = this;
const loadingInstance = this.$loading({
text: '正在生成预览...'
})
this.tanexPrinter.batchGetPDFAdv(printDataList,billCount,function(pdfList,success,erroMsg){
// console.log(erroMsg);
if(success){
const pdfDataList=[...pdfList];
let pdfUtils=new PdfUtils({});
pdfUtils.mergePdf3(pdfDataList, (new Date()).getTime()+".pdf",false )
.then(url=>{
loadingInstance.close();
that.pdfUrl=url;
that.openPdfView = true;
})
.catch(error => {
// console.log(error)
that.$modal.msgError("打印出错:"+erroMsg);
});
}else{
that.$modal.msgError("打印出错:"+erroMsg);
that.pdfList=[];
this.tanexPrinter.batchGetPDFAdv(printDataList,billCount,async function(code,msg,data){
console.log(msg);
console.log(code);
if(code == 500){
that.$modal.msgError("打印出错:"+msg);
}
else if(code == 200){
console.log("=====11111==>");
console.log(data);
loadingInstance.close();
let pdfUtils=new PdfUtils({});
let blobUrl= await pdfUtils.getBlobUrl(date.file);
let pdfInfo={
"billCode":date.ydSn,
"pdfUrl":blobUrl
}
that.pdfList.push(pdfInfo);
that.openPdfView = true;
// const pdfDataList=[...pdfList];
// for(let i=0;i<pdfDataList.length;i++){
// let url= await pdfUtils.getBlobUrl(item);
// // that.pdfUrl=url;
// let pdfInfo={
// "billCode":"1"+new Date().getTime(),
// "pdfUrl":url
// }
// console.log(pdfInfo);
// that.pdfList.push(pdfInfo);
// }
// pdfUtils.mergePdf3(pdfDataList, (new Date()).getTime()+".pdf",false )
// .then(url=>{
// loadingInstance.close();
// that.pdfUrl=url;
// that.openPdfView = true;
// })
// .catch(error => {
// // console.log(error)
// that.$modal.msgError("打印出错:"+erroMsg);
// });
}
else if(code == 800){
// 全部获取完成
console.log("===全部获取完成====>");
}
});
},
printPreview(orderList,tplCode,subStart,subEnd){
if(this.printerStatus !=1){
this.$modal.msgError("打印机未连接");
return;
}
let that = this;
let newOrderList=[];
if(orderList){
this.orderList=[...orderList]
}
if(tplCode){
this.selTplCode=tplCode
}
@ -283,27 +343,69 @@
text: '正在生成预览...'
})
this.tanexPrinter.batchGetPDF(this.selTplCode,this.selPrinterName,newOrderList,function(pdfList,success,erroMsg){
// console.log(erroMsg);
if(success){
const pdfDataList=[...pdfList];
this.pdfList=[];
// this.$refs.pdfViewer.clearList();
this.tanexPrinter.batchGetPDF(this.selTplCode,this.selPrinterName,newOrderList,async function(code,msg,pdfData){
if(code == 500){
that.$modal.msgError("打印出错:"+msg);
}
else if(code == 200){
console.log("=====222222==>");
console.log(pdfData);
loadingInstance.close();
let pdfUtils=new PdfUtils({});
pdfUtils.mergePdf3(pdfDataList, (new Date()).getTime()+".pdf",false )
.then(url=>{
loadingInstance.close();
that.pdfUrl=url;
that.openPdfView = true;
})
.catch(error => {
// console.log(error)
that.$modal.msgError("打印出错:"+erroMsg);
});
}else{
that.$modal.msgError("打印出错:"+erroMsg);
let blobUrl= await pdfUtils.getBlobUrl(pdfData.file);
let pdfInfo={
"billCode":pdfData.ydSn,
"pdfUrl":blobUrl
}
that.pdfList.push(pdfInfo);
// this.$refs.pdfViewer.addPdfUrl(pdfData.ydSn,blobUrl);
that.openPdfView = true;
// const pdfDataList=[...pdfList];
// for(let i=0;i<pdfDataList.length;i++){
// let url= await pdfUtils.getBlobUrl(item);
// // that.pdfUrl=url;
// let pdfInfo={
// "billCode":"1"+new Date().getTime(),
// "pdfUrl":url
// }
// console.log(pdfInfo);
// that.pdfList.push(pdfInfo);
// }
// pdfUtils.mergePdf3(pdfDataList, (new Date()).getTime()+".pdf",false )
// .then(url=>{
// loadingInstance.close();
// that.pdfUrl=url;
// that.openPdfView = true;
// })
// .catch(error => {
// // console.log(error)
// that.$modal.msgError("打印出错:"+erroMsg);
// });
}
else if(code == 800){
// 全部获取完成
console.log("===全部获取完成====>");
}
});
},
downPDF(orderList){
if(this.printerStatus !=1){
this.$modal.msgError("打印机未连接");
return;
}
let that = this;
let newOrderList=[];
if(orderList){
@ -329,18 +431,71 @@
const loadingInstance = this.$loading({
text: '正在下载...'
})
this.tanexPrinter.batchGetPDF(this.selTplCode,this.selPrinterName,newOrderList,function(pdfList,success,erroMsg){
this.tanexPrinter.batchGetPDF(this.selTplCode,this.selPrinterName,newOrderList,function(code,msg,pdfData){
loadingInstance.close();
if(success){
const pdfDataList=[...pdfList];
let pdfUtils=new PdfUtils({});
// for()
// pdfUtils.mergePdf3(pdfDataList, (new Date()).getTime()+".pdf",true )
pdfUtils.mergePdf3(pdfDataList, fileName+".pdf",true )
}else{
that.$modal.msgError("下载出错:"+erroMsg);
if(code == 500){
that.$modal.msgError("下载出错:"+msg);
}
else if(code == 200){
console.log("=====3333==>");
console.log(pdfData);
loadingInstance.close();
let pdfUtils=new PdfUtils({});
let pdfDataList=[];
pdfDataList.push(pdfData.file)
pdfUtils.mergePdf3(pdfDataList, pdfData.ydSn+".pdf",true )
// let blobUrl= await pdfUtils.getBlobUrl(pdfData.file);
// let pdfInfo={
// "billCode":pdfData.ydSn,
// "pdfUrl":blobUrl
// }
// that.pdfList.push(pdfInfo);
// that.openPdfView = true;
// const pdfDataList=[...pdfList];
// for(let i=0;i<pdfDataList.length;i++){
// let url= await pdfUtils.getBlobUrl(item);
// // that.pdfUrl=url;
// let pdfInfo={
// "billCode":"1"+new Date().getTime(),
// "pdfUrl":url
// }
// console.log(pdfInfo);
// that.pdfList.push(pdfInfo);
// }
// pdfUtils.mergePdf3(pdfDataList, (new Date()).getTime()+".pdf",false )
// .then(url=>{
// loadingInstance.close();
// that.pdfUrl=url;
// that.openPdfView = true;
// })
// .catch(error => {
// // console.log(error)
// that.$modal.msgError("打印出错:"+erroMsg);
// });
}
else if(code == 800){
// 全部获取完成
console.log("===全部获取完成====>");
}
// if(success){
// const pdfDataList=[...pdfList];
// let pdfUtils=new PdfUtils({});
// // for()
// // pdfUtils.mergePdf3(pdfDataList, (new Date()).getTime()+".pdf",true )
// pdfUtils.mergePdf3(pdfDataList, fileName+".pdf",true )
// }else{
// that.$modal.msgError("下载出错:"+erroMsg);
// }
});
},

View File

@ -174,7 +174,7 @@
</el-table-column>
<el-table-column label="使用网点" align="center" prop="useSiteName" width="100" />
<el-table-column label="客户名称" align="center" prop="customerName" width="160" :show-overflow-tooltip="true" />
<el-table-column label="客户名称" align="center" prop="custName" width="160" :show-overflow-tooltip="true" />
<el-table-column label="所属线路" align="center" prop="transLine" width="100" />
<el-table-column label="产品类型" align="center" prop="prodName" width="100" />
<el-table-column label="最低价格" align="center" prop="leastPrice" width="100" />

View File

@ -174,7 +174,7 @@
</el-table-column>
<el-table-column label="使用网点" align="center" prop="useSiteName" width="100" />
<el-table-column label="客户名称" align="center" prop="customerName" width="160" :show-overflow-tooltip="true" />
<el-table-column label="客户名称" align="center" prop="custName" width="160" :show-overflow-tooltip="true" />
<el-table-column label="所属线路" align="center" prop="transLine" width="100" />
<el-table-column label="产品类型" align="center" prop="prodName" width="100" />