大家好，欢迎来到IT知识分享网。
文章底部有个人公众号：热爱技术的小郑。主要分享开发知识、有兴趣的可以关注一手。
前言
最近做了一个回单打印的功能、核心功能是、渲染出来的回单列表，用户可以浏览回单数据。可以同时勾选多个要打印的回单数据。将回单打印成pdf文件、同时下载保存到本地。核心就是将回单打印到本地。
效果展示
我将这个功能从项目中抽取出来了一个案例、演示预览和打印功能。核心就是调用这个打印的方法。你只关心传入要打印的模板和要打印的数据就可以了。
pdf打印
项目中实现的效果展示
用那个网站做出来的模板、添加相应的数据到代码中。直接调用打印方法就可以。一下是一些假数据
前提
这里是官网、可以设置要打印的模板。设置好要打印的模板、然后导出json数据、复制到项目代码中。具体使用过程请看官网介绍
过程
我这里直接给出完整的该打印插件、你只需要将该插件放到项目中，直接调用就行。具体如何调用、下文会说明。插件代码链接：我放在评论区置顶位置了
将插件代码放入项目中后，需要在项目中安装一些依赖。
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 提示：安装插件后，如果报jquery未定义的错误。就需要在配置文件中进行修改配置。具体如何配置，参考这篇博客：成功解决：jQuery is not defined
拼接好的数据直接调用打印方法即可。
项目代码案例
这里是给出来如何使用插件进行数据的预览和打印、直接移入项目中，数据使用真实的数据就可以了。实现的效果如视频所示、这里将测试数据由三个改成一个。三个数据导致代码太长了。
<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="" 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> 免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://haidsoft.com/112871.html
