Vue实现PDF导出和打印放大缩小功能

可恨的资本家

已于 2022-07-27 16:14:22 修改

阅读量1.8k

点赞数

文章标签： vue.js javascript 前端

于 2022-07-27 15:38:01 首次发布

原文链接：https://blog.csdn.net/weixin_44955769/article/details/119676812

版权

这篇博客介绍了如何在Vue.js应用中实现PDF文件的预览、翻页、打印及导出功能。通过引入vue-pdf和vue-to-pdf插件，详细展示了安装过程、组件使用、事件监听以及解决打印中文乱码问题的方法。同时，提供了关键代码片段和配置修改，帮助开发者快速实现类似功能。

摘要由CSDN通过智能技术生成

npm安装

npm install --save vue-pdf
npm install --save vue-to-pdf

页面引入

// pdf预览
import pdf from "vue-pdf";

页面注入

components: {pdf},

页面使用

      <div>
              <div>
                <button type="button" @click="changePdfPage(0)">上一页</button>
                <button type="button" @click="changePdfPage(1)">下一页</button>
              </div>

              <div>
                <button type="button" @click="scaleD()">放大</button>
                <button type="button" @click="scaleX()">缩小</button>
              </div>
              <div>
                <button type="button" @click="printPdf">打印</button>
              </div>
              <div id="exportPdf" ref="exportPdf">
              <pdf
                ref="pdf"
                :src="src"
                :page="currentPage"
                :rotate="pageRotate"
                @num-pages="pageCount = $event"
                @page-loaded="currentPage = $event"
                @loaded="loadPdfHandler"
              ></pdf>
              </div>
              <p>{{ currentPage }} / {{ pageCount }}</p>
              <div>
                <button type="button" @click="clock()">顺时针</button>
                <button type="button" @click="counterClock()">逆时针</button>
              </div>

            </div>

data中定义

    src:"",
      currentPage: 0, // pdf文件页码
      pageCount: 0, // pdf文件总页数
      scale: 100,
      pageRotate: 0,

js逻辑

这里this.$PDFSave会报一个没有被定义的错误，需要在main.js中进行引入

// pdf打印预览
import vueToPdf from 'vue-to-pdf';
Vue.use(vueToPdf);

 // pdf加载时
    loadPdfHandler(e) {
      e;
      this.currentPage = 1; // 加载的时候先加载第一页
    },
    // 改变PDF页码,val传过来区分上一页下一页的值,0上一页,1下一页
    changePdfPage(val) {
      if (val === 0 && this.currentPage > 1) {
        this.currentPage--;
      }
      if (val === 1 && this.currentPage < this.pageCount) {
        this.currentPage++;
      }
    },
    //放大
    scaleD() {
      this.scale += 5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    //缩小
    scaleX() {
      if (this.scale === 100) {
        return;
      }
      this.scale += -5;
      this.$refs.pdf.$el.style.width = parseInt(this.scale) + "%";
    },
    // 顺时针
    clock() {
      this.pageRotate += 90;
    },
    // 逆时针
    counterClock() {
      this.pageRotate -= 90;
    },
    printPdf(){ // 调用打印
      this.$refs.pdf.print()
    }

但是这个打印存在中文乱码的问题，是框架代码存在问题，GitHub上给出了解决方案，需要修改vue-pdf插件中的pdfjsWrapper.js这个文件。

路径：node_modules\vue-pdf\src\pdfjsWrapper.js

全部替换即可，亲测有效

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');
		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 iframeElt = document.createElement('iframe');
      var printContainerElement = document.createElement('div');
			printContainerElement.setAttribute('id', 'print-container')
 
			// function removeIframe() {
 
      // 	iframeElt.parentNode.removeChild(iframeElt);
      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 });
          //win.document.head.appendChild(win.document.createElement('style')).textContent =
          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 = win.document.body.appendChild(win.document.createElement('canvas'));
              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();
				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,
	}
}

转载地址：

vue实现 pdf 预览、翻页、打印、导出功能_文i的博客-CSDN博客_vue打印预览页功能