【面试题】1715- 面试官:PDF 预览和下载你是怎么实现的?

前端自习课

共 12235字,需浏览 25分钟

 ·

2023-06-17 09:13


934bf101c39c93067eca764672ac667f.webp


作者: 熊的猫

https://juejin.cn/post/7207078219215732794

前言

在开发过程中要求对 PDF 类型的发票提供 预览下载 功能, PDF 类型文件的来源又包括  H5 移动端 和  PC 端 ,而针对这两个不同端的处理会有些许不同,下文会有所提及。

针对 PDF 预览 的文章不在少数,但似乎都没有提及可能遇到的问题,或是提供对应的具体需求场景下如何选择,因此,本文的核心就是结合实际需求场景下,看看目前各种实现方案到底哪一个更适合,当然希望大家可以在评论区对文中的内容进行斧正,或是提供更优质的方案。

基本要求:

  • 支持 pdf 文件 内容的 完整预览
  • 多页 pdf 文件 支持 分页查看
  • PC 端移动端 都需支持 下载预览

产品要求:

  • PC 端 的预览要支持在 当前页 进行预览
  • pdf 文件 预览时的字体要 和 实际文件的 字体保证一致性
PDF 预览

先抛开上面的各种要求,咱们先总结下目前实现 PDF 预览的几种常用方式:

  • 借助各种类库,基于代码实现预览,如基于  pdfjs-dist[1] 的包
  • 直接基于各个浏览器内置的 PDF 预览插件,如