【问题标题】:Vuejs-pdf printVuejs-pdf 打印
【发布时间】:2020-12-02 21:03:44
【问题描述】:

我正在使用 vuejs-pdf 打印我的 pdf 的某些页面并且打印不显示字符:

这就是我正在使用的代码:

<button @click="$refs.myPdfComponent.print(100,pages)">Print </button>
<pdf v-for="i in pages" :key="i" ref="newpdf"  :src="'pdf/'+src" :page="i"  class="rounded border 
  border-info mb-4" :rotate="rotate" @progress="loadedRatio = $event" @error="error" @num-pages="numPages = $event" @link-clicked="page = $event" > </pdf>

我正在打印的 pdf 是 myPdfComponent,newpdf 是我唯一需要的页面:

<pdf v-if="show" ref="myPdfComponent" class="rounded border border-info mb-4" :src="'pdf/'+src" 
:page="page" :rotate="rotate" @progress="loadedRatio = $event" @error="error" @num-pages="numPages = 
$event" @link-clicked="page = $event"></pdf>

                                        

【问题讨论】:

    标签: vue.js pdf printing


    【解决方案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 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 iframeElt = document.createElement('iframe');
    
                function removeIframe() {
    
                    iframeElt.parentNode.removeChild(iframeElt);
                }*/
                
                var printContainerElement = document.createElement('div');
                printContainerElement.setAttribute('id', 'print-container')
                
                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();
                          }
                        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,
        }
    }
    
    

    【讨论】:

    • 效果很好!非常感谢您的回答,这真的很有帮助。