求助：基于HTML打印布局生成多页PDF，解决CSS样式丢失及替代.print()的实现方案

根据你描述的场景——从JSON数据生成书籍、需要无打印机面板导出PDF且保留样式，我分享几个实战中验证过的可行方案：

方案1：优化html2canvas + jsPDF 流程（纯前端解决样式丢失） #

之前样式丢失的核心原因是html2canvas默认不会解析@media print规则，而且动态图片未加载完成就触发导出也会导致错位。调整思路如下：

步骤1：重构CSS样式 #

把原@media print里的样式提取出来，放到一个专门的导出类（比如.pdf-export），避免依赖打印媒体查询：

/* 替换原@media print的内容 */
.pdf-export {
  width: 210mm;
  margin: 0;
  padding: 0;
}
.pdf-export body {
  width: 210mm;
  padding: 0;
  margin: 0;
}
.pdf-export #buffering { display: none; }
.pdf-export #contentItem {
  opacity: 1;
  width: 210mm;
  height: 297mm;
  margin: 0;
  padding: 0;
}
/* 其余原print样式都替换为.pdf-export前缀，比如.coverPage、.coverLogo等 */

步骤2：编写导出逻辑 #

确保所有图片加载完成后再导出，使用新版jsPDF集成的html()方法（比单独用html2canvas更稳定）：

async function exportBookPdf(bookName) {
  // 启用导出样式
  document.body.classList.add('pdf-export');

  // 等待所有图片加载完成，避免空白或错位
  await Promise.all(Array.from(document.querySelectorAll('img')).map(img => {
    if (img.complete) return Promise.resolve();
    return new Promise(resolve => img.onload = resolve);
  }));

  // 初始化PDF，A4尺寸
  const doc = new jsPDF('p', 'mm', 'a4');
  
  // 渲染目标DOM并导出
  await doc.html(document.getElementById('contentItem'), {
    callback: (doc) => {
      doc.save(`${bookName}.pdf`);
      // 移除导出样式，恢复页面状态
      document.body.classList.remove('pdf-export');
    },
    x: 0,
    y: 0,
    width: 210 // 匹配A4宽度
  });
}

方案2：后端用Puppeteer生成PDF（完美保留样式） #

如果纯前端方案仍有样式瑕疵，推荐用Puppeteer（基于Chrome内核的Node.js工具）在服务端渲染页面生成PDF，它能1:1还原网页样式，还能实现无交互自动导出。

后端示例代码（Node.js） #

const puppeteer = require('puppeteer');

async function generateBookPdf(htmlContent, bookName) {
  const browser = await puppeteer.launch({ headless: 'new' });
  const page = await browser.newPage();
  
  // 注入填充好JSON数据的HTML
  await page.setContent(htmlContent);
  // 设置A4像素尺寸（794x1123）
  await page.setViewport({ width: 794, height: 1123 });
  
  // 生成PDF，确保背景样式被保留
  await page.pdf({
    path: `${bookName}.pdf`,
    format: 'A4',
    printBackground: true,
    displayHeaderFooter: false
  });

  await browser.close();
  // 将生成的PDF返回给前端下载
}

前端只需把渲染完成的书籍HTML发送给后端，后端生成PDF后返回即可，完全不会有样式丢失问题。

方案3：用pdfmake直接生成PDF（适合布局简单的场景） #

如果你的书籍布局不算复杂，可以跳过HTML渲染，直接用pdfmake将JSON数据转换成PDF文档，完全避免样式兼容问题，还能轻松实现单书样式定制。

示例代码 #

function generatePdfFromBookData(bookData) {
  // 定义PDF文档结构，可根据不同书籍动态修改样式
  const docDefinition = {
    pageSize: 'A4',
    content: [
      // 封面Logo
      {
        image: '/padova/img/logo2.png',
        width: 141.5, // 50mm ≈ 141.5pt（pdfmake默认单位是pt）
        alignment: 'center',
        margin: [0, 85, 0, 0] // 30mm ≈ 85pt上边距
      },
      // 封面标题
      {
        text: bookData.mod.name,
        fontSize: 30,
        alignment: 'center',
        margin: [0, 226, 0, 0], // 80mm ≈ 226pt上边距
        color: '#333',
        border: [false, false, true, false], // 底部边框
        borderColor: '#000',
        borderWidth: 1.4 // 0.5mm ≈ 1.4pt边框
      },
      // 书籍副标题
      {
        text: bookData.title,
        fontSize: 12,
        alignment: 'center',
        color: '#666',
        margin: [0, 5, 0, 0]
      },
      // 特征行
      {
        columns: bookData.mod.features.filter(f => f.value).map(f => ({
          text: f.name,
          fontSize: 10,
          alignment: 'center',
          width: '*'
        })),
        margin: [99, 340, 99, 0] // 35mm ≈99pt左右边距，120mm≈340pt上边距
      },
      // 特征值行
      {
        columns: bookData.mod.features.filter(f => f.value).map(f => ({
          text: f.value,
          fontSize: 10,
          alignment: 'center',
          width: '*'
        })),
        margin: [99, 5, 99, 0]
      },
      // 分页图片
      ...bookData.pages.map(page => ({
        image: page.picture.url,
        fit: [567, 813], // 200mm≈567pt，287mm≈813pt
        alignment: 'center',
        margin: [14, 14, 14, 14] // 5mm≈14pt边距
      }))
    ]
  };

  // 下载PDF
  pdfMake.createPdf(docDefinition).download(`${bookData.mod.name}.pdf`);
}

单书样式配置通用方案 #

不管用哪个方案，都可以给每本书的容器添加唯一类名（比如book-${bookId}），然后在CSS或PDF定义中针对类名定制样式：

/* 书籍1的封面标题样式 */
.book-1 .coverTitle {
  color: #E74C3C;
  font-size: 35pt;
}
/* 书籍2的封面标题样式 */
.book-2 .coverTitle {
  color: #2980B9;
  font-size: 28pt;
}

内容的提问来源于stack exchange，提问作者Mimmo