Vue.js 3中使用Paged.js遇排版问题：A4横向内容显示异常

以下是可能遗漏的配置项及修复方案：

• 确保@page规则的优先级与正确性
  全局或组件内样式可能覆盖@page规则，需明确指定横向尺寸并提升优先级：

  @page {
    size: A4 landscape !important;
    margin: 1cm; /* 可选，设置页边距避免内容贴边截断 */
  }
  

• 适配内容容器的尺寸
  横向A4的实际可用宽度为297mm减去左右边距，需给内容容器设置对应宽度，避免内容按纵向A4的210mm宽度排版：

  .content-container {
    width: 100%; /* 或直接设置为calc(297mm - 2cm)，对应上边设置的1cm左右边距 */
    box-sizing: border-box;
  }
  

• 检查Previewer组件的初始化配置
  使用Paged.js Previewer时，需在初始化时传递正确的页面配置，可在Vue组件的mounted钩子中手动初始化：

  import { Previewer } from 'pagedjs';
  
  export default {
    mounted() {
      const previewer = new Previewer();
      previewer.preview(document.querySelector('.content-container'), {
        pageSize: 'A4 landscape'
      });
    }
  }
  

• 移除内容元素的固定宽度限制
  检查内容中的表格、图片等元素是否设置了固定宽度（如width: 210mm），这类固定尺寸会导致内容无法适配横向页面，需改为相对宽度（如width: 100%）。

内容的提问来源于stack exchange，提问作者May W.