如何将带有内容文件夹的HMTL文件转换为自包含的HTML文件

Question

How do I convert an HTML file with content folder to a self-contained HTML file which can be viewed from anywhere with its images etc.

How can it be done so that its also Editable and stays self-contained post-edit.

I basically need to make HTML file based documentation which can be viewed from anywhere. Unfortunately it HAS to be HTML, otherwise I would have made PDFs

Thanks

Answer 1

The most direct way is to convert all asset urls to data: urls . (There are online coverters available that will take a provided asset and produce a data: url from it.)

A possibly simpler way is to convert image and font urls to data: urls while instead inlining scripts and css.

---

Edit: Possibly of interest: inliner , a Node utility for doing this kind of thing. "Turns your web page to a single HTML file with everything inlined". Also performs a number of minifying optimizations.

Answer 2

I don't know exactly what you're envisioning, but HTML was never meant to be fully self-contained. There may be some loopholes that allow it in the end, but to my knowledge there are no premade tools that do this 'conversion'. It would require the following things:

• Converting all linked style sheets and scripts to inline style sheets and scripts. This means that whenever there's a <script src="http://url.to/foo.js"></script> you'll have to download foo.js and include it as such: <script type="text/javascript"> [this is the content of foo.js] </script> . Something similar applies to CSS and other linked source files.
• Downloading all linked media (images mostly, I presume) and converting them to blobs (a service that provides you with a base64 blob you can use within a HTML file is https://www.base64-image.de/ ). This means replacing <img src="http://url.to/image.jpg" /> with <img src="data:image/png;base64,[converted image data goes here] /> . So there's gonna be some manual labour involved there, but it probably can be done (almost) fully.

Possibly there's a way to accomplish what you're wanting to do another way though, what exactly is your reason for wanting this?

Answer 3

Here's another option: write your documentation in markup, then use a tool such as "Marked 2" ( http://marked2app.com ) to convert to self-contained html. Works slick. Plus you can go back and edit the markup any time you need to update your documentation, then simply re-export your html file.

Answer 4

You can use pandoc , it has an option to create self-contained html files https://pandoc.org/MANUAL.html#option--self-contained .

If you start with html , this is the command.

pandoc in.html --self-contained -o out.html

This tool can do a lot more things, for example, you can also generate html from markdown files or generate pdf s instead.