2017-11-03 18 views
0

私はすでにサーバーからファイルをダウンロードしたFlaskアプリケーションでPDF.js(またはViewer.js)を使用したいと思います。pdfが既にダウンロードされた後にPDF.jsを使用できますか?

よりもむしろ

PDFJS.getDocument('helloworld.pdf') 

を使用して、私はAjaxの呼び出しを介してブラウザにダウンロードされたPDFファイルを表示したいです。その後

fetchData: function() { 
    axios({ 
     method: 'get', 
     url: '/myapp/files/' + this.file_id, 
     dataType: ..., 
     headers: ..., 
     data: {} 
    }) 
    .then((response) => { 
     this.file = response.data 
     }) 
} 

私は考えます。クライアント側でフラスコ

@mayapp.route('/files/<int:file_id>', methods=['GET']) 
def file_access(file_id: int=None): 
    // lookup access and file path in database, get file 
    return send_file(file_path) 

例えば(これは、クライアントに提供する上でより多くのサーバーコントロールを可能にするには、ユーザーだけがアクセスを許可されていることをファイル)この.fileをPDF.jsに送って表示するのが好きです。 Flask/postgres - display pdf with PDFJSあたりとしてbase64でエンコードされた文字列を使用して

例:

var doc = PDFJS.getDocument({data: pdfData}) 

しかし、私は正確に文書をレンダリングする方法を考え出す傾けます。何か案は?

答えて

2

PDFのページを繰り返し、各ページをキャンバスにペイントできます。その後、

<body> 
    <div id="pdf-view"></div> 
</body> 

作成およびキャンバスにペイントし、下記のショーとして、PDF.jsの.numPages.getPage()ツールを使用します:

キャンバスを挿入することができるHTML要素を作成することによって、

スタート

async function renderPDFPage(pdf, pgNum) { 
    const pg = await pdf.getPage(pgNum) 
    const scale = 2 
    const viewport = pg.getViewport(scale) 
    const canvas = document.createElement('canvas') 
    const canvasContext = canvas.getContext('2d') 
    canvas.height = viewport.height 
    canvas.width = viewport.width 
    document.getElementById('pdf-view').appendChild(canvas) 
    await pg.render({canvasContext, viewport}) 
} 

async function renderPDF(pdf) { 
    for (let i = 1; i <= pdf.numPages; i++) { 
     await renderPDFPage(pdf, i) 
    } 
} 

const pdf = PDFJS.getDocument({data: pdfData}) 
renderPDF(pdf) 
関連する問題