Public
Edited
Dec 12, 2024
Insert cell
# pdf.js

- [getting started](https://mozilla.github.io/pdf.js/getting_started/)
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
pdf = {
const loadingTask = pdfjs.getDocument(url);
const pdf = await loadingTask.promise;
return pdf;
}
Insert cell
Insert cell
Insert cell
page = pdf.getPage(n)
Insert cell
Insert cell
Insert cell
viewof options = Inputs.checkbox(['overlap', 'blue'], { label: "Options"})
Insert cell
viewport = page.getViewport({ scale })
Insert cell
Insert cell
Insert cell
{
const content = await page.getTextContent();
const text = content.items.map((v) => v.str).join("");

return html`<textarea style="width:100%;height:180px;">${text}</textarea>`;
}
Insert cell
page.getAnnotations()
Insert cell
page.getTextContent({
includeMarkedContent: true,
// disableNormalization: true,
})

// page.objs.has('page48R_mcid0')
Insert cell
// page.getTextContent()
// page.stats
page.getStructTree()
// page.getAnnotations()
// page.streamTextContent()
Insert cell
{
const viewport = page.getViewport({ scale })
const canvas = document.querySelector('#page-canvas')
const ctx = canvas.getContext('2d')
canvas.width = Math.floor(viewport.width * outputScale)
canvas.height = Math.floor(viewport.height * outputScale)
canvas.style.width = Math.floor(viewport.width) + 'px'
canvas.style.height = Math.floor(viewport.height) + 'px'
const transform = outputScale == 1 ? null : [outputScale, 0, 0, outputScale, 0, 0]
const renderContext = {
canvasContext: ctx,
transform: transform,
viewport: viewport,
}
const task = page.render(renderContext)
await task.promise
return canvas
}
Insert cell
{
const pageText = document.querySelector('#page-text')
const container = document.createElement('div')
pageText.innerHTML = ''
pageText.append(container)
const textContentItemsStr = []
const task = pdfjs.renderTextLayer({
textContentSource: page.streamTextContent(),
container: container,
viewport: page.getViewport({ scale }),
// textDivs: [],
// textDivProperties: [],
textContentItemsStr: textContentItemsStr,
isOffscreenCanvasSupported: false,
})
await task.promise
return html`<textarea style="width:100%;height:180px;">${textContentItemsStr.join("")}</textarea>`
}
Insert cell
Insert cell
version = "3.4.120"
Insert cell
pdfjs = await require(`https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${version}/pdf.min.js`)
Insert cell
pdfjs.GlobalWorkerOptions.workerSrc = `https://cdnjs.cloudflare.com/ajax/libs/pdf.js/${version}/pdf.worker.js`
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more