前言

今天和大家分享一下print-js这个库，我对于这个库也是比较陌生，今天有个打印的需求之后就去了解了一下，和大家分享一下我的学习成果

官网地址

https://printjs.crabbly.com/

安装

1	yarn add print-js

或者

1	npm i print-js

引入

1	import print from "print-js";

初始化代码

我先初始化我的代码，随便放几个 button

<template>
  <t-space>
    <t-button
      v-for="item in BUTTON_LIST_DATA"
      :key="item.text"
      @click="handlePrintData(item.text)"
      :theme="item.theme"
    >
      {{ item.text }}
    </t-button>
  </t-space>
</template>
<script setup lang="ts">
import PrintJS from "print-js";

// 按钮列表
const BUTTON_LIST_DATA = [
  { text: "pdf", theme: "primary" },
  { text: "image", theme: "success" },
  { text: "html", theme: "danger" },
  { text: "json", theme: "warning" },
];

// BUTTON_LIST_DATA的text的类型
type ButtonListDataText = (typeof BUTTON_LIST_DATA)[number]["text"];

// 打印
const handlePrintData = (type: ButtonListDataText) => {
  switch (type) {
    case "pdf":
      // 处理pdf打印
      break;
    case "image":
      // 处理image打印
      break;
    case "html":
      // 处理html打印
      break;
    case "json":
      // 处理json打印
      break;
    default:
      console.log("未知操作");
  }
};
</script>

css 样式

我看他的包里面有个 css，但是我看了下引入进来好像也没啥区别，就没加了

1	import "print-js/dist/print.css";

pdf 打印

首先我们来看 pdf 的打印如何处理

最简单

最简单的就是这样,把一个允许下载跨域或者同源的 pdf 给打印出来，此时效果就是这样

// 处理pdf打印
PrintJS(
  "https://rocket-chat.oss-cn-hangzhou.aliyuncs.com/202404/1677/e9672b21c0224e34a6247de40c132384.pdf"
);

较大 pdf

如果 pdf 比较大的话，我们需要加个 loading 显示，就可以这样

PrintJS({
  printable:
    "https://rocket-chat.oss-cn-hangzhou.aliyuncs.com/202404/1677/e9672b21c0224e34a6247de40c132384.pdf",
  type: "pdf",
  showModal: true,
  modalMessage: "正在生成pdf文件，请稍等...",
});

base64 格式

当然，文件也支持 base64 格式进行打印,只需要将printable的内容换成base64即可,再加上一个base64:true的属性

PrintJS({
  printable: `base64(这里写你文件的base64格式)`,
  type: "pdf",
  showModal: true,
  base64: true,
  modalMessage: "正在生成pdf文件，请稍等...",
});

图片打印

这个和 pdf 也是一模一样的,把 type 修改一下就可以

基础图片打印

PrintJS({
  printable:
    "https://rocket-chat.oss-cn-hangzhou.aliyuncs.com/202303/999999/imagesb7ab2054257e49c495e2540cd6434705.png",
  type: "image",
  showModal: true,
  modalMessage: "正在生成图片，请稍等...",
});

图片还支持打印多个
将printtable的数据改成 array 的格式即可

多张图片打印

PrintJS({
  printable: [
    "https://rocket-chat.oss-cn-hangzhou.aliyuncs.com/202303/999999/imagesb7ab2054257e49c495e2540cd6434705.png",
    "https://rocket-chat.oss-cn-hangzhou.aliyuncs.com/202303/999999/imagesb7ab2054257e49c495e2540cd6434705.png",
  ],
  type: "image",
  showModal: true,
  modalMessage: "正在生成图片，请稍等...",
});

打印 HTML

这个也和上面的类似,我们先加一个 dom,添加 id 为 msg

1	<div id="msg">我是codesigner，是一个合格的屎山堆积者</div>

然后在需要打印的地方，把我们的 dom 给加上

PrintJS({
  printable: "msg",
  type: "html",
  showModal: true,
  modalMessage: "正在生成HTML，请稍等...",
  header: "打印Html",
});

打印 json 数据

const JSON_DATA = [
  {
    name: "codesigner",
    age: 24,
    sex: "男",
  },
  {
    name: "zhangsan",
    age: 30,
    sex: "男",
  },
  {
    name: "wanghong",
    age: 18,
    sex: "女",
  },
];
// 处理json打印
PrintJS({
  printable: JSON_DATA,
  type: "json",
  showModal: true,
  properties: ["name", "age", "sex"],
  modalMessage: "正在生成json，请稍等...",
  header: "打印Json",
});

print-js 属性

更多更完整的属性可以参考官网哦，这里我就列出来我学习时候的属性

参数	默认值	描述
printable	null	文档来源：pdf或图片url，html元素id或json数据对象。
type	‘pdf’	可打印类型。可用的打印选项有：pdf、html、image、json和raw html。
header	null	用于HTML、图像或JSON打印的可选标头。它将被放置在页面的顶部。此属性将接受文本或原始HTML。
headerStyle	‘font-weight: 300;’	应用于页眉文本的可选页眉样式。
maxWidth	800	最大文档宽度（以像素为单位）。根据需要进行更改。打印HTML、图像或JSON时使用。
css	null	这允许我们传递一个或多个css文件URL，这些URL应该应用于正在打印的html。值可以是具有单个URL的字符串，也可以是具有多个URL的数组。
style	null	这允许我们传递一个具有自定义样式的字符串，该字符串应应用于正在打印的html。
scanStyles	null	当设置为false时，库将不会处理应用于正在打印的html的样式。在使用css参数时很有用。
targetStyle	null	默认情况下，当打印HTML元素时，库只处理某些样式。此选项允许您传递要处理的样式数组。示例：[‘padding-top’, ‘border-bottom’]
targetStyles	null	与“targetStyle”相同，但这将处理任意范围的样式。例如：[‘border’，’padding’]，将包括’border-bottom’，’border-top’，’bounder-left，’border-right’，’padding-top’等。您也可以传递[‘*’]来处理所有样式
ignoreElements	[]	接受打印父html元素时应忽略的html id数组。
properties	null	打印JSON时使用。这些是对象特性名称。
gridHeaderStyle	‘font-weight: bold;’	打印JSON数据时网格表头的可选样式。
gridStyle	‘border: 1px solid lightgray; margin-bottom: -1px;’	打印JSON数据时网格行的可选样式。
repeatTableHeader	true	打印JSON数据时使用。当设置为false时，数据表标题将仅显示在第一页中
showModal	null	启用此选项可在检索或处理大型PDF文件时显示用户反馈。
modalMessage	‘Retrieving Document…’	showModal设置为true时显示给用户的消息。
onLoadingStart	null	加载PDF时要执行的函数
onLoadingEnd	null	加载PDF完成要执行的函数
documentTitle	‘Document’	当打印html、image或json时，这将显示为文档标题。
fallbackPrintable	null	打印pdf时，如果浏览器不兼容（请查看浏览器兼容性表），库将在新选项卡中打开pdf。这允许您传递要打开的不同pdf文档，而不是“可打印”中传递的原始文档。如果在备用pdf文件中注入javascript，这可能会很有用。
onPdfOpen	null	打印pdf时，如果浏览器不兼容（查看浏览器兼容性表），库将在新的选项卡中打开pdf。可以在此处传递回调函数，当发生这种情况时将执行该函数。在某些情况下，当您想要处理打印流程、更新用户界面等时，它可能会很有用。
onPrintDialogClose	null	关闭浏览器打印对话框后执行的回调函数。
onError	error => throw error	发生错误时要执行的回调函数
base64	false	打印作为base64数据传递的PDF文档时使用。

结语

本篇文章就分享到这里了，更多内容敬请期待，债见~

blog-of-codesigner(顾炯洋)

recorded growth

前言