如何在Ionic应用中用CORDOVA.PDF.GENERATOR生成带样式的PDF

我之前也踩过这个坑！这个插件默认如果只传部分HTML片段（比如你用的page[0].innerHTML），大概率会丢失样式——因为它没法获取到页面里的完整CSS规则。下面给你几个靠谱的解决方案，亲测有效：

1. 传递包含完整样式的HTML文档 #

不要只传目标元素的内部HTML，而是构建一个完整的HTML字符串，把页面里的所有样式（内联样式、<style>标签内容、甚至外部CSS的内容）都打包进去。示例代码：

// 先收集页面中所有样式内容
let styleContent = '';
const styleElements = document.querySelectorAll('style, link[rel="stylesheet"]');

// 处理内联style标签
styleElements.forEach(el => {
  if (el.tagName === 'STYLE') {
    styleContent += el.innerHTML;
  }
});

// 处理外部CSS（异步加载后再生成PDF）
const externalLinks = Array.from(styleElements).filter(el => el.tagName === 'LINK');
Promise.all(
  externalLinks.map(link => fetch(link.href).then(res => res.text()))
).then(externalCss => {
  styleContent += externalCss.join('\n');
  generateFullHTMLPDF();
});

function generateFullHTMLPDF() {
  // 拼接完整的HTML文档结构
  const fullHTML = `
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <style>${styleContent}</style>
      </head>
      <body>${page[0].innerHTML}</body>
    </html>
  `;
  
  const options = { 
    documentSize: 'A4', 
    type: 'share', 
    fileName: 'myFile.pdf',
    enableJavascript: true, // 启用JS，确保动态样式/内容生效
    orientation: 'portrait' // 可选，根据需求设置横向/纵向
  }; 
  cordova.plugins.pdf.fromData(fullHTML, options);
}

2. 把所有样式内联到HTML元素上 #

如果外部CSS加载有问题，或者你想确保样式100%不会丢失，可以用样式内联工具把全局CSS规则直接写到对应的HTML元素的style属性里。推荐用juice这个轻量库：

• 先安装：npm install juice --save，然后在Cordova项目中引入它
• 代码修改示例：

import juice from 'juice';

// 获取目标元素的HTML，同时内联所有样式
const targetHTML = page[0].innerHTML;
const inlinedHTML = juice.inlineContent(targetHTML, document.querySelector('style').innerHTML);

// 构建完整HTML后生成PDF
const fullHTML = `
  <!DOCTYPE html>
  <html>
    <body>${inlinedHTML}</body>
  </html>
`;

const options = { 
  documentSize: 'A4', 
  type: 'share', 
  fileName: 'myFile.pdf'
}; 
cordova.plugins.pdf.fromData(fullHTML, options);

3. 检查插件配置的关键参数 #

确保你的options里开启了这些必要选项：

• enableJavascript: true：如果页面有JS动态控制的样式/内容，这个选项能让插件先执行JS再生成PDF
• margin: '10mm'：可选，避免内容被页面边缘裁剪，影响样式展示
• 尽量避免使用base64: true（除非你需要返回base64字符串），默认false更利于样式加载

测试小技巧 #

• 先把拼接好的fullHTML打印到控制台（console.log(fullHTML)），复制到本地新建的HTML文件里打开，看看样式是否正常。如果本地打开都有问题，先修复HTML的样式问题再生成PDF
• 页面中的图片、字体尽量用base64格式，或者file:///开头的本地绝对路径，避免插件加载不到外部资源

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