推荐资源

即梦AI

抖音出品 AI视频图片生成

Envato Elements

无限下载设计素材与模版

Eagle

图片素材文献管理神器

Setapp

畅享240+款Mac优质应用

HTML 编辑与预览

HTML SourceEditable

<div style="padding: 40px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; color: #333; line-height: 1.6; max-width: 800px; margin: 0 auto;">
  <h1 style="color: #2563eb; border-bottom: 2px solid #e5e7eb; padding-bottom: 10px; margin-bottom: 20px;">
    HTML 转 PDF 测试文档
  </h1>
  
  <p style="margin-bottom: 15px;">
    这是一个用于测试 <strong>HTML 转 PDF</strong> 功能的示例文档。您可以在左侧的编辑器中修改代码，或者点击上方的“上传 HTML”按钮导入您自己的文件。
  </p>
  
  <div style="background: #f8fafc; border-left: 4px solid #2563eb; padding: 15px; margin: 20px 0; border-radius: 4px;">
    <strong>💡 功能特点：</strong>
    <ul style="margin: 10px 0 0 20px; padding: 0;">
      <li>支持自定义 CSS 样式</li>
      <li>支持图片和复杂布局</li>
      <li>智能长图分页（自动切割 A4/Letter 纸）</li>
      <li>100% 本地渲染，保护隐私</li>
    </ul>
  </div>

<h3 style="margin-top: 30px; color: #4b5563;">分页测试区域</h3>
  <p>下面是一个长列表，用于测试 PDF 的自动分页功能。当内容超过一页（约 297mm 高度）时，工具会自动将其切割到下一页。</p>

<table style="width: 100%; border-collapse: collapse; margin-top: 20px; font-size: 14px;">
    <thead>
      <tr style="background: #e2e8f0;">
        <th style="border: 1px solid #cbd5e1; padding: 10px; text-align: left;">ID</th>
        <th style="border: 1px solid #cbd5e1; padding: 10px; text-align: left;">项目名称</th>
        <th style="border: 1px solid #cbd5e1; padding: 10px; text-align: left;">状态</th>
      </tr>
    </thead>
    <tbody>
      
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">1</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 1</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: green;">完成</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">2</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 2</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: orange;">进行中</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">3</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 3</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: green;">完成</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">4</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 4</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: orange;">进行中</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">5</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 5</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: green;">完成</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">6</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 6</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: orange;">进行中</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">7</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 7</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: green;">完成</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">8</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 8</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: orange;">进行中</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">9</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 9</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: green;">完成</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">10</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 10</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: orange;">进行中</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">11</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 11</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: green;">完成</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">12</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 12</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: orange;">进行中</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">13</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 13</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: green;">完成</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">14</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 14</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: orange;">进行中</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">15</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 15</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: green;">完成</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">16</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 16</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: orange;">进行中</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">17</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 17</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: green;">完成</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">18</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 18</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: orange;">进行中</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">19</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 19</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: green;">完成</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">20</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 20</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: orange;">进行中</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">21</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 21</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: green;">完成</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">22</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 22</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: orange;">进行中</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">23</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 23</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: green;">完成</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">24</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 24</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: orange;">进行中</td>
      </tr>
      
      <tr>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">25</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px;">测试数据行 - 25</td>
        <td style="border: 1px solid #cbd5e1; padding: 8px; color: green;">完成</td>
      </tr>
      
    </tbody>
  </table>

预览模式 (缩放显示)

HTML 转 PDF 测试文档

这是一个用于测试 HTML 转 PDF 功能的示例文档。您可以在左侧的编辑器中修改代码，或者点击上方的“上传 HTML”按钮导入您自己的文件。

💡 功能特点：

支持自定义 CSS 样式
支持图片和复杂布局
智能长图分页（自动切割 A4/Letter 纸）
100% 本地渲染，保护隐私

分页测试区域

下面是一个长列表，用于测试 PDF 的自动分页功能。当内容超过一页（约 297mm 高度）时，工具会自动将其切割到下一页。

ID	项目名称	状态
1	测试数据行 - 1	完成
2	测试数据行 - 2	进行中
3	测试数据行 - 3	完成
4	测试数据行 - 4	进行中
5	测试数据行 - 5	完成
6	测试数据行 - 6	进行中
7	测试数据行 - 7	完成
8	测试数据行 - 8	进行中
9	测试数据行 - 9	完成
10	测试数据行 - 10	进行中
11	测试数据行 - 11	完成
12	测试数据行 - 12	进行中
13	测试数据行 - 13	完成
14	测试数据行 - 14	进行中
15	测试数据行 - 15	完成
16	测试数据行 - 16	进行中
17	测试数据行 - 17	完成
18	测试数据行 - 18	进行中
19	测试数据行 - 19	完成
20	测试数据行 - 20	进行中
21	测试数据行 - 21	完成
22	测试数据行 - 22	进行中
23	测试数据行 - 23	完成
24	测试数据行 - 24	进行中
25	测试数据行 - 25	完成

—— 文档结束 ——

HTML 转 PDF 测试文档

这是一个用于测试 HTML 转 PDF 功能的示例文档。您可以在左侧的编辑器中修改代码，或者点击上方的“上传 HTML”按钮导入您自己的文件。

💡 功能特点：

支持自定义 CSS 样式
支持图片和复杂布局
智能长图分页（自动切割 A4/Letter 纸）
100% 本地渲染，保护隐私

分页测试区域

下面是一个长列表，用于测试 PDF 的自动分页功能。当内容超过一页（约 297mm 高度）时，工具会自动将其切割到下一页。

ID	项目名称	状态
1	测试数据行 - 1	完成
2	测试数据行 - 2	进行中
3	测试数据行 - 3	完成
4	测试数据行 - 4	进行中
5	测试数据行 - 5	完成
6	测试数据行 - 6	进行中
7	测试数据行 - 7	完成
8	测试数据行 - 8	进行中
9	测试数据行 - 9	完成
10	测试数据行 - 10	进行中
11	测试数据行 - 11	完成
12	测试数据行 - 12	进行中
13	测试数据行 - 13	完成
14	测试数据行 - 14	进行中
15	测试数据行 - 15	完成
16	测试数据行 - 16	进行中
17	测试数据行 - 17	完成
18	测试数据行 - 18	进行中
19	测试数据行 - 19	完成
20	测试数据行 - 20	进行中
21	测试数据行 - 21	完成
22	测试数据行 - 22	进行中
23	测试数据行 - 23	完成
24	测试数据行 - 24	进行中
25	测试数据行 - 25	完成

—— 文档结束 ——

一键将 HTML 转换为多页 PDF

我们的工具内置了智能分页逻辑。当您的 HTML 内容（如长报表、简历或文章）超过一页纸的长度时，工具会自动将其切割并生成多页 PDF 文档，确保内容完整不丢失。

支持本地文件上传

除了直接编辑代码，您现在可以直接上传本地的 .html 或 .htm 文件。这对于需要将现有的网页存档、发票 HTML 转换为 PDF 的场景非常有用。所有处理均在浏览器本地完成，文件不会上传到服务器，绝对安全。

灵活的页面设置

您可以自由切换纵向 (Portrait) 或 横向 (Landscape) 布局。预览窗口会根据您的设置实时调整比例，确保导出的 PDF 版式与您在屏幕上看到的一致。

常见应用场景

发票与收据生成： 使用 HTML 模板快速生成标准化的财务凭证。
报告导出： 将网页上的数据报表或分析结果保存为 PDF 归档。
简历制作： 使用 HTML/CSS 编写排版精美的简历，并导出为 PDF 投递。
开发测试： 前端开发者快速测试打印样式 (Print Styles) 或 PDF 导出逻辑。

专注白噪音

雨声Lofi，为设计提供完美背景音。

精选神器

阿里云

爆款云服务器特惠抢购

腾讯云

云产品特惠性价比首选

腾讯元宝

免费DeepSeek AI助手

小绿鲸

英文文献阅读科研必备

即梦AI

Envato Elements

Eagle

Setapp

HTML 编辑与预览

HTML 转 PDF 测试文档

分页测试区域

HTML 转 PDF 测试文档

分页测试区域

一键将 HTML 转换为多页 PDF

支持本地文件上传

灵活的页面设置

常见应用场景

相关工具

图片转PDF

PDF转图片

PDF合并

专注白噪音

精选神器

阿里云

腾讯云

腾讯元宝

小绿鲸

热门工具

AI智能配色生成器

颜色格式转换器

渐变色生成器