vue处理PDF文档流数据并实现PDF的预览以及打印功能以及处理PDF打印乱码问题

其他 2020-08-12 05:21:10 阅读次数: 0

VUE项目处理PDF文档流数据并实现PDF的预览以及打印功能以及处理PDF打印乱码问题

1.业务需求：
  • vue项目需要对后端返回的PDF文档流数据进行处理，在前端实现处理后的PDF文件的预览以及打印功能，最后再处理PDF页面打印乱码问题。
2.需求分析：
  • 首先由于后端返回的是文档流数据，所以第一步要将文档流数据转换为正确的PDF格式的数据，第二步是要将转化的PDF数据在页面上进行预览（这里我使用的是vue-pdf插件），最后是要在预览的PDF页面上添加打印按钮以及实现打印功能（PDF打印功能vue-pdf插件里面有方法提供，不用再单独去引入外部的打印插件）。另外由于vue-pdf插件使用的是iframe进行渲染，所以存在乱码问题，所以需要对其源文件进行修改。
3.解决方案：

  • 第1步是处理后端返回的文档流数据（注意：请求PDF文档流数据的接口时如果是axios封装的post请求注意使用params,{responseType:'blob'}，如果是axios封装的get请求注意使用{params:params,responseType:'blob'}，否则文档流解析会报错，或者解析出来是一片空白）：

  •       // 将返回的流数据转换为url（data: 文档流数据）
        getObjectURL(data) {
          let url = null
          let file = new Blob([data],{type:'application/pdf;chartset=utf-8'})
          if (window.createObjectURL != undefined) {
              // 通用
            url = window.createObjectURL(file)
          } else if (window.webkitURL != undefined) {
              // 兼容谷歌
            try {
              url = window.webkitURL.createObjectURL(file)
            } catch (error) {
  
            }
          } else if (window.URL != undefined) {
              // 兼容其他
            try {
              url = window.URL.createObjectURL(file)
          } catch (error) {

            }
          }
            // 将转化后url赋值
          this.pdfUrl = url
        },

  • 第2步是下载及引入vue-pdf：

  •   // 首先是安装vue-pdf
  npm install --save vue-pdf

  • // 在页面引入
import pdf from 'vue-pdf'
components: {
      pdf,
    },

  • 第3步是将转化好的PDF数据通过vue-pdf插件进行预览及打印：

    <div v-if="src" style="overflow-y: auto;overflow-x: hidden;">
    <!--打印直接调用vue-pdf里面的方法-->
        <el-button type="primary" @click="$refs.pdf.print()" size="mini">打印</el-button>
        <el-button type="warning" plain @click="viewDia = false" size="mini">关闭</el-button>
        <div>
          <pdf
            ref="pdf"
            :src="pdfUrl"
          ></pdf>
        </div>
      </div>

  • 第四部是处理PDF打印乱码问题：

  • 详情可参考https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7

  • 解决方法是修改pdfjsWrapper.js文件（索引：node_modules => vue-pdf => src => pdfjsWrapper.js）

  • 最后附上我这边最新的修改的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');
  
  		// source.verbosity = PDFJS.VerbosityLevel.INFOS;
  		// source.pdfBug = true;
  		// source.stopAtErrors = true;
  
  		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) {
  
  				// iframeElt.frameBorder = '0';
  				// iframeElt.scrolling = 'no';
  				// iframeElt.width = '0px;'
  				// iframeElt.height = '0px;'
  				// iframeElt.style.cssText = 'position: absolute; top: 0; left: 0';
          //
  				// iframeElt.onload = function() {
          //
  				// 	resolve(this.contentWindow);
  				// }
          //
  				// window.document.body.appendChild(iframeElt);
          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 }' +
  							// 'canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid }' +
              '#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();
  					  }
  					// removeIframe();
            removePrintContainer();
  				})
  				.catch(function(err) {
  
  					// removeIframe();
            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,
  	}
  }.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,
  	}
  }

猜你喜欢

转载自blog.csdn.net/qq_34917408/article/details/107064496
今日推荐
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
周排行
curl的POST请求，封装方法
8.1.1. Integer Types
Java基础 Day05(个人复习整理)
Python - Django - 中间件 process_exception
小L的试卷
【Shell编程】 （函数）判断用户是否存在
python(css样式)
spring ant path 匹配原则 - 【笔记】
《JavaScript与JScript从入门到精通》(美)James.Jaworski.中译本.扫描版.pdf
Eclipse运行带参数的java程序
每日归档
更多
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022