vue-pdf预览乱码问题、打印乱码多一页空白问题

已于 2022-05-17 13:47:55 修改
阅读量2.8k 收藏 2
点赞数 2
分类专栏： vue 文章标签： vue.js 前端
于 2022-05-12 10:31:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Fansr_/article/details/124725869
版权
本文档提供了针对PDF显示乱码和多一页空白问题的解决方案。首先，通过删除并替换GitHub上的特定代码段来解决乱码问题。其次，通过修改pdfjsWrapper.js文件中的打印样式，避免了多一页空白的出现。此外，还更新了pdfjsWrapper.js文件以修复控制台可能的错误，并引入了新的字体映射设置。
摘要由CSDN通过智能技术生成

一、解决乱码问题参考；https://github.com/FranckFreiburger/vue-pdf/pull/130/commits/253f6186ff0676abf9277786087dda8d95dd8ea7

将github上红色背景代码删除、绿色背景代码替换上；

二、解决多一页空白问题；

找到pdfjsWrapper.js文件上面替换注释的代码即可

              '@supports ((size:A4) and (size:1pt 1pt)) {' +

                '.print-canvas { display: none }' +

                '@media print {' +

                '* { margin: 0 ;padding: 0}' +

                '@page { margin: 3mm; size: ' + ((viewport.width * PRINT_UNITS) / CSS_UNITS) + 'pt ' + ((viewport.height * PRINT_UNITS) / CSS_UNITS) + 'pt; }' +

                '.print-canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid; display: block }' +

                'body > *:not(#print-container) { display: none; }' +

                '}'

 2022.5.17

修改后的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;

		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)) {' +
								'.print-canvas { display: none }' +
								'@media print {' +
								'* { margin: 0 ;padding: 0}' +
								'@page { margin: 3mm; size: ' + ((viewport.width * PRINT_UNITS) / CSS_UNITS) + 'pt ' + ((viewport.height * PRINT_UNITS) / CSS_UNITS) + 'pt; }' +
								'.print-canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid; display: block }' +
								'body > *:not(#print-container) { display: none; }' +
								'}'
							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();
							}
							removeIframe();
							removePrintContainer();
						})
						.catch(function (err) {
							removePrintContainer();
							emitEvent('error', err);
						})
				})
		}

		this.renderPage = function (rotate) {
			if (pdfRender !== null) {

				if (canceling)
					return;
				canceling = true;
				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,
	}
}

若控制台出现报错

修改pdfjsWrapper.js文件如下

import { PDFLinkService } from 'pdfjs-dist/lib/web/pdf_link_service';
 
var pendingOperation = Promise.resolve();
 
export default function(PDFJS) {
 
	function isPDFDocumentLoadingTask(obj) {
 
		return typeof(obj) === 'object' && obj !== null && obj.__PDFDocumentLoadingTask === true;
	}
 
	function createLoadingTask(src, options) {
		let CMAP_URL = 'https://unpkg.com/pdfjs-dist@2.0.943/cmaps/'
		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;
		source.cMapUrl=CMAP_URL,
		source.cMapPacked=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');
 
			// function removePrintContainer() {
 
			// 	iframeElt.parentNode.removeChild(iframeElt);
			// }
			function removePrintContainer() {
				iframeElt.parentNode.removeChild(iframeElt);
		  }
 
			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);
			})
			.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 =
						'@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; }' +
						'}' +
 
						'@media print {' +
							'body { margin: 0 }' +
							'canvas { page-break-before: avoid; page-break-after: always; page-break-inside: avoid }' +
						'}'+
 
						'@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'));
							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;
			// rotate = (pdfPage.rotate === undefined ? 0 : pdfPage.rotate) + (rotate === undefined ? 0 : rotate);
			rotate = rotate === undefined ? 0 : rotate
			var scale = canvasElt.offsetWidth / pdfPage.getViewport({ scale: 1 }).width * (window.devicePixelRatio || 1);
			var viewport = pdfPage.getViewport({ scale:scale, rotation:rotate });
 
			emitEvent('page-size', viewport.width, viewport.height);
 
			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,
	}
}

Fansr_
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
（debug）vue-pdf预览时公式里的英文乱码
CSDN_001VIP的博客
04-07 1308
项目场景： 项目需要在网页里打开数学试卷预览，我先将试卷的word文档转换成pdf，再在vue中使用vue-pdf对pdf格式的试卷进行预览。 问题描述 在网页中打开pdf之后，发现很多英文变成了菱形问号乱码。 原因分析： 怀疑是vue-pdf的问题 网上搜了很久vue-pdf乱码的解决方法，没有用，也没有我这种情况，网上的都是中文会乱码 改变方向不搜vue-pdf，转而搜索英文乱码的关键词 发现可能是对字母的解码有问题，或者无法识别特殊字体的字母 仔细观察发现选项里的字母正常显示，公式里的乱码 打
解决vue-pdf查看pdf文件及打印乱码的问题
01-18
前言 vue中简单使用vue-pdf预览pdf文件，解决打印预览乱码问题 vue-pdf 使用 安装 npm install –save vue-pdf 引入 import pdf from “vue-pdf 自定义封装pdf预览组件 <template> <el visible.sync=pdfDialog close-on-click-modal=false show-close=false width=900px top=52px > <div class=pdf v-show=fileType == '
vue-pdf 部分中文显示错误，第二次打开是空白，解决方法
最新发布
dangsh_的博客
06-05 694
首先是，有一些pdf正常展示，另一些pdf中只显示个别字，很明显是错误的。3的讨论，很多人遇到了这个问题，定位到了是因为Cmap的缓存问题。但是处理之后遇到了新的问题，假如url更新，打开新的pdf。整体根据1可以实现功能，但是会遇到标题中提到的两个bug。5给我一个思路是调用子组件的重置数据方法,解决空白问题。（目前仅做一下记录，之后有时间详细测试+更新本文章）2中也提到了，但是里面的解决方法，对我无效。通过2中更新cmap的方法，可以成功处理。然后根据5的思路改一下，就成功了。
vue-pdf打印出现方字块乱码问题
H-rosy的博客
08-06 3163
今天分享vue-pdf预览显示没有问题，但是打印时出现乱码问题。话不多说先上乱码图。今天主要是分享给大家两种方法。亲测有效!!!!!!!!乱码问题是因为我们安装vue-pdf的版本问题，它的这个源码因为版本更新已经改变了，下面这个地址详细的介绍了源码的改变。红色区域的'-'号表明是已经删除了的，绿色区域的加号是新加的。上一页然后在你绑定的打印按钮的方法中直接使用。......
使用vue-pdf打印乱码问题
weixin_45023107的博客
11-14 290
1.找到vue-pdf插件目录node_modules/vue-pdf/src/pdfjsWrapper.js文件。3.将下面的内容替换 旧的this.printPage。2.找到 this.printPage。
利用vue-pdf打印以及乱码优化问题
qq_69892545的博客
12-21 652
1.下载 (可参考vue-pdf官网)2.建立pdf.vue组件。
vue----解决使用vue-pdf进行文件打印预览时出现小方块乱码
heavenz19的博客
01-02 1078
【代码】vue----解决使用vue-pdf进行文件打印预览时出现小方块乱码。
vue-pdf打印实现和乱码解决
05-30
简单方便，有具体操作说明文档和...1.打印页面demo，pdf.vue，作为vue项目组件使用，样式美观大方，简单方便； 2.pdfjsWrapper.js，核心源码，直接替换就行； 3.pdf打印乱码解决方案使用说明.doc，手把手教你快速使用。
vue-pdf预览pdf文件流
01-13
`vue-pdf`是一个强大的插件，它允许我们在Vue组件中轻松地集成PDF预览功能。这个插件是基于PDF.js库构建的，PDF.js是由Mozilla维护的一个开源项目，用于在浏览器中呈现PDF文件，而`vue-pdf`则是将其包装成适用于Vue...
Vue+ElementUI使用vue-pdf实现预览功能
10-15
在Vue.js框架的项目中，使用vue-pdf插件可以非常方便地集成PDF文件预览功能。以下是从给定文件信息中提取出的关于实现Vue+ElementUI中使用vue-pdf实现PDF预览功能的知识点。 首先，要使用vue-pdf插件，需要通过npm...
vue-pdf预览分页版
06-02
pdf预览
vue-pdf的使用方法及解决在线打印预览乱码
10年职场两茫茫，35岁凄凉奈若何
02-28 417
vue-pdf的使用方法及解决在线打印预览乱码
vue-pdf解决显示无法显示中文、中文打印预览乱码
細水、長流√的专栏
02-22 4842
vue-pdf解决显示中文乱码和打印预览乱码 1.正常的vue-pdf使用 1.1 安装vue-pdf cnpm install vue-pdf --save-dev 1.2 简单使用 <template> <pdf src="./123.pdf"></pdf> </template> <script> import pdf from 'vue-pdf' export default { components: {
vue文件在服务器上乱码,解决vue-pdf查看pdf文件及打印乱码的问题
weixin_40008946的博客
08-12 1684
前言vue中简单使用vue-pdf预览pdf文件，解决打印预览乱码问题vue-pdf 使用安装npm install --save vue-pdf引入import pdf from "vue-pdf自定义封装pdf预览组件:visible.sync="pdfDialog":close-on-click-modal="false":show-close="false"width="900px"top...
vue-pdf 预览乱码问题
MyCloisonne的博客
08-30 1643
解决方法： 1、找到安装的依赖文件夹vue-pdf，把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 isPDF
vue-pdf 打印文字空白、每一页多一个空白页、电子签章不显示
qq_42249552的博客
01-20 4816
标题 修改node_modules/vue-pdf/src/pdfjsWrapper.js 文字乱码 将原来的iframe 改为 div 并设置id, 通过 css 设为 display：none 每一页多一个空白页 修改如下css 完整 pdfjsWrapper.js import {PDFLinkService} from 'pdfjs-dist/es5/web/pdf_viewer'; var pendingOperation = Promise.resolv...
【解决：vue的打印功能window.print 会多出一页空白页】
weixin_49066399的博客
11-29 3833
window.print 会多出一页空白页
解决VUE打印时多一页空白页的问题
weixin_38680881的博客
06-17 1475
解决Vue调用window.print打印多处一页空白页的问题 代码实现 @media print { @page { margin-top: 0mm;//解决打印多出一页空白页的问题 } }
vue 使用vue-pdf 预览pdf
11-20
以下是使用vue-pdf预览pdf的步骤： 1.首先，安装vue-pdf。可以使用npm进行安装，命令如下： ```shell npm install --save vue-pdf ``` 2.在需要使用vue-pdf的组件中，引入vue-pdf并注册组件。代码如下： ```javascript <template> <div> <pdf :src="pdfUrl"></pdf> </div> </template> <script> import { pdf } from 'vue-pdf' export default { components: { pdf }, data () { return { pdfUrl: 'your_pdf_url' } } } </script> ``` 3.在data中定义pdfUrl变量，将其赋值为需要预览的pdf文件的url。 4.在template中，使用pdf组件，并将pdfUrl作为src属性传入。 5.最后，就可以在页面中预览pdf文件了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值