更新您的 HTML 库存模板以升级 PDF 生成器

更新您的 HTML 库存模板以升级 PDF 生成器

这是为谁准备的？

此次升级仅适用于支持旧版 PDF 生成器的组织。Zoho CRM 将在库存模板页面和生成 PDF 时通过应用内横幅通知这些用户。

因此，只有来自这些组织的用户需要更新他们的 HTML 库存模板。

需要做什么？

您需要做的是检查并编辑库存模板 HTML 中的页眉、页脚和页码标签，使其符合支持格式。保存模板后，使用新的 PDF 生成器生成 PDF 文件，通过切换到新 PDF 生成器来检查对齐情况。

为避免生成的 PDF 文件出现断裂或错位，并确保与优化后的 PDF 生成器兼容，请于 2026 年 3 月 25 日前完成此更新。
Notes
注意：作为备用方案，旧版 PDF 生成器将提供一个月的可用时间，之后将停止服务。
提供的示例说明了header 标签的使用。您可以使用以下详细指南将相同的方法应用于其他标签。


如何更新

要更新您使用 HTML 创建的所有库存模板中的 HTML 标签，请按照以下对齐步骤操作。
  1. 导航至设置→定制→模板→库存。
  2. 点击使用 HTML 创建的模板的编辑图标。
  3. 点击编辑 HTML 图标。
  4. 在您的 HTML 顶部附近查找最外层的<table>标签。在旧模板中，它通常看起来像这样：
    Quote
    <table>
    <thead> 
         <!-- your header content: logo, company name, etc. --> 
       </thead> 
       <tbody> 
         <!-- your main content: line items, totals, etc. --> 
       </tbody> 
       <tfoot> 
         <!-- your footer content: page numbers, terms, etc. --> 
       </tfoot> 
    </table>

  5. 将整个外部表格替换为三个独立的 HTML 区域块。将您的头部、主体和页脚内容复制到相应的块中：
    Quote
    <!-- HEADER BLOCK --> 
     <section id="header-container" class=""> 
       <div id="pdfgen-header"> 
         <!-- Paste your former <thead> content here --> 
       </div> 
     </section> 
       
     <!-- BODY / CONTENT BLOCK --> 
     <section id="page-container" class=""> 
       <div id="pdfgen-content"> 
         <!-- Paste your former <tbody> content here --> 
       </div> 
     </section> 

       <!-- FOOTER BLOCK --> 
     <section id="footer-container" class=""> 
       <div id="pdfgen-footer"> 
         <!-- Paste your former <tfoot> content here --> 
       </div> 
     </section> 

  6. 旧引擎使用 CSS 计数器技术生成页码。增强引擎自动注入页码，因此不再需要此 CSS，应将其删除。仅删除.pagenum 计数器规则。不要删除整个< style>块——所有其他 CSS（字体、颜色、表格样式、间距等）应保留原位。
  7. 迁移后，如果发现 PDF 边缘出现额外的意外空白，请添加此 CSS 来重置默认浏览器间距：
    Quote
     <style> 
       html { 
         margin: 0px; 
         padding: 0px; 
       } 
     </style> 
    这是可选的——只有当您预览时看到间距问题时才添加。
根据下表编辑您的 HTML 代码，包括页眉、页脚和分页标签。
元素
不支持的格式
 支持的格式
页眉
表格主体中<thead>...</thead>内的内容。
内容应包含在

<section id="header-container"class="">
<div id="pdfgen-header">
...
</div>
</section>

CSS 样式应按如下方式提供：

<style>
#pdfgen-header {
}
</style>
页脚
表格主体中 <tfoot>...</tfoot> 包围的内容。
内容应包含在

<section id="footer-container"class="">
<div id="pdfgen-footer">
...
</div>
</section>

页脚内容所需的 CSS 应如下提供：

<style>
#pdfgen-footer {
}
</style>
页码


<span
class="pagenum"></span>
<style>
*.pagenum:after {
counter-increment: page;
content: "" counter(page);
}
</style>
<span class="pageNumber"></span>

要获取总页码数，请使用
<span class="totalPage"></span>

哪些保持不变？

  1. 除了上述更改外，其余代码结构可以保持不变。
  2. 布局表格：位于 HTML 的最顶层，包裹所有内容，其直接子元素为<thead>/<tbody>/<tfoot>。
  3. 数据表格：位于主体内容区域内部，包含实际业务数据（产品、价格等）的行/列。
  4. 只需替换布局表格。其内部的数据表格保持不变。
  5. 仅移除.pagenum 计数器规则。不要删除整个<style>块——所有其他 CSS（字体、颜色、表格样式、间距等）应保持原位。
更新标签后，保存模板并生成 PDF 以检查对齐。为验证对齐，请点击底部“此处”，查看由优化（新）PDF 生成器产生的预览。



Idea
仍然有问题吗？
  1. 检查同一模板中不要有多个 header-container 或 footer-container 部分。
  2. 确认没有 <tr> 或 <td> 标签位于真实的 <table> 元素之外。
  3. 确保类名是 pageNumber（大写的 N）——而不是 pagenum。
  4. 确保您没有不小心移除了与 .pagenum 页计数器无关的 CSS。
如果您对此更新有任何疑问，请通过 support-crm@zohocorp.com.cn 联系我们。感谢您的耐心，我们将持续改进 Zoho CRM。