文章/答案/技术大牛

发布

问如何打印Vue组件W/样式
EN

Stack Overflow用户

提问于 2022-11-07 18:48:34

回答 1查看 25关注 0票数 0

我试图使用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()
    }
  }
}

有谁可以帮我？

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

vue.js

vue-component

quasar-framework

quasar

回答 1

Stack Overflow用户

发布于 2022-11-07 19:28:15

正确地导出可能非常困难，因为并不是所有的事情都得到了适当的支持。我建议您使用以下内容：https://github.com/niklasvh/html2canvas

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/74351464

复制

相似问题

问如何打印Vue组件W/样式
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何打印Vue组件W/样式EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何打印Vue组件W/样式
EN