如何让html2pdf无需媒体查询CSS生成小屏样式PDF？

给你几个实用的落地办法，不用依赖@media screen也能搞定：

1. 直接写PDF专属固定样式 #

html2pdf渲染时会读取页面内的所有CSS，你可以专门给要导出的表格写一套小屏尺寸的样式，完全不用媒体查询：

/* 专门给PDF输出的小屏表格样式 */
.rwd-table {
  width: 480px;
  margin: 0 auto;
}
.rwd-table td, .rwd-table th {
  display: block;
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
}

把这套样式直接写在页面的<style>标签或外部样式表里，导出时html2pdf会直接应用，无需额外配置。

2. 让html2pdf模拟小屏视口 #

html2pdf的html2canvas配置支持指定渲染宽度，直接把视口设为480px，你的原有媒体查询规则会自动触发，不用修改CSS：

html2pdf()
  .set({
    html2canvas: {
      width: 480, // 模拟小屏设备宽度
      scale: 1
    }
  })
  .from(document.getElementById('target-table'))
  .save();

这种方式相当于让工具假装在小屏设备上渲染，原来的@media screen and (max-width:480px)规则会直接生效，省得你重新写样式。

3. 用打印媒体类型分离样式 #

如果要同时兼顾网页端和PDF端的不同表现，用@media print专门写PDF样式，html2pdf能识别这个媒体类型：

/* 网页端原有响应式样式保留 */
@media screen and (max-width:480px) {
  /* 你的原有小屏样式 */
}

/* PDF专用的小屏样式 */
@media print {
  .rwd-table {
    width: 480px;
  }
  .rwd-table td {
    display: block;
  }
}

然后调用html2pdf时开启打印媒体模式：

html2pdf()
  .set({ usePrintMedia: true })
  .from(document.getElementById('target-table'))
  .save();

这样网页端按原有逻辑运行，PDF端自动应用打印样式，两者互不干扰。

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