使用docx-preview打印文档时，页数超出和页面元素样式问题

本文链接：https://blog.csdn.net/weixin_45408984/article/details/139774548

# 在打印时调整内容边距及隐藏 Header 的问题和解决方案

## 问题描述

在使用 JavaScript 代码唤起打印窗口时，生成的文档中 `<section>` 标签自带 `padding` 样式，这导致内容无法铺满整个 A4 页面。此外，页面中还有一个 `header` 元素会占据头部的一部分高度，需要在打印时去掉。

## 示例代码

以下是初始代码示例，用于唤起打印窗口并渲染文档内容：

```javascript
const docxOptions = {
  inWrapper: false, // 启用围绕文档内容的包装器渲染
  ignoreWidth: false, // 禁用页面的渲染宽度
  ignoreHeight: false, // 禁止渲染页面高度
  ignoreFonts: false, // 禁用字体渲染
  breakPages: true, // 在分页符上启用分页
  ignoreLastRenderedPageBreak: true, // 在 lastRenderedPageBreak 元素上禁用分页
}

const blob = new Blob([res]);
const printer = window.open('', 'printwindow');

renderAsync(blob, printer.document.body, null, docxOptions).then(() => {
  printer.print();
  // printer.close();
});

问题原因

在打印时，<section> 标签的内联样式 padding: 72pt 90pt; width: 612pt; min-height: 792pt; column-count: 1; column-gap: 36pt; 会导致内容未能铺满页面。同时，<header> 元素会占据顶部空间，影响打印布局。

解决方案

为了解决上述问题，我们需要：

使用更高优先级的 CSS 选择器重置 <section> 标签的内边距 (padding)。
隐藏所有 header 元素。
确保内容铺满整个 A4 页面。

解决方案代码

以下是更新后的代码，通过添加打印样式来覆盖默认样式和内联样式：

const docxOptions = {
  inWrapper: false, // 启用围绕文档内容的包装器渲染
  ignoreWidth: false, // 禁用页面的渲染宽度
  ignoreHeight: false, // 禁止渲染页面高度
  ignoreFonts: false, // 禁用字体渲染
  breakPages: true, // 在分页符上启用分页
  ignoreLastRenderedPageBreak: true, // 在 lastRenderedPageBreak 元素上禁用分页
}

const blob = new Blob([res]);
const printer = window.open('', 'printwindow');

renderAsync(blob, printer.document.body, null, docxOptions).then(() => {
  // 创建样式元素
  const style = printer.document.createElement('style');
  style.type = 'text/css';

  // 添加打印样式
  style.innerHTML = `
    @media print {
      @page {
        size: A4; /* 设置页面尺寸为A4 */
        margin: 0; /* 设置页面边距为0 */
      }

      body {
        margin: 0; /* 设置内容边距为0 */
        padding: 0; /* 设置内容内边距为0 */
      }

      /* 确保内容铺满页面 */
      .docx {
        width: 100vw !important; /* 设置内容宽度为视窗宽度 */
        height: 100vh !important; /* 设置内容高度为视窗高度 */
        padding: 0 !important; /* 重置内边距 */
      }

      /* 更加具体的选择器 */
      section.docx {
        padding: 0 !important;
        width: 100vw !important;
        min-height: 100vh !important;
        column-count: 1 !important;
        column-gap: 0 !important;
      }

      /* 隐藏所有 header 元素 */
      header {
        display: none;
      }
    }
  `;

  // 将样式元素添加到打印窗口的文档头部
  printer.document.head.appendChild(style);

  // 调用打印功能
  printer.print();
  // 关闭打印窗口
  // printer.close();
});

解释

使用 !important：在 .docx 和 section.docx 选择器中添加 !important，确保这些样式具有最高优先级，覆盖任何内联样式。
更具体的选择器：使用 section.docx 选择器，以提高优先级覆盖内联样式。
设置页面尺寸和边距：确保页面尺寸为 A4，并且页面边距为 0。
隐藏 header 元素：确保 header 元素在打印时被隐藏。