vue 项目中分别使用 vue-pdf 插件和内嵌 iframe 实现 PDF 文件预览，缩放，旋转，下载，保存等功能 ？

需求：在 vue  和 element-ui 项目中，有点击按钮 预览，下载，打印 PDF 文件 需求，要求支持 PDF 的预览，上下页切换，首尾页切换，页码选择跳转，放大缩小，顺时针逆时针旋转，下载，打印等功能 。 

实现：方法一 可以考虑使用 vue-pdf  插件 去实现；方法二考虑使用 内嵌 iframe 去实现，下面会对两种方法实现过程进行总结 。

对比： 使用内嵌 iframe 方法，实现简单，由于采用的是浏览器内部对于 PDF 窗口的操作，导致在不同浏览器下，样式和功能控件不统一。使用 vue-pdf 实现，可以做到 样式和功能控件统一，需要解决控制台报错，打印中文乱码等问题 。

---

方法一：使用 vue-pdf 插件实现 

• 安装依赖

npm i --save vue-pdf
// 或者
cnpm i --save vue-pdf 

• 组件页面中引入并注册

// 引入
import pdf from "vue-pdf"
export default{
    // 注册
    components: {
	    pdf
    }
}

• 单页使用案例 （组件 pdf 上只有 src 属性时，默认只展示第一页）

• 多页使用案例（结合 element，支持 PDF 预览，上下页切换，首尾页切换，页码选择跳转，放大缩小，顺时针和逆时针旋转，下载和打印等功能 ）

• 报错解决（更改依赖包 node_modules/vue-pdf/src/pdfjsWrapper.js 文件）

注意：解决顺时针，逆时针旋转控制台报错；打印时，文字乱码等问题。通过更改依赖包 node_modules/vue-pdf/src/pdfjsWrapper.js 文件解决。下面为修改好的 pdfjsWrapper 的文件 。

import {
	PDFLinkService
} from 'pdfjs-dist/es5/web/pdf_viewer';
var pendingOperation = Promise.resolve();
export default function (PDFJS) {
	function isPDFDocumentLoadingTask(obj) {
		return typeof (obj) === 'object' && obj !== null && obj.__PDFDocumentLoadingTask === true;
		// or: return obj.constructor.name === 'PDFDocumentLoadingTask';
	}
	function createLoadingTask(src, options) {
		var source;
		if (typeof (src) === 'string')
			source = { url: src };
		else if (src instanceof Uint8Array)
			source = {data: src};
		else if (typeof (src) === 'object' && src !== null)
			source = Object.assign({}, src);
		else
			throw new TypeError('invalid src type');
		// source.verbosity = PDFJS.VerbosityLevel.INFOS;
		// source.pdfBug = true;
		// source.stopAtErrors = true;
		if (options && options.withCredentials)
			source.withCredentials = options.withCredentials;
		var loadingTask = PDFJS.getDocument(source);
		loadingTask.__PDFDocumentLoadingTask = true; // since PDFDocumentLoadingTask is not public
		if (options && options.onPassword)
			loadingTask.onPassword = options.onPassword;
		if (options && options.onProgress)
			loadingTask.onProgress = options.onProgress;
		return loadingTask;
	}
	function PDFJSWrapper(canvasElt, annotationLayerElt, emitEvent) {
		var pdfDoc = null;
		var pdfPage = null;
		var pdfRender = null;
		var canceling = false;
		canvasElt.getContext('2d').save();
		function clearCanvas() {
			canvasElt.getContext('2d').clearRect(0, 0, canvasElt.width, canvasElt.height);
		}
		function clearAnnotations() {
			while (annotationLayerElt.firstChild)
				annotationLayerElt.removeChild(annotationLayerElt.firstChild);
		}
		this.destroy = function () {
			if (pdfDoc === null)
				return;
			// Aborts all network requests and destroys worker.
			pendingOperation = pdfDoc.destroy();
			pdfDoc = null;
		}
		this.getResolutionScale = function () {
			return canvasElt.offsetWidth / canvasElt.width;
		}
		this.printPage = function (dpi, pageNumberOnly) {
			if (pdfPage === null)
				return;
			// 1in == 72pt
			// 1in == 96px
			var PRINT_RESOLUTION = dpi === undefined ? 150 : dpi;
			var PRINT_UNITS = PRINT_RESOLUTION / 72.0;
			var CSS_UNITS = 96.0 / 72.0;
			var printContainerElement = document.createElement('div');
			printContainerElement.setAttribute('id', 'print-container')
			function removePrintContainer() {
				printContainerElement.parentNode.removeChild(printContainerElement);
			}
			new Promise(function (resolve, reject) {
					printContainerElement.frameBorder = '0';
					printContainerElement.scrolling = 'no';
					printContainerElement.width = '0px;'
					printContainerElement.height = '0px;'
					printContainerElement.style.cssText = 'position: absolute; top: 0; left: 0';
					window.document.body.appendChild(printContainerElement);
					resolve(window)
				})
				.then(function (win) {
					win.document.title = '';
					return pdfDoc.getPage(1)
						.then(function (page) {
							var viewport = page.getViewport({
								scale: 1
							});
							printContainerElement.appendChild(win.document.createElement('style')).textContent =
								'@supports ((size:A4) and (size:1pt 1pt)) {' +
								'@page { margin: 1pt; size: ' + ((viewport.width * PRINT_UNITS) / CSS_UNITS) + 'pt ' + ((viewport.height * PRINT_UNITS) / CSS_UNITS) + 'pt; }' +
								'}' +
								'#print-canvas { display: none }' +
								'@media print {' +
								'body { margin: 0 }' +
								'#print-canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid; display: block }' +
								'body > *:not(#print-container) { display: none; }' +
								'}' +
								'@media screen {' +
								'body { margin: 0 }' +
								'}'
							return win;
						})
				})
				.then(function (win) {
					var allPages = [];
					for (var pageNumber = 1; pageNumber <= pdfDoc.numPages; ++pageNumber) {
						if (pageNumberOnly !== undefined && pageNumberOnly.indexOf(pageNumber) === -1)
							continue;
						allPages.push(
							pdfDoc.getPage(pageNumber)
							.then(function (page) {
								var viewport = page.getViewport({
									scale: 1
								});
								var printCanvasElt = printContainerElement.appendChild(win.document.createElement('canvas'));
								printCanvasElt.setAttribute('id', 'print-canvas')
								printCanvasElt.width = (viewport.width * PRINT_UNITS);
								printCanvasElt.height = (viewport.height * PRINT_UNITS);
								return page.render({
									canvasContext: printCanvasElt.getContext('2d'),
									transform: [ // Additional transform, applied just before viewport transform.
										PRINT_UNITS, 0, 0,
										PRINT_UNITS, 0, 0
									],
									viewport: viewport,
									intent: 'print'
								}).promise;
							})
						);
					}
					Promise.all(allPages)
						.then(function () {
							win.focus(); // Required for IE
							if (win.document.queryCommandSupported('print')) {
								win.document.execCommand('print', false, null);
							} else {
								win.print();
							}
							removePrintContainer();
						})
						.catch(function (err) {
							removePrintContainer();
							emitEvent('error', err);
						})
				})
		}

		this.renderPage = function (rotate) {
			if (pdfRender !== null) {
				if (canceling)
					return;
				canceling = true;
				pdfRender.cancel();
				// pdfRender.cancel().catch(function (err) {
				// 	emitEvent('error', err);
				// });
				return;
			}
			if (pdfPage === null)
				return;
			var pageRotate = (pdfPage.rotate === undefined ? 0 : pdfPage.rotate) + (rotate === undefined ? 0 : rotate);
			var scale = canvasElt.offsetWidth / pdfPage.getViewport({
				scale: 1
			}).width * (window.devicePixelRatio || 1);
			var viewport = pdfPage.getViewport({
				scale: scale,
				rotation: pageRotate
			});
			emitEvent('page-size', viewport.width, viewport.height, scale);
			canvasElt.width = viewport.width;
			canvasElt.height = viewport.height;
			pdfRender = pdfPage.render({
				canvasContext: canvasElt.getContext('2d'),
				viewport: viewport
			});
			annotationLayerElt.style.visibility = 'hidden';
			clearAnnotations();
			var viewer = {
				scrollPageIntoView: function (params) {
					emitEvent('link-clicked', params.pageNumber)
				},
			};
			var linkService = new PDFLinkService();
			linkService.setDocument(pdfDoc);
			linkService.setViewer(viewer);
			pendingOperation = pendingOperation.then(function () {
				var getAnnotationsOperation =
					pdfPage.getAnnotations({
						intent: 'display'
					})
					.then(function (annotations) {

						PDFJS.AnnotationLayer.render({
							viewport: viewport.clone({
								dontFlip: true
							}),
							div: annotationLayerElt,
							annotations: annotations,
							page: pdfPage,
							linkService: linkService,
							renderInteractiveForms: false
						});
					});
				var pdfRenderOperation =
					pdfRender.promise
					.then(function () {
						annotationLayerElt.style.visibility = '';
						canceling = false;
						pdfRender = null;
					})
					.catch(function (err) {
						pdfRender = null;
						if (err instanceof PDFJS.RenderingCancelledException) {
							canceling = false;
							this.renderPage(rotate);
							return;
						}
						emitEvent('error', err);
					}.bind(this))
				return Promise.all([getAnnotationsOperation, pdfRenderOperation]);
			}.bind(this));
		}
		this.forEachPage = function (pageCallback) {
			var numPages = pdfDoc.numPages;
			(function next(pageNum) {
				pdfDoc.getPage(pageNum)
					.then(pageCallback)
					.then(function () {
						if (++pageNum <= numPages)
							next(pageNum);
					})
			})(1);
		}
		this.loadPage = function (pageNumber, rotate) {
			pdfPage = null;
			if (pdfDoc === null)
				return;
			pendingOperation = pendingOperation.then(function () {
					return pdfDoc.getPage(pageNumber);
				})
				.then(function (page) {
					pdfPage = page;
					this.renderPage(rotate);
					emitEvent('page-loaded', page.pageNumber);
				}.bind(this))
				.catch(function (err) {
					clearCanvas();
					clearAnnotations();
					emitEvent('error', err);
				});
		}
		this.loadDocument = function (src) {
			pdfDoc = null;
			pdfPage = null;
			emitEvent('num-pages', undefined);
			if (!src) {
				canvasElt.removeAttribute('width');
				canvasElt.removeAttribute('height');
				clearAnnotations();
				return;
			}
			// wait for pending operation ends
			pendingOperation = pendingOperation.then(function () {
					var loadingTask;
					if (isPDFDocumentLoadingTask(src)) {
						if (src.destroyed) {
							emitEvent('error', new Error('loadingTask has been destroyed'));
							return
						}
						loadingTask = src;
					} else {
						loadingTask = createLoadingTask(src, {
							onPassword: function (updatePassword, reason) {
								var reasonStr;
								switch (reason) {
									case PDFJS.PasswordResponses.NEED_PASSWORD:
										reasonStr = 'NEED_PASSWORD';
										break;
									case PDFJS.PasswordResponses.INCORRECT_PASSWORD:
										reasonStr = 'INCORRECT_PASSWORD';
										break;
								}
								emitEvent('password', updatePassword, reasonStr);
							},
							onProgress: function (status) {
								var ratio = status.loaded / status.total;
								emitEvent('progress', Math.min(ratio, 1));
							}
						});
					}
					return loadingTask.promise;
				})
				.then(function (pdf) {
					pdfDoc = pdf;
					emitEvent('num-pages', pdf.numPages);
					emitEvent('loaded');
				})
				.catch(function (err) {
					clearCanvas();
					clearAnnotations();
					emitEvent('error', err);
				})
		}
		annotationLayerElt.style.transformOrigin = '0 0';
	}
	return {
		createLoadingTask: createLoadingTask,
		PDFJSWrapper: PDFJSWrapper,
	}
}

方法二：内嵌 iframe 实现

• 具体示例

【完整示例查看：vue-pdf: VUE 中使用 vue-pdf 插件和 iframe 实现PDF 的预览，上下页切换，首尾页切换，页码选择跳转，放大缩小，顺时针逆时针旋转，下载，打印等功能 。】