распечатать vueJS компонент или преобразовать в pdf - PullRequest
Новая
       18

распечатать vueJS компонент или преобразовать в pdf

0 голосов
/ 05 июня 2018

У меня есть компонент 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)
    }
}

Однако результат не похож на то, как компонент отображается.Я не смог найти решение для этого.Кто-нибудь может мне помочь?

enter image description here

1 Ответ

0 голосов
/ 08 июня 2018

Проблема существует, потому что 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)
  })
},
...