Zusammenfassung zweier Methoden zum Implementieren der Vue-Druckfunktion

importiere Print von 'vue-print-nb' Vue.use(Print); //Registrieren

<div id="Drucktest" >

  <p>Der Mond scheint auf die Berge</p>

    <p>Die Brise kommt vom Fluss</p>

</div>

<button v-print="'#printTest'">Drucken</button>

Drucken aus '@/plugs/print' importieren
Vue.use(Print) // <Vorlage> registrieren
  <Abschnitt ref="Drucken">
    Inhalt drucken <div class="no-print">Druck mich nicht aus</div>
  </Abschnitt>
</Vorlage>
this.$print(this.$refs.print) // Verwendung

<div class="no-print">Drucken Sie mich nicht aus</div>

<div class="do-not-print-me-xxx">Drucken Sie mich nicht aus</div>this.$print(this.$refs.print,{'no-print':'.do-not-print-me-xxx'}) // Verwenden

<Vorlage>
    <div>
        <ul Klasse="drucken-ul">
            <li v-for="(Element, Index) von Tabellendaten" :Schlüssel="Index" 
                :id="'printDiv' + index" Stil="Seitenumbruch nach: immer;">
                <div>
                    <p>{{Artikel.Datum}}</p>
                    <p>{{item.name}}</p>
                    <p>{{item.provinz}}</p>
                    <p>{{item.stadt}}</p>
                    <p>{{Artikel.Adresse}}</p>
                    <p>{{item.zip}}</p>
                </div>
            </li>
        </ul>
        <div @click="handlePrint">Drucken</div>
    </div>
</Vorlage>

<Skript>
    Standard exportieren {
        Daten() {
            zurückkehren {
                Tabellendaten: [{
                    Datum: '2016-05-03',
                    Name: 'Wang Xiaohu',
                    Provinz: 'Shanghai',
                    Stadt: 'Putuo District',
                    Adresse: „Nr. 1518, Jinshajiang Road, Putuo District, Shanghai“,
                    PLZ: 200333
                }, {
                    Datum: '2016-05-02',
                    Name: 'Wang Xiaohu',
                    Provinz: 'Shanghai',
                    Stadt: 'Putuo District',
                    Adresse: „Nr. 1518, Jinshajiang Road, Putuo District, Shanghai“,
                    PLZ: 200333
                }, {
                    Datum: '2016-05-04',
                    Name: 'Wang Xiaohu',
                    Provinz: 'Shanghai',
                    Stadt: 'Putuo District',
                    Adresse: „Nr. 1518, Jinshajiang Road, Putuo District, Shanghai“,
                    PLZ: 200333
                }, {
                    Datum: '2016-05-01',
                    Name: 'Wang Xiaohu',
                    Provinz: 'Shanghai',
                    Stadt: 'Putuo District',
                    Adresse: „Nr. 1518, Jinshajiang Road, Putuo District, Shanghai“,
                    PLZ: 200333
                }, {
                    Datum: '2016-05-08',
                    Name: 'Wang Xiaohu',
                    Provinz: 'Shanghai',
                    Stadt: 'Putuo District',
                    Adresse: „Nr. 1518, Jinshajiang Road, Putuo District, Shanghai“,
                    PLZ: 200333
                }, {
                    Datum: '2016-05-06',
                    Name: 'Wang Xiaohu',
                    Provinz: 'Shanghai',
                    Stadt: 'Putuo District',
                    Adresse: „Nr. 1518, Jinshajiang Road, Putuo District, Shanghai“,
                    PLZ: 200333
                }, {
                    Datum: '2016-05-07',
                    Name: 'Wang Xiaohu',
                    Provinz: 'Shanghai',
                    Stadt: 'Putuo District',
                    Adresse: „Nr. 1518, Jinshajiang Road, Putuo District, Shanghai“,
                    PLZ: 200333
                }]
            }
        },
        Methoden: {
            handlePrint() {
                var newWin = window.open(""); //Öffne ein neues leeres Fenster für (var i = 0; i < this.tableData.length; i++) {
                    var imageToPrint = document.getElementById("printDiv" + i); //Den zu druckenden Inhalt abrufen newWin.document.write(imageToPrint.outerHTML); //Den zu druckenden Inhalt dem neuen Fenster hinzufügen}
                const styleSheet = `<style>li{list-style:none}</style>`; 
                newWin.document.head.innerHTML = styleSheet; //Dem gedruckten Inhalt Stil hinzufügen newWin.document.close(); //Dieser Satz muss hinzugefügt werden, wenn er im Internet Explorer verwendet wird newWin.focus(); //Dieser Satz muss hinzugefügt werden, wenn er im Internet Explorer verwendet wird setTimeout(function() {
                    newWin.print(); //Drucken newWin.close(); //Fenster schließen }, 100);
            }
        }
    }
</Skript>

<Stil>
    .drucken-ul {
        Breite: 600px;
        Listenstil: keiner;
        Rand: 1px durchgezogen #e8e8e8;
    }
</Stil>