在新窗口调用 vue-html-to-paper 打印功能答案

【问题标题】：Call vue-html-to-paper print function on a new window在新窗口调用 vue-html-to-paper 打印功能
【发布时间】：2022-11-11 06:59:37
【问题描述】：

我有一个要打印的 Vue 组件。当用户按下print 按钮时，将调用一个函数，该函数在新窗口中打开组件以隔离 HTML，并获得正确的格式。

    async openPrintDetailsDialogue() {
      const prtHtml = document.getElementById('printable').innerHTML;
      let stylesHtml = '';
      for (const node of [...document.querySelectorAll('link[rel="stylesheet"], style')]) {
        stylesHtml += node.outerHTML;
      }
      var 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();
      ...

然后我尝试使用$htmlToPaper 进行打印。

      ...
      await this.$htmlToPaper('printme');
      newWindow.close();
    }

但是，主窗口会提醒Element to print #printme not found!。

我在mounted() 函数中添加了插件VueHtmlToPaper：


  mounted() {
    Vue.use(VueHtmlToPaper);
  }

我已经尝试将现有的styles.css 传递给$htmlToPaper() 调用options，这没有任何改变。我的vue 文件的<style scoped> 中也有一些样式，它们也不能包含在options 参数中。

我怎样才能让VueHtmlToPaper“指向”newWindow？

【问题讨论】：

标签： vue.js dom printing vue-component printing-web-page

【解决方案1】：

通过打开一个新窗口，您将拥有一个新的单独网页，其中没有 Vue Js 实例。它不起作用，你不会让它以这种方式工作。您应该使用模态，更改当前页面或使用 Vue 实例创建一个新页面进行打印。

【讨论】：