如何让移动端dom-to-image按桌面端样式渲染组件生成PDF

该问题本质是dom-to-image会基于当前设备的DOM渲染状态生成截图，移动端视口宽度更窄、响应式样式会自动触发移动端布局规则，所以生成的内容和桌面端效果不一致。你可以通过强制固定渲染时的DOM环境，让移动端也按照桌面端规则生成内容：

具体实现步骤 #

• 第一步：临时修改渲染容器尺寸与视口规则
  渲染前先缓存原有样式，强制指定组件为桌面端标准宽度，同时修改viewport避免移动端自适应缩放：

const exportNode = document.querySelector('#你要导出的组件节点');
// 缓存原有样式用于后续还原
const originNodeStyle = exportNode.getAttribute('style') || '';
const viewportMeta = document.querySelector('meta[name="viewport"]');
const originViewport = viewportMeta.getAttribute('content');

// 强制设置为桌面端常用宽度1920px，可根据你的实际桌面端尺寸调整
exportNode.style.width = '1920px';
exportNode.style.minWidth = '1920px';
exportNode.style.transformOrigin = 'top left';
// 强制viewport宽度匹配桌面端尺寸
viewportMeta.setAttribute('content', 'width=1920, initial-scale=1, maximum-scale=1, user-scalable=no');

• 第二步：调用dom-to-image时显式指定画布参数
  传入宽高参数强制按桌面尺寸生成画布，避免自适应移动端视口：

domtoimage.toPng(exportNode, {
  width: 1920,
  // 高度用节点实际内容高度，避免内容被截断
  height: exportNode.scrollHeight,
  style: {
    transform: 'scale(1)'
  }
}).then(dataUrl => {
  // 此处插入你生成PDF的逻辑

  // 所有操作完成后还原原有样式，不影响用户正常操作
  exportNode.setAttribute('style', originNodeStyle);
  viewportMeta.setAttribute('content', originViewport);
}).catch(err => {
  // 异常捕获后也要记得还原样式
  exportNode.setAttribute('style', originNodeStyle);
  viewportMeta.setAttribute('content', originViewport);
})

适配补充说明 #

• 如果你项目用了rem、vw/vh这类相对单位，渲染前需要临时把根元素font-size、单位基准值修改为桌面端对应的数值，保证元素尺寸和桌面端完全一致。
• 导出前如果有position: fixed的悬浮元素，可以临时隐藏或者调整位置，避免偏移出画布。
• 如果项目有单独的移动端样式规则，可以临时给body添加自定义类名，配合CSS强制启用桌面端样式，导出完成后移除类名即可。

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