把HTML網頁下載為單文件，可離線訪問

網頁下載下來使用，在日常工作中使用頻率還是很高的，有時候確實能解一時之急，我自己就有很窘迫的經歷。

我開會的時候，都會把準備好的文檔存在局域網，到會議室直接打開就能直接用了。有一次到分公司，由于分公司剛剛成立，內網還沒有和母公司連通。結果這下子懵逼了，上不去內網，看不到文檔。又是叫同事發過來，又是提發送文件的安全申請，讓人著急。

如果把網站保存下來，放在自己的電腦中，既不用擔心信息泄露問題，又不用為了看不了文檔而著急。

遇到問題，記錄下來，然后解決問題，程序員的解決思路永遠是自己創造輪子的，接下來就是不斷的探索解決方案。

其實下載網頁的方式有很多種，其中有幾種辦法使用的比較多，例如：如果你用Chrome，直接按 Ctrl+s 就可實現。使用這種方法，Chrome會把整個網站，按照編譯完成的源碼目錄結構保存下來。像下面這樣：

下載完成的文件直接點擊 xxx.html 可以直接離線訪問，但是這種方式對目錄的依賴結構比較高，怎么理解呢？就是 html 文件和對應文件名的文件夾必須在同一個目錄中，才能正常使用。拷貝到其他機器的時候必須要兩個同時拷貝才可以，否則就會排版錯亂。

如果有十個或者更多的網頁需要拷貝或者刪除，就會很麻煩，例如我想在其中找到其中幾個，復制到其他地方，很容易弄錯順序。

HTML 是一種純文本格式，它用于排版文字。純文本文檔的意思就是，文檔中只包含文字內容，不包含二進制內容，舉個例子：打印出的A4紙，只有文字沒有圖片。而 HTML 想要顯示照片等二進制信息，通常都會鏈接到其他文件，也就是上面文件夾里面的內容。

不過 Chrome 下載文件這種方式也有優點，下載下來的文件可以保持獨立性，比如說，我需要這個網頁中的一張圖片，那么就可以直接到文件夾里面尋找了。

另外還有一種辦法，也有很多人再使用。Chrome 在打印網頁的時候，會把網頁轉成 PDF ，然后在進行打印。那么就給我們提供了很明確的思路，把網頁直接保存為 PDF ，這樣保存下來的網頁就只有一個文件。

使用Chrome，直接按下Ctrl+p就可以。然后目標打印機選擇另存為 PDF 。

這個功能很多瀏覽器都支持

但是這種辦法也有很明顯的缺點，由于 PDF 是靜態文檔，網頁上的一些動畫可能不會正常顯示，而且排版也有可能會錯亂，這完全靠運氣。個人覺得這不是一種很靠譜的方法。

這時候主角來了！有一個工具既可以把網頁保存為 html 又可以保持是單文件。他就是 monolith ，你可以在 github 上面找到它，但是源碼并沒有編譯為可執行文件，我把它編譯了一下，下面會放上來鏈接，https://github.com/leconio/Repos/raw/master/monolith.7z。

那么下面就簡單說說使用方法：如果你下載我的鏈接，那么里面有三個文件：

第一個是Mac平臺編譯出來的，使用方式為：

./monolith 網站地址 > xxx.html

默認情況下 monolith 會把生成的 html 輸出到標準輸出流，也就是當前終端。使用 > 我們把輸出的內容重定向并覆蓋到文件。

執行完成之后，在這個目錄下面就會有一個對應的文件：xxx.html 。

另外兩個是 Windows 平臺使用的。為了簡化使用，我寫了一個 CMD 腳本。直接點擊 monolith.cmd ，然后粘貼地址就可以完成下載。

下載完成之后，在本地你會發現只有一個 html 文件。我們打開之后，發現圖片和JS等信息都在，而且排版正常。那么就要思考了，我們之前說過，HTML 是放置純文本信息的，那么圖片在哪里呢？

答案顯而易見，就在 HTML 文件里面。為了方便小圖片傳輸，有一種叫 Base64 的東西，它可以把二進制信息變成成純文本。這在使用 Json 傳遞數據的今天十分常見，它可以減少一次請求（題外話），這里就是用的這個原理。monolith 把圖片等二進制內容轉為了純文本，保存在 HTML 文件中。我們在下載的文件源碼可以看到：

對比源代碼，src 信息已經變成了 base64 格式的圖片，就是那串亂碼。復制那串亂碼，從網上搜一個 base64 轉圖片工具，粘貼進去，這時會發現就是我們看到的那張圖片。這樣一來，無論這個網站上有多少個文件，都會保存到一個 HTML 文件里面，而且還能離線使用。

當然，base64 編碼的圖片比原生圖片略大，這可能也是你現在在擔心的問題。不過 monolith 會特殊處理文件體積。我們可以看看 Chrome 直接下載和使用 monolith 下載體積相差多少。我們把兩種方式下載的網頁都進行了 7-Zip 壓縮。

我們可以看到，使用 monolith 下載會比 Chrome 直接下載小一倍還多！

最后要說的是局限性，無論那種方法，都幾乎不能把視頻網站中的視頻下載下來。因為現在的視頻地址都是 Token 加密的，同理，使用 Token 加密的其他請求信息也無法下載。

比如你可以試試下載其他網站的首頁，Logo 和視頻都是下載不了的。但是也有解決辦法，那就是另外一個領域的事情了，以后有機會說給大家聽。

如果這篇文章對您或者您的朋友有幫助，感謝您關注，轉發。

SP.NET Core 支持直接向客戶端提供靜態文件，比如：Html文件，圖片，js文件，為了能夠讓 ASP.NET Core 處理靜態文件，需要使用 靜態文件中間件 并做一些必要配置就可以了，這篇文章我們就來一起討論下。

安裝靜態文件中間件

要想安裝靜態文件中間件,必須將 Microsoft.AspNetCore.StaticFiles 添加到 ASP.NET Core 的請求管道中，可以使用 Visual Studio 2019 中的 NuGet package manager 可視化界面，要么用 NuGet package manager console 在命令行窗口中鍵入如下命令。


dotnet add package Microsoft.AspNetCore.Rewrite

基礎信息配置

下面的代碼展示了在 Startup 中如何對靜態文件中間件進行配置。


public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
   app.UseStaticFiles();
   app.UseEndpoints(endpoints =>
   {
       endpoints.MapControllerRoute(
            name: "default",
            pattern: "{controller=Home}/{action=Index}/{id?}");
            endpoints.MapRazorPages();
   });
}

ASP.NET Core 中處理靜態文件

靜態文件都是統一配置在 wwwroot 文件夾下, 可以看到 wwwroot文件夾下還有 css，images，js 等文件夾，值得注意的是這些文件夾之間可以采用相對路徑進行訪問。

如果 靜態文件中間件 已經成功配置好，接下來可以使用下面的路徑訪問 test.png 圖片。


http://localhost:44399/images/test.png

如果大家心思細膩的話就會發現，當我不想用 wwwroot 來承載這些靜態文件的話，該怎么做呢？換句話說，我怎么去處理在 wwwroot 文件夾之外的靜態文件呢？下面的代碼片段展示了如何去配置。


public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
    app.UseStaticFiles();

    app.UseStaticFiles(new StaticFileOptions()
    {
        FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(),@"IDGStaticFiles")),
        RequestPath = new PathString("/StaticFiles")
    });
}

啟用目錄瀏覽

一般web程序中都會提供一個叫做 目錄瀏覽 的功能，它允許用戶瀏覽一個指定文件夾下的所有文件和文件夾，但通常為了安全考慮，這個功能默認都是關閉狀態，如果你有開啟的需求，可以使用 UseDirectoryBrowser 擴展方法在 Configure 下進行配置，下面的代碼片段展示了如何開啟 目錄瀏覽。


    public class Startup
    {
        public Startup(IConfiguration configuration)
        {
            Configuration = configuration;
        }

        public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDirectoryBrowser();
        }

        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            app.UseStaticFiles();

            app.UseStaticFiles(new StaticFileOptions()
            {
                FileProvider = new PhysicalFileProvider(Path.Combine(Directory.GetCurrentDirectory(), @"wwwroot")),
                RequestPath = new PathString("/IDGImages")
            });

            app.UseDirectoryBrowser(new DirectoryBrowserOptions()
            {
                FileProvider = new PhysicalFileProvider(
              Path.Combine(Directory.GetCurrentDirectory(), @"wwwroot\images")),
                RequestPath = new PathString("/IDGImages")
            });
        }
    }

然后把程序跑起來并在 url 中指定 IDGImages 路徑，你將會看到 wwwroot\images 文件夾下的所有內容。

保護文件安全

從前面的例子中可以看到，wwwroot 中的這些文件都是公開可訪問的，但很多時候想在某些文件上做一些授權處理，如果要這么做的話，有兩種方式可以實現。

將需要保護的文件從 wwwroot 移到單獨的文件夾中。
利用 Action 來處理文件，并返回 FileResult 的方式。

處理默認頁面

最后，你可以利用 UseDefaultFiles 擴展方法來提供一個 web程序的默認頁面，下面的代碼配置展示了如何配置。


public void Configure(IApplicationBuilder app)
{
    app.UseDefaultFiles();
    app.UseStaticFiles();
}

值得注意的是，如果你的web程序中需要有 靜態文件,默認文件,目錄瀏覽 三項功能的話，可以直接使用 UseFileServer 擴展方法，下面的代碼片段展示了如何在 Configure 方法中進行配置。


app.UseFileServer(enableDirectoryBrowsing: true);

譯文鏈接：https://www.infoworld.com/article/3446957/how-to-work-with-static-files-in-aspnet-core.html

Umi3官方文檔中，有一個配置項exportStatic需在配置文件（umirc.ts或config/config.ts）中設置，語法如下：

exportStatic
   Type: object

此配置項有三個參數，規范如下：
1. htmlSuffix：啟用.html 后綴。
2. dynamicRoot：部署到任意路徑。
3. extraRoutePaths：生成額外的路徑頁面，用法和場景見預渲染動態路由

Umi框架配置 html 的輸出形式，默認只輸出 index.html。如果需要預渲染，請開啟 ssr 配置，常用來解決沒有服務端情況下，頁面的 SEO 和首屏渲染提速。如果開啟 exportStatic，則會針對每個路由輸出 html 文件。

舉個例子，路由配置如下：

/
/users
/list

在不開啟 exportStatic 時，輸出：

- index.html

設置 exportStatic: {} 后，輸出：

- index.html
- users/index.html
- list/index.html

設置 exportStatic: { htmlSuffix: true } 后，輸出：

- index.html
- users.html
- list.html

若有 SEO的話需求，可開啟 ssr 配置，在 umi build 后，會路由（除靜態路由外）渲染成有具體內容的靜態 html 頁面，例如在配置文件（umirc.ts | config/config.ts）中有如下路由配置：

{

  routes: [

    {

      path: '/',

      component: '@/layouts/Layout',

      routes: [

        { path: '/', component: '@/pages/Index' },

        { path: '/bar', component: '@/pages/Bar' },

        { path: '/news', component: '@/pages/News' },

        { path: '/news/:id', component: '@/pages/NewsDetail' },

      ],

    },

  ];

}

設置 { ssr: {}, exportStatic: { } 后，且在編譯后，生成如下產物：

- dist

  - umi.js
  - umi.css
  - index.html

  - bar
    - index.html

  - news
    - index.html
    - [id].html

考慮到預渲染后，大部分不會再用到 umi.server.js 服務端文件，構建完成后會刪掉 umi.server.js 文件如果有調試、不刪除 server 文件需求，可通過環境變量 RM_SERVER_FILE=none 來保留。

轉載：碼書網「鏈接」

在線咨詢

上一篇：select如何讓文字右對齊
下一篇：HTML網頁編程之按鈕詳解

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商