Document Viewer with HTML iFrames

It might sound like a very specific use case, but a lot of documents are stored as exported HTML from a PDF. With this viewer, you can add zoom & drag UI controls.

How To Use

Add the main.js and main.css to the header of your file. Modify the initializer with the size of your document if needed. Your embedded document page will now have zoom and drag controls.

function init() {
  // Example size, must include width and height of content in px
  const catalog = new DocumentPage('921', '1196')
}
document.addEventListener("DOMContentLoaded", () => {
  init()
});

Full Code:

Demo: