vue + hiprint实现浏览器打印

Abadbeginning
2,545 阅读2分钟

本文正在参加「金石计划 . 瓜分6万现金大奖」

0 环境

  • 编辑器：webstorm或者vscode
  • 系统版本：windows10
  • 编辑器版本：最新
  • vue版本：vue3+
  • 浏览器：谷歌

1 前言

一说到前端调用浏览器打印，第一个会想到window.print或者说复杂的找相关的库(vue-easy-print、vue-print-nb、print.js等等)，它们各有各的优缺点，由于实现的分页较多，要求打印机适配，还有一些其他的需求，window.print就不太满足了，vue-print-nb由于打印数据量大，且客户电脑比较老，配置方面较低，客户反馈打印体验很差，那就pass了，print.js可以打印pdf文件，也可以html、图片、json打印，但是不知道为啥分页功能没有生效，那么换个方式呢，printjs配合截图(html2canvas)，不太适用，一个截图需要保存，打击打印还要有个加载时间，并且测试了10页的数据量，体验很差。还有个Lodop，需要安装客户端，直接pass。入坑了hiprint，分页不需要我们认为干预，并且分的效果很好，没有样式的变样等情况，适配的浏览器谷歌、火狐这类的，打印效果也很好，吸引我的亮点是在线可视化制作好页面效果，然后导出代码，放到vue中就可以跑了，真的是减少了我的很多代码量，当然它也支持纯手撸。

2 准备

hiprint

vue-plugin-hiprint

gitee最终参考代码

codesandbox最终参考代码

3 库安装

hiprint直接引入有点麻烦，这里使用的是vue-plugin-hiprint。

npm install vue-plugin-hiprint

引入到main.js中。

import { createApp } from "vue";
import ElementPlus from "element-plus";
import App from "./App.vue";
import { hiPrintPlugin } from "vue-plugin-hiprint";

const app = createApp(App);
app.use(hiPrintPlugin, "$pluginName");
hiPrintPlugin.disAutoConnect();
app.use(ElementPlus);
app.mount("#app");

4 必备的print-lock.css

这步是个重点，引入print-lock.css不要漏掉，是必不可少的一环，这里不建议使用cdn方式访问print-lock.css，假如是在内网环境或者网络环境薄弱，就不太好了，如下图官网也是这样的建议的。先进入https://cdn.jsdelivr.net/npm/vue-plugin-hiprint@latest/dist/print-lock.css中直接复制css，保存起来，当然我这里是为了演示方便，就放了个cdn资源上去。

image.png

在真实的项目，我是放在pulic文件中的css中，css名print-lock.css，如下图。还有这里打包要注意引用，假如没有生效，看看你静态资源是不是设置在哪个文件夹里，加上href的css的前面加个文件夹名即可。 在public的index.html中加入<link rel="stylesheet" type="text/css" media="print" href="./css/print-lock.css" />。但是由于是演示，这里就不需要看了，可以略过。

image.png

5 配置模板

首先访问https://ccsimple.gitee.io/vue-plugin-hiprint/，如下图：

image.png

查看预览是否是我们想要的效果。 image.png

生成代码。具体的参数什么的，看hiprint的官网，有详细说明。 image.png

新建一个js，然后export default {}包裹上面的代码。 image.png

引入到组件中。 image.png

6 配置数据

由于很多人还是再用vue2，所以为了都兼顾到，我就用vue2的写法了，毕竟把vue2改成vue3组合api也容易。在https://gitee.com/Abadbeginning/vue-print-mulpage-demo/blob/main/src/components/HelloWorld.vue的mounted方法中。

image.png

7 实现打印功能

现在我已经有了模板和数据，现在就是把它们整合在一块。使用this.$print，就是我们在main.js中注册的，直接调用即可。格式this.$print(undefined, 模板, 数据, {});，这里不需要加样式，因为我在index.html中加了print-lock.css了。

如何实现呢，先定义一个按钮。 image.png

在methods中实现，this.$print调用一行代码搞定收工。 image.png

8 最终效果

image.png

9 总结

先下载gitee最终参考代码，然后在对照着看，这里注意点：print-lock.css的引入，引入库，模板和数据的制作，然后调用模板和数据。篇幅有限，还有很多地方没法细说，比如添加尾部计算(只计算当前页的数字)怎么做，还有一些其他的坑。

avatar
文章
阅读
粉丝