pdfjs-dist

1、安装

cnpm install -S pdfjs-dist

2、引用

import * as pdfjs from "pdfjs-dist"; import * as pdfjsWorker from 'pdfjs-dist/build/pdf.worker.entry' pdfjs.GlobalWorkerOptions.workerSrc = pdfjsWorker

代码层面使用

view=>
<canvas id="pdf_canvas"></canvas>
methods=>

			let file = evt.target.files[0];
			this.pdfName = file.name.substring(0, file.name.lastIndexOf("."));
			var reader = new FileReader();
			reader.readAsDataURL(file); //将文件读取为 DataURL
			console.log(file)

			reader.onload = function () { //文件读取成功完成时触发
				console.log(reader)
				console.log(reader.result)
				const loadingTask = pdfjs.getDocument(reader.result)
				loadingTask.promise.then((pdf) => {
					console.log(pdf)
					console.log(pdf.getPage())
					//处理
					pdf.getPage(1).then((page) => {
						console.log(page)

						const canvas = document.getElementById('pdf_canvas');
						const ctx = canvas.getContext('2d')
						const viewport = page.getViewport({ scale: 4 })
						canvas.height = viewport.height;
						canvas.width = viewport.width;
						const destWidth = 398;
						canvas.style.width = destWidth + 'px';
						canvas.style.height = destWidth * (viewport.height / viewport.width) + 'px';
						page.render({
							canvasContext: ctx,
							viewport,
						})
					})
				})
			}
		},

========================

pdf有多页处理

			const self = this

			let file = evt.target.files[0];
			this.pdfName = file.name.substring(0, file.name.lastIndexOf("."));
			var reader = new FileReader();
			reader.readAsDataURL(file); //将文件读取为 DataURL

			reader.onload = function () { //文件读取成功完成时触发
				console.log(reader)
				console.log(reader.result)
				const loadingTask = pdfjs.getDocument(reader.result)
				loadingTask.promise.then((pdf) => {
					var pageNum = pdf.numPages;
					console.log("页数:" + pageNum);

					//准备图片
					for (let i = 1; i <= pageNum; i++) {
						let one = i;
						self.imgFiles.push(one);
					}
					console.log(self.imgFiles)

					//处理
					for (let i = 1; i <= pageNum; i++) {
						pdf.getPage(i).then((page) => {
							const canvas = document.getElementById('pdf_canvas_' + i);
							const ctx = canvas.getContext('2d')
							const viewport = page.getViewport({ scale: 4 })
							canvas.height = viewport.height;
							canvas.width = viewport.width;
							const destWidth = 398;
							canvas.style.width = destWidth + 'px';
							canvas.style.height = destWidth * (viewport.height / viewport.width) + 'px';
							page.render({
								canvasContext: ctx,
								viewport,
							})
						})
					}
				})
			}
		}