How to save html pages as one file?

给你一囗甜甜゛ 提交于 2019-12-04 22:48:17

Viewing and creating MHTML files in current versions of Google Chrome is supported by toggling the "Save Page as MHTML" option on the chrome://flags page.

type chrome://flags in your url box

However, enabling this experimental option disables saving pages as HTML-only or HTML Complete files. From the chrome://flags page:

zTrix

The SingleFile chrome extension is a good solution.

I have also written my own python tool to solve this problem which I would recommend giving a try: https://github.com/zTrix/webpage2html

Extending upon zTrix's answer, I would suggest avoiding the Chrome extension (which did not work for me at all) and instead going with one of these options:

  • Node.js: remy's inliner
    • Easy to install using npm
    • Many options, including flags for disabling minification/compression, maintaining external images, skipping videos, and more.
    • Caveat: (22 September 2017) fails to maintain styling and JavaScript functionality when compiling Slate builds. This won't affect most people directly, but it means that inliner will probably have issues with other pages. See this issue
    • Caveat: no options to "leave things alone": will either minify/uglify CSS/JS or beautify, but will not simply embed original source into HTML.
  • Python 2: zTrix's webpage2html
    • More conservative than inliner; works well for most cases.
    • zTrix fixed a bug (that inliner also seems to have) which ensures JavaScript/CSS functionality when compiling Slate builds. See this issue. (updated 29 September 2017)
    • Can be converted to Python 3 relatively painlessly
    • Caveat: cannot handle CSS @import

Usually, it's possible to create one HTML file that contains all his common children files (css, jpg, js, svg, ...)
You must rewrite the HTML file by replacing "src" attributes' value, "url()" functions and insert HTML tag like "<script></script>" for JavaScript files, "<style></style>" for CSS files and "<svg></svg>" for SVG image.

For example a GIF image file in CSS called by the "url()" function.

  1. download the image from his URL.
  2. encode this image into Base64.
  3. replace "url('https://en.wikipedia.org/wiki/File:TPB_Magnet_Icon.gif')" by "url('data:image/gif;base64,R0lGODlhDAAMALMPAOXl5ewvErW1tebm5oocDkVFRePj47a2ts0WAOTk5MwVAIkcDesuEs0VAEZGRv///yH5BAEAAA8ALAAAAAAMAAwAAARB8MnnqpuzroZYzQvSNMroUeFIjornbK1mVkRzUgQSyPfbFi/dBRdzCAyJoTFhcBQOiYHyAABUDsiCxAFNWj6UbwQAOw')" with the Base64 encoded GIF image, prefixed by "data:image/gif;base64,"

You can do the same thing for the "src" attribute's value. This solution may be used for other binary files. You must adapt the right "data" prefix to corresponding to the encoded object.

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!