There is a personal public account at the bottom of the article: Xiao Zheng who loves technology. Mainly to share development knowledge, those who are interested can pay attention to first-hand.
foreword
Recently, a function of receipt printing has been made. The core function is to render the list of receipts, and users can browse the receipt data. Multiple receipt data to be printed can be checked at the same time. Print the receipt as a pdf file, and download and save it locally. The core is to print the receipt locally .
Show results
I extracted this functionality out of the project with a case, demo preview and print functionality. The core is to call this printing method. You only care about passing in the template to be printed and the data to be printed.
pdf print
Demonstration of the effect achieved in the project
Use the template made by that website and add the corresponding data to the code. Just call the print method directly. Here is some fake data
premise
Here is the official website, you can set the template to be printed. Set up the template to be printed, then export the json data, and copy it to the project code. Please refer to the official website for the specific use process
Official website: http://hiprint.io/demo
process
I will directly give the complete printing plug-in here, you just need to put the plug-in in the project and call it directly. How to call it will be explained below. Plug-in code link: I put it at the top of the comment area
After putting the plugin code into the project, some dependencies need to be installed in the project.
cnpm install --save-dev jquery@3.3.1
cnpm install jquery-minicolors --save-dev
cnpm install bootstrap@3.4.1
cnpm install rgbcolor stackblur-canvas
Tip: After installing the plug-in, if there is an error that jquery is not defined. You need to modify the configuration in the configuration file. How to configure it, please refer to this blog: Successful solution: jQuery is not defined
Pay attention to the referenced address and make sure the imported address is correct.
The spliced data can directly call the print method.
Project code case
Here is how to use the plug-in to preview and print the data, and directly move it into the project. The data can use real data. The achieved effect is shown in the video. Here, the test data is changed from three to one. Three data makes the code too long.
<template>
<div>
<el-button type="primary" @click="testDoAndDownload"> 打印 </el-button>
<el-button type="primary" @click="PreviewData"> 预览 </el-button>
<div
class="carousel"
style="margin: 0px auto; text-align: center; height: 650px; width: 1000px"
>
<el-carousel :interval="125000" arrow="always" height="650">
<el-carousel-item
v-for="pdfInfo in printResults"
:key="pdfInfo.page"
v-show="pdfInfo.isSucceed"
>
<div
v-if="pdfInfo.htmlData"
v-html="pdfInfo.htmlData"
style="margin: 0px auto; text-align: center"
></div>
</el-carousel-item>
</el-carousel>
</div>
</div>
</template>
<script>
import "jquery";
import "jquery-minicolors";
import "../../../static/print/plugin/hiprint/polyfill.min.js";
import "../../../static/print/plugin/hiprint/plugins/JsBarcode.all.min.js";
import "../../../static/print/plugin/hiprint/plugins/jquery.hiwprint.js";
import {
toPdfs, viewPdf } from "../../../static/print/api/print-out-api";
import "../../../static/print/plugin/hiprint/css/hiprint.css";
import "../../../static/print/plugin/hiprint/css/print-lock.css";
export default {
name: "HelloWorld",
props: {
msg: String,
},
data() {
const printResults = [];
const printDataONE2 = {
customer_no: "4",
account_no: "5",
trade_date: "2023/04/21",
stamp_uri:"[NULL]",
// stamp_uri:
// "http://10.1.45.18:8080/icounter/printPicture/stamp_uri_6s9gwot5xe.png",
check_user_no: "6",
print_num: 6,
trade_amount: "83247",
};
const printTemplateAndPrintDatas = [];
printTemplateAndPrintDatas.push({
receiptSn: "456fffff",
receiptTitle: "现金存入" + "456fffff",
templateData:
'{
"panels":[{
"index":0,"height":148,"width":210,"paperHeader":-1.5,"paperFooter":379.5,"printElements":[{
"options":{
"left":187.5,"top":28.5,"height":21,"width":226,"title":"四川银行客户回单","fontSize":18,"fontWeight":"600","letterSpacing":2.5,"color":"#cc5a5a","textAlign":"center","lineHeight":18},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":297,"top":54,"height":20,"width":75,"title":"回单流水号：","color":"#cc5a5a","lineHeight":13,"fontSize":11.25,"textAlign":"center"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":372,"top":54,"height":20,"width":210,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"receipt_sn","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":82.5,"top":55.5,"height":20,"width":213,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"txn_date","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":10.5,"top":55.5,"height":20,"width":71,"title":"交易日期：","color":"#cc5a5a","lineHeight":13,"fontSize":11.25,"textAlign":"center"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":9,"top":76.5,"height":9,"width":572,"borderColor":"#cc5a5a"},"printElementType":{
"type":"hline"}},{
"options":{
"left":96,"top":77,"height":299,"width":10,"borderColor":"#cc5a5a"},"printElementType":{
"title":"竖线","type":"vline"}},{
"options":{
"left":407,"top":77,"height":130,"width":10,"borderColor":"#cc5a5a"},"printElementType":{
"title":"竖线","type":"vline"}},{
"options":{
"left":330,"top":77,"height":130,"width":10,"borderColor":"#cc5a5a"},"printElementType":{
"title":"竖线","type":"vline"}},{
"options":{
"left":580,"top":77,"height":299,"width":10,"borderColor":"#cc5a5a"},"printElementType":{
"title":"竖线","type":"vline"}},{
"options":{
"left":9,"top":77,"height":299,"width":10,"borderColor":"#cc5a5a"},"printElementType":{
"title":"竖线","type":"vline"}},{
"options":{
"left":97.5,"top":78,"height":20,"width":223.5,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"txn_type","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":406.5,"top":78,"height":20,"width":163.5,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"txn_sn","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":340.5,"top":81,"height":20,"width":71,"title":"交易流水","color":"#cc5a5a","lineHeight":13,"fontSize":11.25,"textAlign":"center"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":10.5,"top":81,"height":20,"width":71,"title":"业务类型","color":"#cc5a5a","lineHeight":13,"fontSize":11.25,"textAlign":"center"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":34.5,"top":96,"height":85,"width":10,"borderColor":"#cc5a5a"},"printElementType":{
"title":"竖线","type":"vline"}},{
"options":{
"left":348,"top":96,"height":85,"width":9,"borderColor":"#cc5a5a"},"printElementType":{
"type":"vline"}},{
"options":{
"left":9,"top":96,"height":9,"width":572,"borderColor":"#cc5a5a"},"printElementType":{
"type":"hline"}},{
"options":{
"left":100.5,"top":105,"height":20,"width":226.5,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"receiver_name","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":352.5,"top":106.5,"height":20,"width":50,"title":"名 称","color":"#cc5a5a","lineHeight":13,"fontSize":11.25,"textAlign":"justify"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":409.5,"top":106.5,"height":20,"width":163.5,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"payer_name","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":40.5,"top":106.5,"height":20,"width":50,"title":"名 称","color":"#cc5a5a","lineHeight":13,"fontSize":11.25,"textAlign":"justify"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":331.5,"top":111,"height":55,"width":13,"title":"付款人","fontSize":13,"color":"#cc5a5a","lineHeight":18},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":15,"top":111,"height":53,"width":15,"title":"收款人","fontSize":13,"color":"#cc5a5a","lineHeight":18},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":35,"top":128,"height":9,"width":295,"borderColor":"#cc5a5a"},"printElementType":{
"type":"hline"}},{
"options":{
"left":349,"top":128,"height":9,"width":232,"borderColor":"#cc5a5a"},"printElementType":{
"type":"hline"}},{
"options":{
"left":100.5,"top":130.5,"height":20,"width":226.5,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"receiver_account","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":352.5,"top":130.5,"height":20,"width":50,"title":"账 号","color":"#cc5a5a","lineHeight":13,"fontSize":11.25,"textAlign":"justify"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":409.5,"top":130.5,"height":20,"width":163.5,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"payer_account","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":40.5,"top":130.5,"height":20,"width":50,"title":"账 号","color":"#cc5a5a","lineHeight":13,"fontSize":11.25,"textAlign":"justify"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":349,"top":153,"height":9,"width":232,"borderColor":"#cc5a5a"},"printElementType":{
"type":"hline"}},{
"options":{
"left":35,"top":153,"height":9,"width":295,"borderColor":"#cc5a5a"},"printElementType":{
"type":"hline"}},{
"options":{
"left":35,"top":153,"height":9,"width":295,"borderColor":"#cc5a5a"},"printElementType":{
"type":"hline"}},{
"options":{
"left":100.5,"top":156,"height":20,"width":226.5,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"receiver_open_bank","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":352.5,"top":156,"height":20,"width":50,"title":"开户银行","color":"#cc5a5a","lineHeight":13,"fontSize":11.25,"textAlign":"justify"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":40.5,"top":156,"height":20,"width":50,"title":"开户银行","color":"#cc5a5a","lineHeight":13,"fontSize":11.25,"textAlign":"center"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":409.5,"top":156,"height":20,"width":163.5,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"payer_open_bank","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":9,"top":180,"height":9,"width":572,"borderColor":"#cc5a5a"},"printElementType":{
"type":"hline"}},{
"options":{
"left":100.5,"top":184.5,"height":20,"width":226.5,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"paying_bank_no","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":15,"top":184.5,"height":20,"width":71,"title":"汇入行行","color":"#cc5a5a","lineHeight":13,"fontSize":11.25,"textAlign":"center"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":334.5,"top":184.5,"height":20,"width":71,"title":"汇出行行号","color":"#cc5a5a","fontSize":11.25,"lineHeight":13,"textAlign":"center"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":409.5,"top":184.5,"height":20,"width":163.5,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"remitting_bank_no","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":9,"top":207,"height":9,"width":572,"borderColor":"#cc5a5a"},"printElementType":{
"type":"hline"}},{
"options":{
"left":102,"top":210,"height":20,"width":472.5,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"big_trade_amount","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":15,"top":210,"height":20,"width":71,"title":"大写金额","color":"#cc5a5a","lineHeight":13,"fontSize":11.25,"textAlign":"center"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":9,"top":232,"height":9,"width":572,"borderColor":"#cc5a5a"},"printElementType":{
"type":"hline"}},{
"options":{
"left":100.5,"top":235.5,"height":20,"width":474,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"little_trade_amount","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":15,"top":235.5,"height":20,"width":71,"title":"小写金额","color":"#cc5a5a","lineHeight":13,"fontSize":11.25,"textAlign":"center"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":9,"top":257,"height":9,"width":572,"borderColor":"#cc5a5a"},"printElementType":{
"type":"hline"}},{
"options":{
"left":408,"top":258,"height":119,"width":10,"borderColor":"#cc5a5a"},"printElementType":{
"title":"竖线","type":"vline"}},{
"options":{
"left":100.5,"top":261,"height":50,"width":301.5,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"postscript","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":15,"top":261,"height":50,"width":71,"title":"附言","color":"#cc5a5a","lineHeight":13,"fontSize":11.25,"textAlign":"justify"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":420,"top":262.5,"height":138,"width":159,"field":"stamp_uri","fixed":true},"printElementType":{
"type":"image"}},{
"options":{
"left":9,"top":315,"height":9,"width":400,"borderColor":"#cc5a5a"},"printElementType":{
"type":"hline"}},{
"options":{
"left":15,"top":319.5,"height":50,"width":71,"title":"摘要","color":"#cc5a5a","lineHeight":13,"fontSize":11.25,"textAlign":"justify"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":100.5,"top":319.5,"height":50,"width":301.5,"color":"#2935e3","lineHeight":13,"fontSize":11.25,"field":"abstract","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":9,"top":376,"height":9,"width":572,"borderColor":"#cc5a5a"},"printElementType":{
"type":"hline"}},{
"options":{
"left":70.5,"top":385.5,"height":20,"width":103.5,"color":"#2935e3","field":"print_num","testData":"1","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":234,"top":385.5,"height":20,"width":139.5,"color":"#2935e3","field":"print_date","hideTitle":true},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":180,"top":385.5,"height":20,"width":50,"title":"打印日期：","color":"#cc5a5a","textAlign":"center"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":385.5,"top":385.5,"height":20,"width":50,"title":"银行盖章：","color":"#cc5a5a"},"printElementType":{
"title":"文本","type":"text"}},{
"options":{
"left":15,"top":385.5,"height":20,"width":50,"title":"打印次数：","color":"#cc5a5a","textAlign":"center"},"printElementType":{
"title":"文本","type":"text"}}],"paperNumberLeft":565.5,"paperNumberTop":394.5,"paperNumberDisabled":true}]}',
printData: JSON.stringify(printDataONE2),
});
return {
printTemplateAndPrintDatas, printResults };
},
methods: {
/**
* 预览
*/
PreviewData() {
this.printResults = [];
toPdfs(this.printTemplateAndPrintDatas, "").then((tempPrintResults) => {
this.printResults.push(...tempPrintResults);
console.log("获取pdf结果", this.printResults);
});
},
/**
* 打印
*/
testDoAndDownload() {
toPdfs(this.printTemplateAndPrintDatas, "").then((tempPrintResults) => {
// this.printResults.push(...tempPrintResults);
// console.log("获取pdf结果", this.printResults);
//打印pdf
for (const tempPrintResult of tempPrintResults) {
viewPdf(tempPrintResult.pdfData, tempPrintResult.receiptTitle);
}
});
},
},
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.carousel /deep/ .el-carousel__container {
height: 650px !important;
}
.carousel /deep/ .hiprint-printPaper {
margin: 0 auto;
}
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>