如何仅打印指定Vue组件并保留样式 实现导出PDF或打印功能

方案一：打印媒体查询（无需iframe，最简单稳定） #

这是最推荐的方案，无需处理组件跨容器渲染的问题，所有样式、交互逻辑都和原有页面完全一致。

实现步骤 #

• 给需要打印的毕业证组件外层添加专属类名 diploma-print-container，给页面所有不需要打印的内容外层添加公共类名 no-print
• 在全局样式中添加打印媒体查询规则：

@media print {
  /* 自定义打印纸张规格，可根据毕业证尺寸调整 */
  @page {
    margin: 0;
    size: A4 portrait;
  }
  /* 先隐藏页面所有元素 */
  body * {
    visibility: hidden;
  }
  /* 彻底隐藏不需要打印的元素 */
  .no-print {
    display: none !important;
  }
  /* 仅显示毕业证组件及其子元素 */
  .diploma-print-container, .diploma-print-container * {
    visibility: visible;
  }
  /* 把毕业证组件固定到页面左上角，占满打印区域 */
  .diploma-print-container {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
  }
}

• 触发打印时直接调用 window.print() 即可，打印结束后页面会自动恢复原有样式，原有组件的 v-show 隐藏逻辑无需修改。

方案二：iframe 挂载Vue实例（保留完整Vue渲染逻辑） #

如果必须用iframe实现，可以直接把Vue组件挂载到iframe的文档流中，而非拼接HTML字符串，彻底解决样式丢失、渲染逻辑失效的问题。

实现步骤（Vue3为例） #

// 创建隐藏iframe，避免影响页面可视区域
const iframe = document.createElement('iframe')
iframe.style.position = 'absolute'
iframe.style.left = '-9999px'
iframe.style.top = '-9999px'
iframe.style.width = '210mm'
iframe.style.height = '297mm'
document.body.appendChild(iframe)

iframe.onload = async () => {
  const iframeDoc = iframe.contentDocument
  const iframeWin = iframe.contentWindow

  // 复制当前页面所有样式到iframe，包括内置style和外链css
  document.querySelectorAll('style, link[rel="stylesheet"]').forEach(tag => {
    iframeDoc.head.appendChild(tag.cloneNode(true))
  })

  // 导入毕业证组件，创建Vue实例挂载到iframe body
  const DiplomaApp = createApp(DiplomaComponent, {
    // 传入组件需要的所有props
    studentInfo: currentStudentInfo,
    graduationDate: graduationDate
  })
  // 注册组件依赖的插件，比如UI库、状态管理等
  DiplomaApp.use(ElementPlus).use(pinia)
  DiplomaApp.mount(iframeDoc.body)

  // 等待组件渲染完成后触发打印
  setTimeout(() => {
    iframeWin.print()
    // 打印完成后销毁iframe
    iframeWin.onafterprint = () => {
      document.body.removeChild(iframe)
    }
  }, 300)
}

iframe.src = 'about:blank'

Vue2适配说明 #

把createApp相关逻辑替换为Vue2的实例化写法即可，其余逻辑完全一致：

new Vue({
  el: iframeDoc.body,
  render: h => h(DiplomaComponent, {
    props: {
      studentInfo: currentStudentInfo
    }
  })
})

注意事项 #

• 媒体查询方案中如果存在scoped样式冲突，可以用深度选择器调整规则优先级
• iframe方案中如果用到跨域的外部样式资源，需要确保资源支持跨域访问，避免样式加载失败

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