pdf已经下载后可以使用PDF.js吗？答案

【问题标题】：Can PDF.js be used after pdf has already been downloaded?pdf已经下载后可以使用PDF.js吗？
【发布时间】：2017-11-03 12:30:15
【问题描述】：

我想将 PDF.js（或 Viewer.js）与我已经从服务器下载文件的 Flask 应用程序一起使用。

而不是使用

PDFJS.getDocument('helloworld.pdf')

我想查看通过 Ajax 调用下载到浏览器的 pdf。（这允许更多的服务器控制向客户端提供仅允许用户访问的文件）

例如在 Flask 中

@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)

在客户端：

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

然后我想将此.file 输入 PDF.js 以查看它。

例如根据Flask / postgres - display pdf with PDFJS 使用base64 编码的字符串：

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

但我不知道如何准确呈现文档。有任何想法吗？

【问题讨论】：

标签： javascript pdf vue.js pdf.js

【解决方案1】：

您可以遍历 PDF 的页面并将每个页面绘制到画布上。

首先创建一个可以插入画布的 HTML 元素：

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

然后使用 PDF.js 的.numPages 和.getPage() 工具，如下图所示，创建并绘制到画布上：

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)

【讨论】：