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>
在template中添加展示PDF的容器
在页面中添加canvas标签,用于展示PDF内容:
<canvas id="pdf-viewer"></canvas>
使用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
})
})