Nodejs 怎么使用JS代码下载 node.js服务器中分配的路由页面

Nodejs 怎么使用JS代码下载 node.js服务器中分配的路由页面

比如客户端页面点击按钮的onclick事件，下载http://192.168.3.123:7077/users的页面，以.html格式保存 http://192.168.3.123:7077/users的对应路由代码：

var express = require(‘express’); var router = express.Router();

/* GET users listing. / router.get(’/’, function(req, res) { // res.send(‘respond with a resource123456’); var Cookies = {}; req.headers.cookie && req.headers.cookie.split(’;’).forEach(function( Cookie ) { var parts = Cookie.split(’=’); Cookies[ parts[ 0 ].trim() ] = ( parts[ 1 ] || ‘’ ).trim(); }); console.log(Cookies); res.writeHead(200, {‘Content-Type’: ‘text/html’}); res.write(’<html>’+ ‘<head>’+ ‘<script type=“text/javascript”>’+ ‘function load(){’+ // ‘alert(“start!”);’+ / ‘var url=location.search;’+ ‘var result=url.split("=")[1];’+ ‘if(result!=null){’+ ‘document.getElementById(“result”).value=result;’+ ‘}’+ */ ‘alert(getCookie(“result”));’+ ‘document.getElementById(“result”).value=getCookie(“result”);’+ // ‘alert(“end!”);’+ ‘}’+ ‘function getCookie(name){’+ //获取cookie ’if (document.cookie.length>0){’+ ‘c_start=document.cookie.indexOf(name + “=”);’+//查询cookie键名 ’if (c_start!=-1){’+ //查询到cookie键名 ’c_start=c_start + name.length+1;’+//查询到cookie键名 ’c_end=document.cookie.indexOf(";",c_start);’+ ‘if (c_end==-1) c_end=document.cookie.length;’+//如果只有一个cookie键值对，该方法才有效； ‘return unescape(document.cookie.substring(c_start,c_end));’+ ’}’+ ’}’+ ‘return “”;’+ ’}’+ ‘</script>’+ ‘</head>’+ ‘<body onload=“load()”>’+ ‘<input type=“text” id=“result” value=""/><br/>’+ ‘</body>’+ ‘</html>’); res.end(); });

module.exports = router;


2 回复

Node.js 如何使用 JS 代码下载 Node.js 服务器中分配的路由页面

场景描述

假设有一个客户端页面，当用户点击一个按钮时，需要下载位于 http://192.168.3.123:7077/users 的页面，并将其保存为 .html 文件。

示例代码

客户端 JavaScript 代码

首先，在客户端页面中添加一个按钮，当点击该按钮时，触发下载操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Download Page</title>
</head>
<body>
    <button id="downloadButton">Download Page</button>

    <script>
        document.getElementById('downloadButton').addEventListener('click', function() {
            fetch('http://192.168.3.123:7077/users')
                .then(response => response.text())
                .then(data => {
                    const blob = new Blob([data], {type: 'text/html'});
                    const link = document.createElement('a');
                    link.href = URL.createObjectURL(blob);
                    link.download = 'users.html';
                    document.body.appendChild(link);
                    link.click();
                    document.body.removeChild(link);
                })
                .catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

上述代码中：

  1. 创建了一个按钮。
  2. 添加了点击事件监听器。
  3. 使用 fetch 方法从服务器获取 http://192.168.3.123:7077/users 页面的内容。
  4. 将响应数据转换为文本格式。
  5. 创建一个 Blob 对象，类型为 text/html。
  6. 创建一个临时的 <a> 元素用于触发文件下载。
  7. 设置下载链接并触发点击事件，完成文件下载。
服务器端路由代码

服务器端的路由代码已经给出，这里不再赘述。主要逻辑是在 /users 路由上返回 HTML 内容：

var express = require('express');
var router = express.Router();

/* GET users listing. */
router.get('/', function(req, res) {
    var Cookies = {};
    req.headers.cookie && req.headers.cookie.split(';').forEach(function(Cookie) {
        var parts = Cookie.split('=');
        Cookies[parts[0].trim()] = (parts[1] || '').trim();
    });
    console.log(Cookies);
    
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write('<html>'+
              '<head>'+
              '<script type="text/javascript">'+
              'function load(){'+
              'alert(getCookie("result"));'+
              'document.getElementById("result").value=getCookie("result");'+
              '}'+
              'function getCookie(name){'+
              'if (document.cookie.length > 0){'+
              'c_start=document.cookie.indexOf(name + "=");'+
              'if (c_start != -1){'+
              'c_start=c_start + name.length+1;'+
              'c_end=document.cookie.indexOf(";",c_start);'+
              'if (c_end == -1) c_end=document.cookie.length;'+
              'return unescape(document.cookie.substring(c_start,c_end));'+
              '}'+
              '}'+
              'return "";'+
              '}'+
              '</script>'+
              '</head>'+
              '<body onload="load()">'+
              '<input type="text" id="result" value=""/>'+
              '</body>'+
              '</html>');
    res.end();
});

module.exports = router;

这段代码定义了一个简单的 Express 路由，用于处理 /users 路径的 GET 请求，并返回一个包含 JavaScript 函数的 HTML 页面。

总结

通过上述代码，客户端可以通过点击按钮来触发下载操作，服务器则返回指定路径的 HTML 内容。这种方式可以方便地实现网页内容的下载功能。


为了实现从Node.js服务器下载路由页面并以HTML格式保存的功能，你可以使用axios或node-fetch这样的库来发送HTTP请求。以下是一个简单的示例代码，展示如何通过JavaScript（客户端）发送请求，并将响应内容保存为HTML文件。

示例代码

首先，在你的HTML页面中添加一个按钮，当点击时触发下载功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Download Page Example</title>
</head>
<body>
    <button id="downloadBtn">下载页面</button>

    <script>
        document.getElementById('downloadBtn').addEventListener('click', async () => {
            const response = await fetch('http://192.168.3.123:7077/users');
            if (!response.ok) {
                throw new Error(`Network response was not ok: ${response.statusText}`);
            }
            const content = await response.text();

            // 创建一个a标签并设置href属性为data URL
            const blob = new Blob([content], {type: 'text/html'});
            const url = window.URL.createObjectURL(blob);

            // 创建一个隐藏的a标签并触发下载
            const a = document.createElement('a');
            a.href = url;
            a.download = 'users.html';
            document.body.appendChild(a);
            a.click();
            a.remove();
            window.URL.revokeObjectURL(url);
        });
    </script>
</body>
</html>

解释

  1. HTML部分:

    • 添加一个按钮，ID为downloadBtn。

  2. JavaScript部分:

    • 监听按钮的点击事件。
    • 使用fetch API发送GET请求到指定的URL (http://192.168.3.123:7077/users)。
    • 检查响应状态是否正常，如果不正常则抛出错误。
    • 将响应内容转换为文本。
    • 创建一个Blob对象，并使用createObjectURL方法生成一个可下载的URL。
    • 创建一个隐藏的<a>标签，设置其href属性为上述创建的URL，并设置download属性为文件名。
    • 触发点击事件，完成下载后移除该元素，并释放URL对象。

这样，当你点击按钮时，浏览器会向服务器发送请求，并将返回的内容保存为名为users.html的文件。

回到顶部