Amphtml: FR: amp-pdf

[cvializ]

amp-pdf

amp-pdf will enable AMP to render PDFs natively, without requiring the use of amp-iframe and/or third-party PDF viewers.

API

The exact API is not yet spec'd but would essentially match that of amp-img in terms of layout and src.

<amp-pdf
  layout="responsive"
  width="17"
  height="22"
  src="https://www.example.com/document.pdf"
><div fallback><!-- ... --></div></amp-pdf>

Implementation

Mozilla provides an open source HTML5 PDF viewer library. It uses a web-worker and includes a few layers of abstraction. The most feature-rich level matches the functionality of the in-browser PDF experience in Firefox.

We would depend on the pdfjs-dist NPM package.

For this to work in AMP, we would need to complete the implicit TODO mentioned in web-worker.js because it depends on the pdfjs worker. https://github.com/ampproject/amphtml/blob/5d610adca01d30242673d7971bc55d9bcb5c6bcf/src/web-worker/web-worker.js#L17-L22

[aghassemi]

Google drive also has a open PDF viewer that we can use. It can currently be used with amp-iframe

    <amp-iframe sandbox="allow-scripts allow-same-origin" src="https://docs.google.com/gview?url=http%3A%2F%2Fwww.pdf995.com%2Fsamples%2Fpdf.pdf&embedded=true" width=1 height=1 layout=responsive><div placeholder>PDF coming</div></amp-iframe>

encoding the Pdf Url and putting it in the middle of the gview Url sucks though.

https://codepen.io/aghassemi/pen/ERVvwN

[jaygray0919]

also the google docs viewer requires the URL for the target PDF to be escaped, which add a lot of work when presenting multiple PDFs.
src="https://www.example.com/document.pdf would be a huge labor saver (labor savor)

[jpettitt]

Does it make sense to do a thin version of amp-pdf that's just a wrapper to provide a clean api around amp-iframe and the drive viewer?

[cvializ]

Hmm I think that would depend on how much we could improve on the payload and rendering speed of the iframe'd google viewer. But we could do both as well: implement the iframe'd viewer with a clean api for implementation sooner, while we measure its performance and implement the thicker component if the benefits outweigh the cost of implementing.

[aghassemi]

amp-google-doc-viewer handles this.