pdfjs-dist插件的使用

最新推荐文章于 2025-04-10 17:09:09 发布

F∅malhaut

最新推荐文章于 2025-04-10 17:09:09 发布

阅读量4.4k

点赞数 1

文章标签：前端 pdf

本文链接：https://blog.csdn.net/weixin_50649221/article/details/131677263

版权

文章讲述了作者在Vite项目中遇到不支持require语法的问题，转而使用import引入PDFJS3.8.162版本，并解决在nuxt项目中使用PDFJS时遇到的报错，最终发现2.6.347版本能成功运行。文中详细列出了3.x.x和2.x.x版本的导入及渲染PDF页面的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前这个插件已经更新到了3.8.162，我看到很多网上的教程都是用的require引入，但是我使用的vite项目已经不支持require语法，然后自己踩了比较多的坑，最后成功用上。这里用了两个版本是因为我在vite项目中，用3.X的版本是能用的，但是在一个nuxt项目中用不了，会有各种各样的报错，然后我试了很多版本，最终用2.6.347成功了。

3.X.X版本的使用（我这里用的是3.8.162）

import * as PDFJS from 'pdfjs-dist/legacy/build/pdf.js' 
import * as workerSrc from 'pdfjs-dist/build/pdf.worker.entry.js'
PDFJS.GlobalWorkerOptions.workerSrc = workerSrc

const canvas = ref()
// pdf路径
const src = 'http://xxxxxxxxx.pdf'
function renderPage() {
	PDFJS.getDocument(src).promise.then((pdfDoc : any)=> {
		// pdfDoc就是当前的pdf文档对象
		// pdfDoc.getPage(pageNum) 方法是获取第pageNum页的pdf内容，我这里获取第一页的内容
		// pdf总页数可以通过pdfDoc._pdfInfo.numPages获取
		pdfDoc.getPage(1).then(page => {
			// 这一步通过canvas绘制pdf内容
			const ctx = canvas.value?.getContext('2d')
			const defaultViewport = page.getViewport({ scale: 1 })  // scale: 缩放系数
			canvas.value.height = defaultViewport.height
			canvas.value.width = defaultViewport.width
			// 渲染页面内容
			page.render({
				canvasContext: ctx,
				viewport: defaultViewport
			})
		})
	})
}

2.X.X版本的使用（我这里用的是2.6.347）

2.X的版本用法与3.X的一样，只是引入文件路径不同

import * as PDFJS from 'pdfjs-dist/es5/build/pdf.js'
import * as workerSrc from 'pdfjs-dist/build/pdf.worker.entry.js'
PDFJS.GlobalWorkerOptions.workerSrc = workerSrc