VUEプロジェクト実装PDFプレビュー

まず、プラグインをインストールします。npm install pdfjs-dist --save。

ページ内に導入されたシステム：

輸入PDFJS から ' pdfjs-distの' ;

キャンバスのタグを追加します：

<キャンバスV- 用 = " pdfPagesでページ"：ID = " 'キャンバス' +ページ"：キー= " ページ" > </キャンバス>

セットPDFのURLアドレスは、ここでのアドレスは、ブラウザのアドレスバーにあるダウンロードすることができます。

pdfUrl =ましょう' https://ecs7.tokopedia.net/instant-loan/file/29a2218e-bef9-44cb-b92b-8e81bc4d5228_DOC-20171013-WA0035.pdf ' ;

データは、必要な変数に書き込まれます。

データ（）{
     リターン{
        pdfDocs：ゼロ、
        pdfPages：ヌル
    }
}

PDFファイルの取得方法：

loadPdf（）{
    PDFJS.getDocument（pdfUrl）.promise.then（（PDF） => {
        console.log（ '------------------' 、PDF）。
        この .pdfDoc = PDF;
        この .pdfPages = この.pdfDoc.numPages。
        この。$ nextTick（（）=> {
             この .renderPdfPage（1 ）。
        }）;
    }）;
}

PDFページを描画：

        renderPdfPage（NUM）{
             この .pdfDoc.getPage（NUM）.then（（ページ）=> {
                聞かせてキャンバス =のdocument.getElementById（ '-キャンバス' + NUM）;
                CTXせ = canvas.getContext（ '2D' ）。
                DPRましょう = window.devicePixelRatio || 1 ;
                BSRましょう = ctx.webkitBackingStorePixelRatio || 
                    ctx.mozBackingStorePixelRatio || 
                    ctx.msBackingStorePixelRatio || 
                    ctx.oBackingStorePixelRatio || 
                    ctx.backingStorePixelRatio || 1 ;
                比ましょう = DPR / BSRを。
                ビューポートせ = page.getViewport（screen.availWidth / page.getViewport（1 ）.width）。
                canvas.width = viewport.width * 比;
                canvas.height = viewport.height * 比;
                canvas.style.width = viewport.width + 'PX' ;
                canvas.style.height = viewport.height + 'PX' ;
                ctx.setTransform（比率、 0、0、比率、0、0 ）;
                RenderContextをしましょう= {
                    canvasContext：CTX、
                    ビューポート：ビューポート
                }。
                page.render（RenderContextを）。
                もし（この .pdfPages> NUM）{
                     この .renderPdfPage（NUM + 1 ）。
                }
            }）;
        }、

以下は、完全なコードです：

< テンプレート> 
    < divの> 
        < キャンバスV-用= "pdfPagesでページ" ：ID = " 'キャンバス' +ページ" ：キー= "ページ" > </ キャンバス> 
    </ DIV > 
</ テンプレート>

< スクリプト> 
からの輸入PDFJS ' pdfjs-distの' ;
pdfUrlましょう=  ' https://ecs7.tokopedia.net/instant-loan/file/29a2218e-bef9-44cb-b92b-8e81bc4d5228_DOC-20171013-WA0035.pdf ' ;

輸出のデフォルト{
    データ（）{
        リターン{
            pdfDocs：ゼロ、
            pdfPages：ヌル
        }
    }、
    作成した （） {
        この.loadPdf（）;
    }、
    方法：{
        loadPdf（）{
            PDFJS.getDocument（pdfUrl）.promise.then（（PDF）=> {
                console.log（' ------------------ ' 、PDF）。
                この.pdfDoc = PDF;
                この.pdfPages =  この.pdfDoc.numPages。
                この。$ nextTick（（）=> {
                     この.renderPdfPage（1 ）。
                }）;
            }）;
        }、
        renderPdfPage（NUM）{
            この.pdfDoc.getPage（NUM）.then（（ページ）=> {
                聞かせてキャンバス= のdocument.getElementById（' キャンバス'  + NUM）;
                CTXせ= （canvas.getContext ' 2D ' ）。
                DPRましょう= window.devicePixelRatio ||  1 ;
                BSRましょう= ctx.webkitBackingStorePixelRatio || 
                    ctx.mozBackingStorePixelRatio || 
                    ctx.msBackingStorePixelRatio || 
                    ctx.oBackingStorePixelRatio || 
                    ctx.backingStorePixelRatio ||  1 ;
                比ましょう= DPR / BSRを。
                ビューポートせ= page.getViewport（screen.availWidth / page.getViewport（1 ）.width）。
                canvas.width = viewport.width * 比;
                canvas.height = viewport.height * 比;
                canvas.style.width = viewport.width +  ' ピクセル' 。
                canvas.style.height = viewport.height +  ' ピクセル' 。
                ctx.setTransform（比率、0 、0 、比率、0 、0 ）;
                RenderContextをしましょう= {
                    canvasContext：CTX、
                    ビューポート：ビューポート
                }。
                page.render（RenderContextを）。
                もし（この.pdfPages > NUM）{
                     この.renderPdfPage（NUM +  1 ）。
                }
            }）;
        }、
    }
}
</ スクリプト>

 

 

オリジナル：https://www.jianshu.com/p/b48af7917656