移动端和桌面端的前端预览pdf文件实现办法

前端实现预览pdf文件

前期调研

可以实现pdf文件预览的方式有

• < iframe >
• < embed >
• < object >
• PDFObject
• vue-pdf
• PDF.js
• pdfh5

需求：在移动端和桌面端，以及vue3.x中实现预览pdf文件

• 前四种方案，均在移动端有问题，显示不出
• Vue-pdf：适用于vue2.x版本，vue3.x需要改一些源码(vue2.x项目推荐)
• Pdf.js：该插件推荐通过其中提供的viewer.html直接展示，功能强大，但是移动端设备显示空白，从网上也没搜到解决方案
• pdfh5：基于pdf.js和jQuery，web/h5/移动端PDF预览手势缩放插件
  综上选择了pdfh5插件,但是如果需求中桌面端要求功能强大，请选择pdf.js

pdfh5

文档地址
实现步骤

// 1、安装插件
npm install pdfh5
// 2、引入css，
import 'pdfh5/css/pdfh5.css';
// 3、创建div
<div id="pdf"></div>
// 4、 实例化
var pdfh5 = new Pdfh5('#demo', {
  pdfurl: "./default.pdf"
});

svg模式渲染存在缺陷，只能渲染普通pdf，带签名、印章的可能会渲染不全，报错，pdf.js官方目前没有给出解决方案

canvas模式本质是图片，默认进去的时候，图片在手机端被缩放，不是原分辨率，所以失真模糊。所以需要放大查看pdf

pdf.js

官网
参考文档
实现步骤

// 1、进入官网下载
// 2、将下载好的压缩包解压，并复制 build和web文件夹
// 3、在vue项目的public文件夹中新建static文件，并将build和web文件夹粘贴到static文件下
// 4、 通过iframe引入viewer.html
<iframe src="/static/web/default.pdf" ></iframe>

pdf.js功能强大，适合需求复杂的项目

扩展：参考文档
文档实现了前端实现word、excel、pdf、ppt、mp4、图片、文本等文件的预览