pdfjs icon indicating copy to clipboard operation
pdfjs copied to clipboard

Add documentation for opening client-side PDFs

Open iisdan opened this issue 4 years ago • 3 comments

iisdan avatar Mar 14 '20 18:03 iisdan

Please provide more information. Are you talking about opening PDFs created with this library on the client-side, or about downloading and then opening PDFs created on the client-side? Why do you think it should be part of the documentation, since it might kinda be a general topic since it probably applies to all PDFs, not just PDFs created with this library.

rkusa avatar Mar 23 '20 10:03 rkusa

I’m talking about generating PDFs on the client side with this library

iisdan avatar Mar 23 '20 11:03 iisdan

https://github.com/rkusa/pdfjs/blob/master/playground/playground.js can be used to get an idea of the client-side usage until documentation is available.

In a nutshell: Have an object like:

<object id="preview" type="application/pdf">
   <p>This browser does not support PDFs. Sorry. Find out more about pdfjs at <a href="https://github.com/rkusa/pdfjs">Github</a>.</p>
</object>

Create your PDF an save it as an object URL:

doc.asBuffer()
    .then(buf => {
      const blob = new Blob([buf], { type: 'application/pdf' })
      return URL.createObjectURL(blob)
    })

Add that object URL to the <object /> HTML tag:

previewEl.data = url

If you want to load fonts or images, fetch that similar to:

fetch('/opensans.ttf')
    .then(res => res.arrayBuffer())
    .then(res => new pdf.Font(res))

rkusa avatar Mar 31 '20 05:03 rkusa