Vue3 开发实战分享——打印插件 Print.js 的使用以及 el-table 与 el-pagination 的深入使用

---

前言

今天久违的更新一下关于 Vue 的文章了，本篇文章是基于 Vue3 + Node.js + ElementPlus 的实战项目分享，实战内容包括有打印插件 Print.js 的使用，以及关于 ElementPlus 中的 el-table 与 el-pagination 的深入使用。本次项目以文章（axios 实战进阶练习——基于 Vue3 + Node.js + ElementPlus 实现的联系人列表管理后台）中的项目为模板进行改动和编写。

---

关于 Print.js

在使用 Print.js 插件之前，我们可以通过下面的链接先了解和认识一下这个 JavaScript 插件。
官方地址：Print.js - Javascript library for HTML elements, PDF and image files printing.
GitHub地址：GitHub - crabbly/Printjs: A tiny javascript library to help printing from the web.
如何认识和快速上手 Print.js，我们可以从官网的内容开始阅读，在官网中有很详细的介绍和使用例子，虽然是英文版的。Print.js 打印插件包括了 PDF 打印、HTML 打印、JSON 打印、图像打印等，这篇文章主要分享的 PDF 打印的实战，其中在使用过 Print.js 之后，对于这几种打印的类型，其实都是差不多的，主要区别还是参数配置问题。接下来就简单介绍一下这几种打印的类型。

PDF 打印

Print.js 主要是为了帮助我们直接在应用程序中打印 PDF 文件，无需离开界面，也不使用嵌入。对于用户不需要打开或下载 PDF 文件，而只需要打印它们的独特情况。

例如，当用户请求打印在服务器端生成的报表时，这很有用的一种情况。这些报告以 PDF 文件的形式发回。在打印这些文件之前，无需打开它们。Print.js 提供了一种在我们的应用程序中打印这些文件的快速方法。

❗注意：PDF 文件必须从托管应用的同一网域提供。Print.js 在打印文件之前使用 iframe 加载文件，因此，它受到同源策略的限制。这有助于防止跨站点脚本 （XSS） 攻击。（关于这点也是实际项目中出现的一个问题）

 <button type="button" onclick="printJS('docs/printjs.pdf')">
    Print PDF
 button>

 <button type="button" onclick="printJS({printable:'docs/xx_large_printjs.pdf', type:'pdf', showModal:true})">
    Print PDF with Message
 button>

 <button type="button" onclick="printJS({printable: base64, type: 'pdf', base64: true})">
    Print PDF with Message
 button>

网页（HTML）打印

有时我们只想打印HTML页面的选定部分，这可能很棘手。使用 Print.js，我们可以轻松传递要打印的元素的 id。该元素可以是任何标记，只要它具有唯一的 id。图书馆将尝试非常接近它在屏幕上的外观进行打印，同时，它将为其创建打印机友好的格式。

<form method="post" action="#" id="printJS-form">
    ...
 form>

 <button type="button" onclick="printJS('printJS-form', 'html')">
    Print Form
 button>

<button type="button" onclick="printJS({ printable: 'printJS-form', type: 'html', header: 'PrintJS - Form Element Selection' })">
    Print Form with Header
 button>

图像打印

Print.js 可用于通过传递图像 URL 快速打印页面上的任何图像。当您使用低分辨率版本的图像在屏幕上有多个图像时，这可能很有用。当用户尝试打印所选图像时，您可以将高分辨率 url 传递给 Print.js。

 <img src="images/print-01.jpg" />

 printJS('images/print-01-highres.jpg', 'image')

printJS({printable: 'images/print-01-highres.jpg', type: 'image', header: 'My cool image header'})

 printJS({
  printable: ['images/print-01-highres.jpg', 'images/print-02-highres.jpg', 'images/print-03-highres.jpg'],
  type: 'image',
  header: 'Multiple Images',
  imageStyle: 'width:50%;margin-bottom:20px;'
 })

JSON 打印

打印动态数据或 JavaScript 对象数组的简单快捷方法。

 someJSONdata = [
    {
       name: 'John Doe',
       email: '[email protected]',
       phone: '111-111-1111'
    },
    {
       name: 'Barry Allen',
       email: '[email protected]',
       phone: '222-222-2222'
    },
    {
       name: 'Cool Dude',
       email: '[email protected]',
       phone: '333-333-3333'
    }
 ]

 <button type="button" onclick="printJS({printable: someJSONdata, properties: ['name', 'email', 'phone'], type: 'json'})">
    Print JSON Data
 button>

我们可以通过传递一些自定义 css 来设置数据网格的样式：

 <button type="button" onclick="printJS({
	    printable: someJSONdata,
	    properties: ['name', 'email', 'phone'],
	    type: 'json',
	    gridHeaderStyle: 'color: red; border: 2px solid #3971A5;',
	    gridStyle: 'border: 2px solid #3971A5;'
	})">
    Print JSON Data
 button>

我们可以自定义发送对象数组的表头文本：

 <button type="button" onclick="printJS({
	    printable: someJSONdata,
	    properties: [
		{ field: 'name', displayName: 'Full Name'},
		{ field: 'email', displayName: 'E-mail'},
		{ field: 'phone', displayName: 'Phone'}
	    ],
	    type: 'json'
        })">
    Print with custom table header text
 button>

JSON、HTML 和 Image print 可以接收原始 HTML 标头：

<button type="button" onclick="printJS({
		printable: someJSONdata,
		type: 'json',
		properties: ['name', 'email', 'phone'],
		header: '<h3 class="custom-h3">My custom headerh3>',
		style: '.custom-h3 { color: red; }'
	  })">
	Print header raw html
button>

下载并安装使用

可以从 GitHub 版本下载最新版本的 Print.js。（链接在上面提及过）

使用 npm 进行安装，请执行以下操作：

 npm install print-js --save

使用 yarn 安装：

  yarn add print-js

通过 npm 或 yarn 安装时，将库导入到项目中：

import print from 'print-js'

也可以使用在线的 CDN:

https://printjs-4de6.kxcdn.com/print.min.js
https://printjs-4de6.kxcdn.com/print.min.css

---

Vue3 中 Print.js 实战

接下来，我们通过业务需求和代码解析来分享一下在 Vue3 中使用 Print.js 的实战。首先我们来讲一下需求，非常简单，就是某个表格或列表的打印按钮，然后页面调起打印窗口，打印完成就删除这条打印数据。不往深入的讲，我们不谈数据来源，以及如何添加数据到打印列表，我只要知道点击这个按钮可以打印就行了，这里我们就用 Nodejs 来写一个返回 PDF 的接口，写死一条 PDF 的数据，来模拟用户添加打印数据到打印列表，实现打印功能。

接下来我们通过代码来看看如何使用 Print.js，首先是要安装 Print.js ，上面也提及到了这个 npm 命令，这里就不重复了。安装完成之后，我们要在项目中导入 Print.js，如下图。

---

el-table 与 el-pagination 的深入使用

文本

---

文本

---

最后

文本

文末送书

编辑推荐

（1）实用性强：本书的案例是基于真实的企业级项目需求而开发的，读者可通过学习本 书，掌握实际项目开发中的技巧和方法。
（2）实用性强：本书的案例是基于真实的企业级项目需求而开发的，读者可通过学习本 书，掌握实际项目开发中的技巧和方法。
（3）互动性强：本书赠送配套的微课视频约164集，读者可通过观看视频更好地理解代码的实现过程和实现方法。

内容介绍

本书是一本实用性很强的Vue.js 3实战项目书。书中结合实际项目场景，构建了一个完整的企业级应用。全书共分13章，内容包含项目概述、Vue3项目管理、登录管理、后台主框架、图库管理、管理员管理、用户管理、商品管理、订单管理、优惠券管理、商品评论管理、分销管理和公告管理，并且讲解了这些模块的实际应用方法。同时，本书还介绍了如何使用Vite、Axios、Vue Router、Vuex等流行工具和库，以提高开发效率、提升用户体验。

作者介绍

袁龙，从事Web开发、教学培训等业务，创建“锦匠特效”和“锦匠课堂”两大Web前端工具类网站，为数万前端开发者提供高效率的工作方式，轻松实现网页动画特效，目前是51CTO、CSDN等在线教育平台讲师。著有《Vue.js核心技术解析与uni-app跨平台开发实战》《Node.js从基础到项目实践(视频教学版) 》等多部著作。

参与方式

《 Vue.js 3企业级项目开发实战》免费包邮送出 3 本！

抽奖方式：评论区随机抽取 3 位小伙伴免费送出！
参与方式：关注博主、点赞、收藏、评论区评论 “人生苦短，我学Vue！” （切记要点赞+收藏，否则抽奖无效，每个人最多评论三次！）
活动截止时间：2023-10-21 20:00:00
当当自营店购买链接：http://product.dangdang.com/29621812.html