前言

近期我正在开发一个前后端分离项目，使用了Spring Boot 和 Vue2，借助了国内优秀的框架 jeecg，前端UI库则选择了 ant-design-vue。在项目中，需要实现文件上传功能，同时还要能够在线预览和下载图片和PDF文件，甚至需要在页面上直接打印PDF文件。尽管框架自带了 vue-print-nb-jeecg 组件，但它相对较为简陋，只支持单页打印，无法实现多页打印。经过仔细的权衡和比较后，最终决定采用 vue-pdf 和 print-js 组件来满足需求。

一、先来展示一下最终效果

前端上传文件列表：

点击PDF文件后展示预览：

点击打印按钮后效果：

二、实现步骤及代码

vue-pdf 可以用于在线预览，而 print-js 则提供了更强大的打印功能，支持多种文档类型，包括PDF、HTML、IMAGE和JSON，而且默认情况下是PDF。其实vue-pdf 也可以实现打印功能，但是跟前述的vue-print-nb一样，只能打印页面显示的第一页内容（预览展示没问题）。 Print.js官网点我直达

1. 在vue中安装vue-pdf 和Print.js

yarn add vue-pdf

...

yarn add print-js

2. 可以全局引入，也可以在需要的文件中引入

import pdf from 'vue-pdf'

import printJS from 'print-js'

3.主要代码

vue.js 手摸手系列之前端Vue实现PDF预览及打印的终极解决方案 第1张

打印

:src="previewFileSrc"

:key="item"

:page="item">

打印按钮执行的方法

// data参数

printData: {

printable: 'printFrom',

header: '',

ignore: ['no-print']

},

// 执行方法

handlePrint(params) {

printJS({

printable: params.printable, // 'printFrom', // 标签元素id

type: params.type || 'html',

header: params.header, // '表单',

targetStyles: ['*'],

style: '@page {margin:0 10mm};', // 可选-打印时去掉眉页眉尾

ignoreElements: params.ignore || [], // ['no-print']

properties: params.properties || null

})

}

不同组件，如果文件是图片就预览图片，PDF就预览PDF。

4. 全部代码：

总结

除了以上两个组件库1+1的方式，还有百度前端大神开发的vue-office组件库，而且优点也很明显：

使用简单，对新手友好，只传递一个文件地址，就可实现预览。提供多种文件的一站式预览解决方案，解决常见的docx、excel、pdf三种文件的预览。预览效果也好，不只是对内容预览，也要支持样式。

预览的效果确实超级棒，可惜的是不支持打印功能，不能满足需求，可惜了。 有需要的可以去看vue-office的演示效果： Vue框架演示效果 非Vue框架文件预览

精彩文章

评论可见，请评论后查看内容，谢谢！！！
 您阅读本篇文章共花了：