打印 vueJS 组件或转换为 pdf答案

【问题标题】：print vueJS component or convert to pdf打印 vueJS 组件或转换为 pdf
【发布时间】：2018-06-05 13:12:22
【问题描述】：

我有一个要打印的 vueJS 组件。但是，当我使用标准打印对话框时，我会丢失所有 CSS，基本上只有纯文本。

我也试过 Printd。

我的代码是这样的：

mounted () {
    this.cssText = `
        .a4-paper {
            height: 29cm;
            width: 14cm;
        }
        h4, h3, h2, h1 {
            text-align: center;
            width: 100%;
        }
        label.underline {
            border-bottom: solid black 1px;
            height: 0.3cm;
            width: 100%;
        }`;
    this.d = new Printd()  
},
methods: {
    show(event: Event) {
        this.event = event;
        this.visible = true;
    },
    print() {
        this.d.print(this.$el, this.cssText)
    }
}

但是，结果看起来与组件的呈现方式完全不同。我一直无法找到解决方案。有人可以帮帮我吗？

【问题讨论】：

标签： vue.js printing html-to-pdf html-pdf

【解决方案1】：

问题的存在是因为 printd 创建了一个新的 Document 用于打印，因此样式不会传递到您使用 this.$el 引用的子组件中

我使用的解决方法是从当前文档的头部获取所有样式元素并将它们附加到printd 创建的文档中。将您的打印方法更改为以下内容；

print() {
  const d = new Printd()
  d.print(this.$el, this.cssText, (win, doc, node, launchPrint) => {
    // Get style elements
    const styles = [].slice.call(document.getElementsByTagName('style'))
    // append them to the the new document head element
    styles.forEach(styleElement => doc.head.appendChild(styleElement.cloneNode(true)))
    launchPrint(win)
  })
},

【讨论】：