如何通过Chrome打印生成PDF时减小文件体积？含HTML/CSS方案

当然可以通过@media print媒体查询和调整HTML/CSS结构来压缩PDF体积，不用额外工具，具体方法如下：

一、用@media print做针对性优化 #

• 限制图片打印尺寸与渲染方式：浏览器转PDF时会默认按屏幕分辨率处理图片，甚至放大渲染，导致体积暴涨。直接在打印样式里限制图片的最大打印尺寸，同时指定高效的渲染规则：

  @media print {
    img {
      max-width: 12cm; /* 根据实际需求调整，比如A4纸宽度的一半 */
      max-height: 10cm;
      image-rendering: optimizeSpeed; /* 优先渲染速度和体积，放弃极致清晰度 */
    }
  }
  

• 砍掉非打印冗余内容：页面里的导航、侧边栏、广告这些没必要打印的元素，直接在打印样式里隐藏，减少PDF的无效内容：

  @media print {
    .nav-bar, .sidebar, .ad-block {
      display: none !important;
    }
  }
  

• 简化表格打印样式：复杂的表格边框、背景色、内边距会增加PDF的渲染数据，打印时尽量简化：

  @media print {
    table {
      border-collapse: collapse; /* 合并边框，减少冗余数据 */
      border: none;
    }
    td {
      padding: 0.15em; /* 缩小内边距 */
      border: 1px solid #ddd !important; /* 用细浅色边框，降低渲染开销 */
      background: none !important; /* 去掉背景色 */
    }
  }
  

二、调整HTML/CSS结构优化 #

• 换用更轻量的图片格式：如果原图是PNG（无透明需求的话），换成JPEG格式；支持WebP的话优先用WebP，本身文件更小，转PDF后体积自然更低。
• 给图片设置打印专用低分辨率版本：用srcset给图片指定低分辨率的打印用图，让打印时加载更小的图片：

  <img src="high-res-img.jpg" srcset="low-res-img.jpg 720w" alt="图片描述">
  

  配合打印样式强制使用低分辨率图：

  @media print {
    img {
      content: url('low-res-img.jpg'); /* 直接指定打印用图路径 */
    }
  }
  

• 简化表格布局：尽量避免多层表格嵌套，减少colspan/rowspan的使用，复杂的表格结构会让浏览器渲染PDF时生成更多冗余数据，单层表格更高效。

三、浏览器打印设置辅助（额外小技巧） #

在打印对话框里，选择简化页面（Chrome里有这个选项）或者调低打印质量，浏览器会自动压缩图片、简化样式，进一步减小PDF体积。

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