如何让VueHtmlToPaper指向新窗口实现Vue组件打印？

报错根源 #

this.$htmlToPaper默认在主窗口的DOM环境中查找目标元素，而你把#printme放到了新打开的独立窗口里，主窗口自然找不到该元素，因此抛出Element to print #printme not found!错误。另外Vue的<style scoped>样式因为带有data-v-xxx前缀，直接拷贝HTML到新窗口时，需要同步拷贝对应的scoped样式标签才能生效。

最优解决方案：直接操作新窗口打印（无需依赖插件） #

既然已经手动创建了包含目标内容和样式的新窗口，完全可以跳过VueHtmlToPaper插件，直接调用新窗口的原生打印方法，逻辑更简单且避免插件限制：

async openPrintDetailsDialogue() {
  const prtHtml = document.getElementById('printable').innerHTML;
  let stylesHtml = '';
  // 拷贝主窗口所有样式资源（包括scoped style标签）
  for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
    stylesHtml += node.outerHTML;
  }
  const newWindow = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0');
  newWindow.document.write(`<!DOCTYPE html>
    <html>
      <head>
        ${stylesHtml}
      </head>
      <body id="printme">
        ${prtHtml}
      </body>
    </html>`);
  newWindow.document.close();
  newWindow.focus();

  // 等待新窗口资源加载完成，避免打印空白
  await new Promise(resolve => {
    newWindow.onload = resolve;
  });

  // 调用新窗口原生打印
  newWindow.print();
  // 打印完成后自动关闭窗口（兼容不同浏览器）
  if ('onafterprint' in newWindow) {
    newWindow.onafterprint = () => newWindow.close();
  } else {
    setTimeout(() => newWindow.close(), 1000);
  }
}

若坚持使用VueHtmlToPaper插件的适配方案 #

如果一定要保留插件，需要修改插件的执行上下文，让它在新窗口的DOM中查找元素。可以封装一个自定义函数，传入新窗口对象：

// 组件内自定义打印函数
customHtmlToPaper(targetWindow, elId) {
  const element = targetWindow.document.getElementById(elId);
  if (!element) {
    console.error(`Element to print #${elId} not found!`);
    return;
  }
  targetWindow.focus();
  targetWindow.print();
  // 打印完成后关闭窗口
  targetWindow.onafterprint = () => targetWindow.close();
}

// 原方法中调用自定义函数
async openPrintDetailsDialogue() {
  // ... 前面的创建新窗口、写入HTML和样式的代码保持不变
  newWindow.document.close();
  newWindow.focus();

  await new Promise(resolve => {
    newWindow.onload = resolve;
  });

  this.customHtmlToPaper(newWindow, 'printme');
}

scoped样式生效说明 #

你已经通过循环拷贝了主窗口所有style标签（包括scoped样式），而渲染后的HTML元素带有对应的data-v-xxx属性，scoped样式的选择器也包含该属性，因此新窗口中的样式会自动匹配生效，无需额外处理。

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