bug图

效果图

1 电子签章不显示

1. 1 修改node_modules/pdfjs-dist/build/pdf.worker.js

注释下图选定代码

1.2 修改node_modules/pdfjs-dist/es5/build/pdf.worker.js

注释下图选定代码

2.文字乱码

2.1 修改node_modules/vue-pdf/src/pdfjsWrapper.js

将原来的iframe 改为 div

并设置id 【后面解决空白页问题用到这个id，通过 css 设为 display：none】

3. 每一页多一个空白页

3.1 同上修改node_modules/vue-pdf/src/pdfjsWrapper.js

修改如下css

完整 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});win.document.head.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('class', '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, false);} 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 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 打印文字空白、每一页多一个空白页、电子签章不显示相关推荐

android 多个标签页,Android一个标签页的实现
最近要实现一个类似于下面的页面想着每次都要自己重新写,太麻烦了,这里记录一下自己写的自定义的view.一开始本来准备用ConstraintLayout的,但是这货addview的时候总有bug,就用 ...
Flutter PDF Android 电子签章不显示问题
当我们Flutter 加载带电子签章的PDF的时候,会发现Android 页面的签章不会显示,而iOS的可以完美展示出来. 我试了很多PDF的插件都不行. 那目前只剩一个方法,那就是在展示的地方,判断 ...
QT实现PDF打印文字+图片。亲测可用！！！
//在同一个文件中插入文字和图片,保存在E盘QPrinter printer_text;printer_text.setOutputFormat(QPrinter::PdfFormat);//保存文件 ...
PDF预览电子签章无法显示问题
1.找到pdf.worker.js 2.找到截图中js并注销即可预览 3.预览效果如下
vue里面使用pdfjs-dist+fabric实现pdf电子签章！！！
2022.9.6 一.需求最近领导提了一个新需求:仿照e签宝,实现pdf电子签章! 最终实现效果图这是做出来的效果图,当然还有很多待修改二.思路然后我就去看了下人家e签宝的操作界面,左侧是印章 ...
Java实现PDF打印的解决方案
1.Java Print Service Java Print Service是Java自带的打印框架,所在的包javax.print.PrintService;. 实现PDF打印的代码流程如下 // ...
vue-pdf 在线预览pdf（pdf地址或base64pdf）解决电子签章显示问题
使用vue-pdf在线预览pdf 并使得带有电子签章的pdf能够正常预览出来 1.安装vue-pdf ` npm install vue-pdf npm install pdfjs-dist //或者 ...
Vue PDF文件预览打印vue-pdf
Vue PDF文件预览vue-pdf 最近做项目,遇到预览PDF这个功能,在网上找了找,大多推荐的是pdf.js,不过在Vue中还是想偷懒直接npm组件,最后找到了一个还不错的Vue-pdf 组件,G ...
安卓实现文本以pdf格式保存，导出时中文出现的空白问题，以及打印pdf文档
1.实现以pdf格式保存时,需要下载iTextpdf.jar,导入项目中: 下载链接:http://www.pc6.com/softview/SoftView_438379.html 2.在Andro ...

vue-pdf 打印文字空白、每一页多一个空白页、电子签章不显示

bug图

效果图

1 电子签章不显示

1. 1 修改node_modules/pdfjs-dist/build/pdf.worker.js

1.2 修改node_modules/pdfjs-dist/es5/build/pdf.worker.js

2.文字乱码

2.1 修改node_modules/vue-pdf/src/pdfjsWrapper.js

3. 每一页多一个空白页

3.1 同上修改node_modules/vue-pdf/src/pdfjsWrapper.js

完整 pdfjsWrapper.js

vue-pdf 打印文字空白、每一页多一个空白页、电子签章不显示相关推荐

最新文章

热门文章

vue-pdf 打印文字空白、每一页多一个空白页、电子签章不显示

bug图

效果图

1 电子签章不显示

1. 1 修改node_modules/pdfjs-dist/build/pdf.worker.js

1.2 修改node_modules/pdfjs-dist/es5/build/pdf.worker.js

2.文字乱码

2.1 修改node_modules/vue-pdf/src/pdfjsWrapper.js

3. 每一页多一个空白页

3.1 同上 修改node_modules/vue-pdf/src/pdfjsWrapper.js

完整 pdfjsWrapper.js

vue-pdf 打印文字空白、每一页多一个空白页、电子签章不显示相关推荐

最新文章

热门文章

3.1 同上修改node_modules/vue-pdf/src/pdfjsWrapper.js