PDF.js pdf已经下载后可以使用吗?
Can PDF.js be used after pdf has already been downloaded?
我想将 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
})
}
那我想把this.file喂给PDF.js看看
例如,根据 :
使用 base64 编码的字符串
var doc = PDFJS.getDocument({data: pdfData})
但我不知道如何准确地呈现文档。有任何想法吗?
您可以遍历 PDF 页面并将每个页面绘制成 canvas。
首先创建一个 HTML 元素,可以在其中插入 canvases:
<body>
<div id="pdf-view"></div>
</body>
然后使用PDF.js的.numPages
和.getPage()
工具,如下所示,创建并绘制到canvases:
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)
我想将 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
})
}
那我想把this.file喂给PDF.js看看
例如,根据
var doc = PDFJS.getDocument({data: pdfData})
但我不知道如何准确地呈现文档。有任何想法吗?
您可以遍历 PDF 页面并将每个页面绘制成 canvas。
首先创建一个 HTML 元素,可以在其中插入 canvases:
<body>
<div id="pdf-view"></div>
</body>
然后使用PDF.js的.numPages
和.getPage()
工具,如下所示,创建并绘制到canvases:
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)