uniapp开发小程序用pdf.js做pdf预览_uniapp pdf.js

uniapp开发小程序用pdf.js做pdf预览

业务需求

小程序内预览用户上传的pdf文件

技术路线

在官网 https://mozilla.github.io/pdf.js/下载最新的pdf.js文件，
然后将文件中的web目录下的所有文件拷贝至Uniapp项目的static目录下。

PS:如果官网下载不下来，可以通过这个链接下载 https://download.csdn.net/download/u013019306/88554050

代码编写

在页面中引用pdf.js

在PDF预览的页面中引入pdf.js，加上代码：

<script src="/static/pdf.js"></script>
<script src="/static/pdf.worker.js"></script>
1
2

在template中添加展示PDF的容器

在页面中添加canvas标签，用于展示PDF内容：

<canvas id="pdf-viewer"></canvas>
1

使用pdf.js加载并展示PDF内容

在script中使用pdf.js加载PDF链接：

// 获取canvas对象
const canvasContainer = document.querySelector('#pdf-viewer')
const canvas = canvasContainer.getContext('2d')
// 加载PDF文件
PDFJS.getDocument('your-pdf-file.pdf').then((pdf) => {
  // 获取PDF文档的第一页
  return pdf.getPage(1)
}).then((page) => {
  const viewport = page.getViewport(1.0)
  // 调整canvas大小，使它与PDF页面大小一致
  canvasContainer.width = viewport.width
  canvasContainer.height = viewport.height
  // 渲染PDF页面
  page.render({
    canvasContext: canvas,
    viewport: viewport
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18