如何打印Vue组件W/ Styles

我正在尝试使用VueJS打印一个组件，所有样式都在同一个文件中，但它没有得到CSS样式。我也使用类星体框架，不知道它是否会影响最终结果。

<div style="margin: 12px 12px">
    <div class="central-layout">
      <p>
        <strong
          ><a href="https://www.nightprogrammer.com/" target="_blank"
            >Nightprogrammer.com</a
          ></strong
        >: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
        posuere, tellus lobortis posuere tempor, elit sem varius libero, ac
        vulputate ante orci vel odio. Nam sit amet tortor malesuada tellus
        rutrum varius vel a mauris. Integer volutpat neque mauris, vel imperdiet
        mi aliquet ac. Proin sed iaculis ipsum. Vivamus tincidunt egestas
        sapien, vitae faucibus velit ultricies eget. Donec mattis ante arcu, a
        pretium tortor scelerisque et. Morbi sed dui tempor, consectetur turpis
        sed, tristique arcu.
      </p>
    </div>
  </div>

<style scoped>
.central-layout{
  flex-direction: column-reverse;
}
</style>

exportToPDF() {
      const content = this.$refs.printInteraction.innerHTML
      let cssHtml = ''
      for (const node of [...document.querySelectorAll('style')]) {
        cssHtml += node.outerHTML
      }
      const winPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0')
      winPrint.document.write(`<!DOCTYPE html>
<html>
  <head>
    ${cssHtml}
  </head>
  <body>
    ${content}
  </body>
</html>`)
      winPrint.document.close()
      winPrint.focus()
      winPrint.print()
      winPrint.close()
    }
  }
}

有人能帮我吗?

我需要打印的样式设置在页面

正确导出可能相当困难，因为并非所有内容都得到正确支持。我推荐这样使用:https://github.com/niklasvh/html2canvas

然后您可以将图像转换为PDF格式。但无论如何，这样的事情是相当沉重的，应该由一些后端处理:转换，在AWS上托管文件，并作为回调发送回来。

相关内容

最新更新

热门标签：