打印插件 hiprint 使用、回单打印PDF保存本地、将列表数据打印成pdf文件保存到本地

简介: 这篇文章介绍了如何使用hiprint打印插件将列表数据打印成PDF文件并保存到本地,包括插件的配置、依赖安装、项目代码案例以及如何预览和打印数据。

文章底部有个人公众号:热爱技术的小郑。主要分享开发知识、有兴趣的可以关注一手。

前言

最近做了一个回单打印的功能、核心功能是、渲染出来的回单列表,用户可以浏览回单数据。可以同时勾选多个要打印的回单数据。将回单打印成pdf文件、同时下载保存到本地。核心就是将回单打印到本地

效果展示

我将这个功能从项目中抽取出来了一个案例、演示预览和打印功能。核心就是调用这个打印的方法。你只关心传入要打印的模板和要打印的数据就可以了。

pdf打印

项目中实现的效果展示
用那个网站做出来的模板、添加相应的数据到代码中。直接调用打印方法就可以。一下是一些假数据

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

前提

这里是官网、可以设置要打印的模板。设置好要打印的模板、然后导出json数据、复制到项目代码中。具体使用过程请看官网介绍

官网:http://hiprint.io/demo
在这里插入图片描述

过程

我这里直接给出完整的该打印插件、你只需要将该插件放到项目中,直接调用就行。具体如何调用、下文会说明。插件代码链接:我放在评论区置顶位置了

将插件代码放入项目中后,需要在项目中安装一些依赖。

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="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>
相关文章
|
2月前
|
XML 缓存 JSON
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
为什么浏览器中有些图片、PDF等文件点击后有些是预览,有些是下载
151 0
|
10天前
|
Python
Python办公自动化:提取pdf文件中的图片
Python办公自动化:提取pdf文件中的图片
12 0
|
2月前
|
Linux Python Windows
Python PDF文件转Word格式,只需要3秒(附打包)
Python PDF文件转Word格式,只需要3秒(附打包)
64 3
Python PDF文件转Word格式,只需要3秒(附打包)
|
12天前
pdf文件转化为png照片 (PyMuPDF下面的fitz)
pdf文件转化为png照片 (PyMuPDF下面的fitz)
|
2月前
|
移动开发 资源调度 JavaScript
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
这篇文章介绍了在Vue移动端网页中使用`pdfh5`和`vue-pdf`两个插件来实现PDF文件的预览,包括滚动查看、缩放、添加水印、分页加载、跳转指定页数等功能。
234 0
Vue移动端网页(H5)预览pdf文件(pdfh5和vue-pdf)
|
2月前
|
Python
Python——批量将PDF文件转为图片
Python——批量将PDF文件转为图片
33 2
|
2月前
|
Python
Python——将PPT和Word转为PDF文件
Python——将PPT和Word转为PDF文件
48 1
|
2月前
|
C# 开发者 Windows
WPF与PDF文档:解锁创建和编辑PDF文件的新技能——从环境配置到代码实践,手把手教你如何在WPF应用中高效处理PDF,提升文档管理效率
【8月更文挑战第31天】随着数字文档的普及,PDF因跨平台兼容性和高保真度成为重要格式。WPF虽不直接支持PDF处理,但借助第三方库(如iTextSharp)可在WPF应用中实现PDF的创建与编辑。本文通过具体案例和示例代码,详细介绍了如何在WPF中集成PDF库,并展示了从设计用户界面到实现PDF创建与编辑的完整流程。不仅包括创建新文档的基本步骤,还涉及在现有PDF中添加页眉页脚等高级功能。通过这些示例,WPF开发者可以更好地掌握PDF处理技术,提升应用程序的功能性和实用性。
47 0
|
2月前
【科研技巧】Mac 系统如何给Endnote 20添加某篇文献信息和附加PDF文件
Mac系统下使用Endnote 20添加文献信息和PDF文件的详细步骤,包括下载.enw文件和在Endnote中导入这些文件的方法。
111 6
[PDF提取重命名]提取识别文字并对PDF文件批量重命名,提取PDF指定可复制的内容并批量重命名PDF,批量PDF文档指定识别提取区域
本文介绍一款实用工具,能快速从可复制内容的PDF中提取指定区域信息并据此重命名文件。设置提取坐标及导入PDF文档、设定新文件名后启动提取流程,即可高效批量处理。保存坐标设置以便重复使用,适用于需频繁修改大量PDF文件名的场景。
[PDF提取重命名]提取识别文字并对PDF文件批量重命名,提取PDF指定可复制的内容并批量重命名PDF,批量PDF文档指定识别提取区域

热门文章

最新文章

下一篇
无影云桌面