当前位置:首页 > 技术 > 正文内容

Chrome SingleFile 扩展将网页的 HTML DOM 发送到 restful API

代码老兵 技术 5

如果你经常需要保存网页,强烈推荐 Chrome 扩展程序 SingleFile

  • 优点:它会将 CSS、图片、字体全部编码进同一个 HTML 文件中。

  • 效果:保存后的本地文件看起来和在线网页一模一样,且只有一个文件,非常易于管理。


除了保存网页到本地之外,也支持其他网盘和restful API 的方式, 我这里尝试保存到 restful API,配置如下


image.png


测试了下,返回这个错误

SingleFile 错误:
<html>
 <head><title>413 Request Entity Too Large</title></head>
 <body>
  <center><h1>413 Request Entity Too Large</h1></center>
  <hr>
  <center>nginx/1.29.3</center>
 </body>
</html>
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page --> (RestFormApi)


这个错误非常典型:413 Request Entity Too Large 意味着尝试上传的 HTML 文件体积超过了 Nginx 服务器允许的最大限制。

由于 SingleFile 会将图片、字体等资源全部编码为 Base64 嵌入到 HTML 中,生成的单文件体积往往会达到几 MB 甚至几十 MB,而 Nginx 默认的限制通常只有 1MB

解决方法

你需要在 Nginx 配置文件中调大 client_max_body_size 参数。

1. 修改 Nginx 配置

找到你的 Nginx 配置文件(通常是 /etc/nginx/nginx.conf/etc/nginx/conf.d/your_site.conf),在 httpserverlocation 段落中添加以下配置:

http {    
    # 允许上传最大 50MB 的文件(根据你的需求调整)
    client_max_body_size 50M;    
    # ... 其他配置
}


2. 检查后端限制

如果修改了 Nginx 后仍然报错,你的后端框架可能也有默认限制。例如:

  • PHP: 修改 php.ini 中的 upload_max_filesizepost_max_size

3. 重载 Nginx

修改完配置后,别忘了测试并重启服务:


sudo nginx -t          # 检查语法是否正确
sudo nginx -s reload   # 平滑重启


如果你无法修改服务器配置

如果你使用的是第三方 API 或无法控制 Nginx 权限,可以尝试在 SingleFile 中优化减小文件体积:

  1. 开启压缩:在 SingleFile 选项中开启 "Compression"(这会消耗更多 CPU,但减小体积)。

  2. 精简内容

    • 取消勾选 "Save fonts"(字体文件通常很大)。

    • 取消勾选 "Save images"(如果不需要图片)。

    • 开启 "Remove unused CSS rules"。


修改后没有出现413错误,但在 laravel 后端接收不到 html 的内容,打印

json_encode($request->all(), JSON_PRETTY_PRINT)

显示

{
  "url": "https:\/\/agingcoder.cn\/post\/100067.html",
  "html": {}
}


在 Laravel 中看到 "html": {} 这种输出,通常是因为 SingleFile 发送的并不是普通的 JSON 文本字段,而是一个 Multipart Form Data 里的 文件流(File Upload)

当你使用 json_encode($request->all()) 时,PHP 无法将底层的 UploadedFile 对象直接序列化为字符串,所以显示为空对象 {}

原因:它是“文件”而非“字符串”

SingleFile 在推送时,默认会将压缩后的 HTML 作为一个名为 filehtml 的文件上传。

解决方法:在 Laravel 中获取

请尝试在你的 Controller 中改用以下方式来查看内容:

$file = $request->file('html');
$htmlContent = file_get_contents($file->getRealPath());


相关文章

Linux crontab 详解

1) crontab 是什么cron 是 Linux 的定时任务守护进程;crontab 是用来编辑/查看“按时间周期执行命令”的表(cron table)。常见两类:用户 crontab:每个用户一份(crontab -e 编辑)系统级 crontab / cron.d:可指定执行用户(/etc/crontab、/etc/cron.d/*)2) crontab 时间...

富文本里可以允许的 HTML 属性

一、所有标签默认允许的安全属性(极少)class        (可选)id           (通常建议禁用)title️ 注意:id 容易被滥用做锚点注入,很多系统直接禁用class 允许的话最好只允许固定前缀(如 editor-*)二、a 标签允许属性<a href="" t...

Mac 安装 Node.js 指南

方法一:通过官网安装包(最简单,适合初学者)如果你只是想快速安装并开始使用,这是最直接的方法。访问 Node.js 官网。页面会显示两个版本:LTS (Recommended For Most Users):长期支持版,最稳定。建议选这个。Current:最新特性版,包含最新功能但可能不够稳定。下载 .pkg 安装包并运行。按照安装向导点击“下一步”即可完成。方法二:使用 Homebrew 安装(...

Dom\HTML_NO_DEFAULT_NS 的副作用:自动加闭合标签

在使用Dom\HTMLDocument时,Dom\HTML_NO_DEFAULT_NS 将禁止在解析过程中设置元素的命名空间, 此设置是为了与DOMDocument向后兼容而存在的。当使用它时,已知的一个副作用就是:自动加闭合标签例如 </img> 为什么会这样?当你使用:Dom\HTML_NO_DEFAULT_NS文档会变成 无命名空间模式,此时内部更接近 XML...

Laravel 事件和监听器创建

在 Laravel 中,使用 Artisan 命令创建 Events(事件) 和 Listeners(监听器) 是非常高效的。你可以通过以下几种方式来实现:1. 手动创建单个 Event如果你只想创建一个事件类,可以使用 make:event 命令:Bashphp artisan make:event UserRegistered执行后,文件将生成在 app/Even...

自定义域名解析神器 dnsmasq

什么是 dnsmasq?dnsmasq 是一个轻量级、功能强大的网络服务工具,专为小型和中等规模网络设计。它是一个综合的网络基础设施解决方案[1]。dnsmasq 能做什么?功能说明应用场景DNS 转发与缓存将 DNS 查询转发到上游服务器(ISP、Google DNS 等),并在本地缓存结果加快 DNS 查询速度,减少外部 DNS 流量本地 DNS解析本地网络设备的主机名,无需编辑&n...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。