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

一、解决乱码问题参考；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);elsethrow 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 publicif (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 == 96pxvar 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 IEif (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 endspendingOperation = 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);elsethrow new TypeError('invalid src type');// source.verbosity = PDFJS.VerbosityLevel.INFOS;// source.pdfBug = true;// source.stopAtErrors = true;source.cMapUrl=CMAP_URL,source.cMapPacked=truevar loadingTask = PDFJS.getDocument(source);loadingTask.__PDFDocumentLoadingTask = true; // since PDFDocumentLoadingTask is not publicif ( 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 == 96pxvar 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 IEif (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 : rotatevar 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 endspendingOperation = 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预览乱码问题、打印乱码多一页空白问题相关推荐

php vue pdf预览,Vue项目使用pdf.js
前段时间有个支持在线学习功能的项目,有需要在线预览pdf格式课件的功能,我就想在线预览pdf多简单,因为大部分浏览器都支持打开pdf文件,所以直接放个iframe然后src是pdf文件的地址不就行了吗 ...
vue pdf预览禁止打印
1.肯定是先安装了: npm i pdfobject --save 2.引入 import pdf from 'pdfobject' <template><div><p ...
电子档案目录PDF预览
# 需求档案电子化著录模块需要PDF预览功能方便打印标准A4纸质文档模版如下图: 代码流程: 控制层: /*** 预览档案目录*/@GetMapping("preview-c ...
vue 项目中实现pdf预览 pdf打印 pdf下载
在Vue项目中实现PDF预览.打印和下载可以通过以下步骤来实现: 安装pdf.js pdf.js是一个JavaScript库,可以用于在Web上渲染PDF文件. 可以使用npm安装pdf.js,命令如 ...
vue的PDF预览插件(vue-pdf)，支持旋转、放大缩小、打印、下载等
PDF预览插件 1.安装插件(vue-pdf) 2.引用注册pdf组件 3.pdf 常用属性与方法调用 4.常见报错 1.安装插件(vue-pdf) npm i pdfjs-dist@2.5.207 ...
【iframe结合pdf.js实现pdf的预览/下载及打印功能】
iframe结合pdf.js实现pdf的预览/下载及打印 1.[下载pdf.js](http://mozilla.github.io/pdf.js/getting_started/#download) ...
vue中pdf预览组件_Vue+ElementUI使用vue-pdf实现预览功能
Vue + ElementUI项目中使用vue-pdf实现简单预览,供大家参考,具体内容如下 1.安装 vue-pdf npm install --save vue-pdf 2.在vue页面中导入对应 ...
VUE-PDF VUE的PDF预览组件
VUE-PDF VUE的PDF预览组件 vue.js pdf viewer 安装 npm install --save vue-pdf 示例 <template><pdf src=& ...
实现Vue移动端的PDF预览
最近做到一个功能,PDF预览:这个功能看着蛮简单的,结果搞了两个下午,真是欲哭无泪.记录一下所查到的预览方法. 我在网上找了蛮多教程的,大致都是以下几个方法实现预览: 使用 iframe 标签使用 ...
PDF预览完整解决方案及各种兼容（VUE版）
PDF预览完整解决方案及各种兼容(VUE版) PDF预览完整解决方案及各种兼容(VUE版) - 掘金前端学习使者正在上传-重新上传取消 2021年11月12日 16:57 · 阅读 2547 一. ...

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

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

最新文章

热门文章