使用jsPDF将HTML转PDF时渲染格式异常的问题求助

嘿，我完全懂你现在的头疼事儿——想开发Obsidian插件把Markdown导出成PDF，用marked转成HTML后，jsPDF生成的PDF格式却乱糟糟的，标题和普通文本没区别，加粗也不生效对吧？我来给你几个实用的解决思路。

先复盘下你的场景：

• 用marked把Markdown转成了结构正确的HTML（比如你贴的<h1>和<strong>标签都没问题）
• 调用jsPDF的html方法导出，但PDF里的样式完全没跟上

问题根源其实很简单：jsPDF的html方法默认只会渲染HTML结构，不会自动应用HTML标签的默认样式（比如h1的大字号、strong的加粗），所以得手动给HTML加上样式才行。

下面是具体的解决方案：

方案1：给HTML内容内嵌CSS样式 #

这是最直接有效的办法，把转换后的HTML包裹在一个带自定义样式的容器里，给各个标签指定字体、大小、间距等样式。示例代码如下：

const pdf = new jsPDF()

// 转换Markdown到HTML
const htmlContent = await marked(markedDownContent);

// 给HTML添加内嵌样式，让jsPDF能识别标签样式
const styledHtml = `
  <div style="font-family: Arial, sans-serif; padding: 10px;">
    <style>
      h1 { 
        font-size: 24px; 
        font-weight: bold; 
        margin: 16px 0; 
      }
      p { 
        font-size: 14px; 
        line-height: 1.6; 
        margin-bottom: 12px;
      }
      strong { 
        font-weight: 700; 
      }
    </style>
    ${htmlContent}
  </div>
`;

pdf.html(styledHtml, {
  callback: (doc) => {
    doc.save("output.pdf");
  },
  x: 0,
  y: 0,
  margin: 10
});

这样设置后，h1会有大字号和加粗效果，段落有合适的行高，加粗文本也能正常显示了。

方案2：配置jsPDF全局参数 #

你也可以先给jsPDF实例设置全局的字体和页面参数，让整体渲染更规范：

const pdf = new jsPDF({
  orientation: 'portrait', // 页面方向
  unit: 'mm', // 单位
  format: 'a4', // 纸张大小
  putOnlyUsedFonts: true // 只加载用到的字体，减小PDF体积
});

这个方案可以和内嵌CSS配合使用，效果更好。

方案3：引入自定义字体（可选） #

如果想让PDF的字体和Obsidian保持一致（比如用思源黑体），可以给jsPDF添加自定义字体：

1. 把字体文件转换成base64格式
2. 用addFont方法添加字体，然后在CSS里指定：

// 添加自定义字体
pdf.addFont('你的字体base64内容', 'CustomFont', 'normal');
pdf.setFont('CustomFont');

// 然后在styledHtml的style里设置font-family: 'CustomFont';

从你提供的HTML来看，结构是完全正确的，只要补上样式，PDF的排版就能正常显示啦。

备注：内容来源于stack exchange，提问作者bhavesh