pdfjs-dist插件的使用

目前这个插件已经更新到了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